Padding in IE+FF (Heeft eerst wel gewerkt)

[anoniem]

Beste mensen, ik was bezig met een website voor een vriend, alles leek continu goed te gaan na elke check (ik check FF + IE continu na elke verandering) En opeens na een volgende check, is de padding van mijn topbar tot me header veranderd. In firefox geeft hij 7px's teveel weer, in IE geeft hij het goed weer. Nu kan ik deze 7px's padding weghalen in me topbar, maar dan staat de tekst niet meer gecentreerd, maar is het probleem in FF wel weg, maar dus niet de bedoeling, omdat het eerst wel gewoon heeft gewerkt. Hieronder een jpg waarin het hopelijk duidelijk wordt: [img:ff8bc70b80]http://img209.imageshack.us/img209/2577/foutuw8.jpg[/img:ff8bc70b80] dit is de CSS source: [code:1:ff8bc70b80]/* No body margins */ *{ padding:0; margin:0; } /* Link Markup */ A { text-decoration:none } A { color: #FFFFFF; } A:hover { color: #ccdfff; } /* 100% height command for html, body */ html, body { height: 100%; font-family: verdana; font-size: 10px; background-image: url(images/bckptrn.jpg); background-repeat: repeat; } /*The full website container */ #container { width: 900px; height: auto; height: 100%; position: relative; min-height: 100%; float: center; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border-left: 1px solid #424446; border-right: 1px solid #424446; background-color: #fafafa; } /*Topbar markup */ #topbar{ width: 900px; height: 28px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; background-image: url(images/topbar.jpg); background-repeat: no-repeat; padding-left: 8px; padding-top: 7px; } /*The header CSS Code */ #header{ width: 900px; height: 137px; } /*Content space one */ #content { width: 900px; height: 200px; text-align: left; background-color: #e2e5e7; border-bottom: 1px dashed #a9b5bd; } [/code:1:ff8bc70b80] als volgt geplaatst als in deze source: [code:1:ff8bc70b80]<div id="container"> <div class="txtTopbar" id="topbar">&raquo; <a href="index.html">home</a> &raquo; <a href="contact.html">contact</a> &raquo; routeplanner</div> <div id="header"><embed src="images/header.swf" width="900" height="137" quality="high"></embed></div> <div id="content"></div> [/code:1:ff8bc70b80] Ik hoop dat iemand me hiermee kan helpen, het vreemde is dus dat het gewoon heeft gewerkt (in beide browsers), maar opeens (na het toevoegen van de content div niet meer) Alvast bedankt

[anoniem]

update: ik zou het kunnen oplossen door: height: 28px; (voor IE) * height 21px; (voor Firefox) maar het lijkt me niet de beste oplossing, lijkt me dat hier ook wel nadelen aanzitten m.b.t. nieuwere versies etc etc.. Overigens heb ik bij alles wat ik een padding wil meegeven, dat hij het in firefox vergroot, en in IE gewoon juist weergeeft.. Ik heb overigens (zoals te zien is) wel al *{ padding:0; margin:0; } aangegeven in mijn css Nu las ik net dat het wel een bekend probleem is dat firefox met paddings dingen vergroot, en niet gewoon netjes doet.. Dus als iemand daar een oplossing voor heeft (ik zelf nog niet gevonden)

[anoniem]

Hm nee, juist IE doet het niet netjes. Paddings worden normaliter gewoon opgeteld bij de afmetingen van een element, zoals in het boxmodel wordt beschreven, zie bijv. een Google search naar [url=http://www.google.nl/search?hl=nl&q=box+model+%22internet+explorer%22]box model "internet explorer"[/url]. Wat voor doctype gebruik je? [url=http://hsivonen.iki.fi/doctype/]De rendering hangt daar vanaf[/url], of het quirks of standards mode wordt (en dus hoe met o.a. paddings wordt omgegaan). Het kan zijn dat je in content bijv. een heading met een top-padding staat, waardoor je #content naar beneden wordt geduwd (dat kan verklaren waardoor het eerst wel goed ging en nu niet meer). Handigst is een online voorbeeld... Met hacks zou ik niet werken (zoals met *). Probeer het in FF goed te krijgen en zet regels om het voor IE goed te krijgen in [url=http://www.quirksmode.org/css/condcom.html]conditional comments[/url], dat voorkomt problemen. Ook van álles de margin en padding op 0 zetten, is overdreven. Evt. kun je werken met een [url=http://kurafire.net/log/archive/2005/07/26/starting-css-revisited]alternatief[/url].

[anoniem]

Zoals boelieboelie eigenlijk ook al aangeeft kan je het beste kiezen voor een goede doctype waardoor IE in standards mode zal renderen. Het gebruik van CSS-hacks is m.i. altijd onverstandig omdat je ze nooit op alle browsers kan testen, maar belangrijker nog: wat als de "fouten" waar de hack op is gebaseerd worden gemaakt? Je kan met geen mogelijkheid de werking van de hack in toekomstige versies van browsers voorspellen, hoe graag je dat ook zou willen. Kies gewoon nu al voor de standards compliance mode, daar heb je nu en later het meest aan. - Bas