Hoe absoluut vindt IE position: absolute?
- woensdag 16 december 2009
- 2 reacties
Absoluut positioneren kan in vele situaties handig zijn wanneer bepaalde elementen een vaste afstand van bijvoorbeeld de bovenkant van het scherm hebben. Middels een CSS top: 0px; declaratie zal een element zich tegen de bovenkant van de browser nestelen wanneer dit in combinatie met absoluut positioneren wordt gedaan. Er zijn echter gevallen wanneer de elementen zich niet naar wens gedragen wanneer je middels absoluut positioneren elementen in je ontwerp gaat plaatsen.
Zo stuitte ik bij de realisatie van een website tegen een broodkruimelnavigatie dat in de webbrowser Internet Explorer versprong. Omdat volgens de webrichtlijnen de broodtekst van een webpagina zo hoog mogelijk in de broncode terug dient te komen, had ik de -zo semantisch als ik te werk ga- in een unordered list verwerkte broodkruimelnavigatie na de broodtekst geplaatst in de html code. In de praktijk zie je een horizontale broodkruimelnavigatie juist boven de tekst terugkomen, waar het absoluut positioneren dan ook om de hoek kwam kijken.
De broodtekst gaf ik een padding-top mee om ruimte te creeren voor de broodkruimelnavigatie om vervolgens de broodkruimelnavigatie absoluut te positioneren en op een juiste hoogte te plaatsen van de bovenkant van de webbrowser, net boven de broodtekst.
Het resultaat in Internet Explorer
Zowel de broodtekst als de absoluut gepositioneerde broodkruimelnavigatie werd links uitgelijnd getoond, totdat ik een kijkje nam in Internet Explorer 7. Op sommige webpagina's werd de horizontale broodkruimelnavigatie met een margin-left (zo leek het) uitgelijnd en werd het dus verticaal niet gelijk geplaatst met de broodtekst. Zie screenshot rechts of het online voorbeeld. Wat het nog vreemder maakte, was dat -op de pagina's waar zich dit voor deed- de afstand van verspringing willekeurig bleek te zijn en er via IE Developer Toolbar geen toegepaste margin-left of padding-left terug was te vinden. De beide CSS-waarden als 0px declareren bood ook geen uitkomst. Tijd voor een stapsgewijze debug-proces.CSS-regels begon ik regel voor regel opnieuw toe te voegen voor de betreffende delen, waarna ik alsnog geen reden voor het ongewenst resultaat kon vinden. Alhoewel de code valideerde, heb ik toch de broncode van de webpagina's vergeleken, daar waar de broodkruimelnavigatie ongewenst getoond werd en daar waar het juist getoond werd. Het verschil bleek een afsluitende paragraaf-element te zijn.
De waarde van semantiek
De broodkruimelnavigatie had ik in eenzelfde div-element geplaatst als de broodtekst zelf. Gevolg was, dat wanneer de broodtekst en broodkruimelnavigatie niet gescheiden was door een block-element, de broodkruimelnavigatie -enkel in Internet Explorer (minstens versie 7 en 8)- op dezelfde regelafstand verder ging als waar het laatste woord van de broodtekst geeindigd was, echter wel op de middelsposition: absolute; vastgestelde hoogte. De code valideerde dus wel, maar geheel netjes is het niet wanneer teksten niet in de juiste html-elementen genest zijn. In deze situatie was er bij enkele teksten een paragraaf(element) over het hoofd gezien, waardoor de tekst zich niet als block-element ging gedragen, maar default inline-waarde was, met het ongewenst resultaat als gevolg. In deze situatie geeft de aanwezigheid van semantiek zijn waarde weer eens aan.
2 reacties
- 01. op donderdag 17 december 2009 om 10:01 Gereageerd door Ronald (www.cowxl.nl)
- Ik gebruik het absoluut positioneren zo weinig mogelijk, omdat ik er al veel problemen mee heb gehad. Ik maak zelf vooral gebruik van margin, padding en het "floaten" van de elementen om de layout in elkaar te zetten. Voor mijn gevoel werkt dat én gemakkelijker en geeft het minder problemen met IE/verschillende browsers. Nadeel is wel dat het zover mogelijk bovenaan in de html plaatsen van de broodtekst daardoor verloren gaat. In de praktijk staat er echter maar weinig code boven de broodtekst, meestal een header en een menu en de code hiervan is tamelijk beperkt waardoor ik er geen probleem in zie.
Overigens zou je het UL element van de broodkruimels toch ook block element kunnen maken, het gaat om de LI's er binnenin die inline moeten zijn toch? - 02. op donderdag 17 december 2009 om 13:45 Gereageerd door Erwin (www.blue2blond.nl)
- Ik probeer inderdaad floating voorrang te geven op absoluut positioneren, ook omdat je andere elementen altijd nog relatief kunt positioneren t.o.v. de gefloate elementen.
Echter, er zijn soms situaties waarbij andere elementen niet afhankelijk hoeven te zijn van een element dat een vaste positie in het ontwerp heeft. Wanneer omliggende elementen al gefloat zijn, kan het absoluut positioneren een uitkomst bieden (bijvoorbeeld omdat nog meer gefloate elementen juist ook tot verschillende browser-resultaten kan leiden).
Overigens mag de hoofdnavigatie, volgens de 125 tellende webrichtlijnen, ook niet boven de broodtekst terug komen. Laat staan een breadcrumbnavigatie, die je voor het overzicht toch boven de broodtekst terug wilt laten komen.
Ik sluit me inderdaad bij je laatste stelling aan, De breadcrumbnavigatie zelf (ul) gedroeg zich dan ook reeds als block element. Bij een horizontale navigatie gebruik ik in de regel overigens float: left; voor de list-items ipv display: inline;
Reageren
Houd reacties relevant aan het onderwerp en wees redelijk en billijk naar anderen. Houd je bij het plaatsen van een reactie aan de Nederlandse wet.