anoniem Geplaatst: 19 september 2004 Delen Geplaatst: 19 september 2004 Ik begin een beetje wanhopig te worden. Ik ben bezig met een nieuwe html pagina, maar ik krijg mijn layout maar niet in orde. Ik doe alles met divjes, die d.m.v. het ID element een style meekrijgen, waarin o.a. de positie is geregeld. (Divjes worden anders standaard onder elkaar gezet, en ik wil juist kolommen) Nu test ik mijn maaksels in eerste instantie in zowel IE6 als Firefox 0.9, maar beiden geven een ander resultaat. Na enig onderzoek, ben ik er achter gekomen dat Firefox de opgegeven formaten eenvoudigweg te ruim neemt. Zo had ik een kolom (div) van 200px breed. Explorer gaf het keurig netjes weer, zoals de bedoeling was. Firefox overlapte de naastgelegen kolom, en bleek de 200px naar 214 px te hebben vergroot. Ook de hoogte van 30px werd door Firefox verhoogt naar 35px. Toch moet het mogelijk zijn om dit te verhelpen, want ik ken genoeg pagina´s die op dezelfde manier werken, en die dit probleem niet hebben. In het verleden heb ik wel eens dergelijke problemen verholpen door alle marges een vaste waarde te geven, omdat sommige browsers de default anders interpreteren, maar dat mag in dit geval niet helpen. Alle marges op 0, in zowel body als style, maakt geen enkel verschil. Hier een klein voorbeeldje van een van mijn style regels: [code:1:b34e6160a1] #leftcolumn { background-color: #FFFF99; border: 2px solid #FFCC00; width: 200px; height: 30px; margin: 0px; padding: 5px; position: absolute; left: 5px; top: 110px; } [/code:1:b34e6160a1] Quote Link naar reactie
anoniem Geplaatst: 19 september 2004 Auteur Delen Geplaatst: 19 september 2004 Helaas doet firefox het wel goed. De manier om de breedte te bepalen is volgens het w3c, die de standaard voorschrijven, id dat bij 'width' geen rekening wordt gehouden met padding, margin of de border. Deze moeten dus allemaal bij elkaar opgeteld worden voor de totale breedte. Bij jou betekent dat 200px + 2 * 5px + 2 * 2px. Ik noem dat helaas, omdat het eigenlijk behoorlijk onhandig en onlogisch is. Bijvoorbeeld bij de code: [code:1:627adfb251]#eenid { width:100%; padding: 2px; }[/code:1:627adfb251] gaat het al helemaal mis. Je krijgt dan altijd een horizontale scrollbalk te zien, want de breedte is 100% + 4px :-? Maar het is dus wel de manier hoe het 'hoort'. Microsoft denkt er (natuurlijk) anders over en heeft zijn eigen model. En in dit geval geef ik ze groot gelijk, want het is veel logischer. Er bestaan wel fixes voor deze situatie, want natuurlijk hebben meer mensen hier mee te maken, maar ze gebruiken of javascript: bijv. http://archivist.incutio.com/viewlist/css-discuss/13533 of maken gebruik van browserbugs bijv. http://glish.com/css/hacks.asp Naar mijn mening een erg smerige oplossing, maar we zullen het er maar mee moeten doen tot het w3c het probleem onderkent en zo slim is om een innerwidth en een outherwidth property aan css toe te voegen. (innerwidth = zonder margin padding of border, outerwidth is alles erbij) zoek voor meer of ander oplossingen met google naar 'box model fix' Quote Link naar reactie
anoniem Geplaatst: 19 september 2004 Auteur Delen Geplaatst: 19 september 2004 Tnx! Hier kan ik zeker wat meer. Zo zie je maar, je bent nooit te oud om wat te leren :D Overigens, ik vond het inderdaad al zo vreemd te constateren dat IE het "goed" deed en Firefox "fout" omdat ik het eigenlijk andersom gewend was. Quote Link naar reactie
anoniem Geplaatst: 19 september 2004 Auteur Delen Geplaatst: 19 september 2004 Het W3C heeft 'box-sizing' ('-moz-box-sizing' in Mozilla) geintroduceerd (css3-ui) om dit probleem te verhelpen. Eventueel zal de css3-values module een 'calc()' value introduceren die als volgt gebruikt kan worden:[code:1:c517f8b00e]element{ calc(100%-2px); }[/code:1:c517f8b00e]Momenteel kun je die uiteraard niet gebruiken, maar 'box-sizing' heeft ondersteuning. (Zet IE in quirks mode en je kunt er rustig gebruik van maken.) Quote Link naar reactie
anoniem Geplaatst: 19 september 2004 Auteur Delen Geplaatst: 19 september 2004 -moz-box-sizing die kende ik nog niet, bedankt! Quote Link naar reactie
anoniem Geplaatst: 26 september 2004 Auteur Delen Geplaatst: 26 september 2004 Wat je ook kunt doen, als je gebruik maakt van XHTML, is IE in quirks mode te forceren: [code:1:7400ceb271]<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> [/code:1:7400ceb271] (als je die eerste regel weglaat komt IE in 'standaard-mode', voor zover je daar bij IE van kunt spreken). Vervolgens is de CSS2 selector 'truc' van [url=http://glish.com/css/hacks.asp]glish.com[/url] wèl gewoon bruikbaar voor IE6: [code:1:7400ceb271]#wrapper { width: 83.5%; /* box rules for quirks mode browsers */ } html>body #wrapper { width: 80%; /* = desired width in standards-compliant browsers */ } [/code:1:7400ceb271] Persoonlijk vind ik dit wat eleganter dan gebruik te maken van de voice-family hack, en het ondersteunen van IE's quirks mode was sowieso al nodig i.v.m. IE 5.5 (en in mindere mate IE 5.01). Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen