Servicepanel restyle
Servicepanel restyle

 

Na de restyle van onze website werd het hoog tijd om ook het Service Panel van een nieuw jasje te voorzien. De Byte website is opgebouwd uit het Joomla CMS met daarin onze eigen custom modules en het template. Ons servicepanel daarentegen is volledig in-house ontwikkeld en gebruikt een volledig andere templateting techniek dan Joomla. Hierbij komt dat sommige tools op het service panel al een aantal jaar oud zijn en daardoor niet helemaal voorbereid zijn op de nieuwste template technieken.

Service Panel restyle

Omdat het service panel uiteraard een andere template techniek gebruikt dan Joomla was het noodzakelijk om het Joomla template volledig met de hand over te zetten naar het servicepanel. Sommige oude tools waren nog niet voorbereid op templating en deze hebben we dan ook  eerst om moeten schrijven. Bij de restyle hebben we direct zoveel mogelijk rekening gehouden met suggesties van klanten. Zo is nu altijd duidelijk de domeinnaam van het actieve domein in de titel van de pagina aanwezig. Ook blijft het vernieuwde tabmenu boven iedere tool staan, zodat het makkelijker navigeren is tussen de verschillende tools. We willen onze klanten dan ook hartelijk bedanken voor de suggesties! Het nieuwe design is inmiddels al enige tijd live maar nog niet helemaal af. Op dit moment zijn we druk bezig om het domeinen overzicht qua snelheid te optimaliseren, en de indeling te verbeteren.

Lastig! – De IE-7 z-index bug

 

z-index bug IE7
Het menu valt achter de pagina in IE7

Iedereen binnen Byte werkt met Firefox, ook de developers, mede om de handige tools zoals Firebug en Web developer toolbar. Helaas gebruikt een groot deel van Nederland nog steeds Internet Explorer als de favoriete webbrowser.

Het komt regelmatig voor dat CSS in IE zich anders gedraagt dan in andere browsers. Gelukkig is Microsoft met IE8 heel goed op weg, maar in IE7 bevinden zich nog altijd een groot aantal bugs. Een hele lastige in het lijstje is toch wel de z-index bug. Deze bestaat al sinds IE4 en is met de komst van IE8 pas opgelost. Kort omschreven houdt de bug in dat een absoluut gepositioneerd element een nieuwe z-index stack krijgt, ongeacht deze een z-index waarde mee heeft gekregen in de CSS. Alle opvolgende elementen in de HTML code zullen dus over dit element heen vallen, en dit is nu net niet de bedoeling bij een popup menu.

Ik heb veel oplossingen langs zien komen, van javascripts die achteraf de z-index volgorde goedzetten, tot negatieve z-index waarden en iframes. In dit geval was de oplossing eigenlijk erg simpel, maar ik was deze nergens anders tegen gekomen. Omdat het element wat op de voorgrond moet verschijnen in dit geval absoluut gepositioneerd wordt, is het (voor zover de rest van de site/css dit toelaat) vaak mogelijk om met de HTML code voor dit element te schuiven. In het servicepanel is de HTML code voor het menu nu vrijwel als laatste opgenomen, waardoor deze in IE automatisch een hogere z-index krijgt en dus wel bovenop de pagina zal vallen.

 

Door de menuwrapper absoluut te positioneren (dit is mogelijk omdat de header altijd dezelfde hoogte heeft) met daarin een relatief gepositioneerde div met het menu, staat het menu netjes op de juiste plaats en heeft een hogere z-index dan de rest van de pagina. En dat zonder javascript of andere vieze workarounds. Deze simpele oplossing wilde ik toch even delen :)

×

U kunt niet meer reageren.