CSS Abstand im IE falsch
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausprobieren
boxen
browser
code
deklaration
empfehlenswert pack
foto
http
leeren balken
modell
modus
paar
probier
setzen
standard
text
umgebende box
url
version
vorschau
-
Hallo
ich habe einige DIVs verschachtelt, die z.T. nebenenander angezeigt werden sollen (mit float)
im FF sieht alles gut aus, aber im IE stimmen die Abstände nicht ...
komisch ist auch, das sich die Abstände im IE anders verhalten,
je nachdem ob ich im DIV einen Text stehen habe oder nichts
Vorschau als Bild: http://img5.fotos-hochladen.net/uploads/abstandffie6p9yabgvk7.jpg
CSS
<style type="text/css"> <!-- * { margin:0; padding:0; } body { background:#EFEFEF; color:#000000; padding:8px; } #zbox { height:20px; line-height:20px; width:450px; margin:0px; padding:4px; background:#AAAAAA; border:none; } #xbalken { height:14px; line-height:14px; width:400px; margin:3px 0px 0px 0px; padding:0px; background:#FF0000; float:left; border:none; } #zbalken { height:12px; line-height:12px; width:400px; margin:0px 0px 0px 0px; padding:0px; background:#33FF33; border:solid 1px #FF0000; } #dwcount { height:18px; line-height:18px; width:40px; margin:0px; padding:0px; text-align:center; background:#FFFFFF; float:right; border:none; } --> </style>
HTML ... ohne Text in DIVs
<div id="zbox"> <div id="xbalken"> <div id="zbalken"></div> </div> <div id="dwcount"></div> </div>
HTML ... mit Text in DIVs
<div id="zbox"> <div id="xbalken"> <div id="zbalken"> + + + + + </div> </div> <div id="dwcount">123</div> </div>
was kann ich (im CSS) machen, damit es im IE genauso aussieht wie im FF ???
HELP
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenn du in den leeren Balken ein geschützes Leerzeichen reinbaust hast du zumindest schonmal die gleiche Höhe.
Die unterschiedliche Größe entsteht dadurch, dass der IE das Box-Modell nicht so nimmt wie der Standard es eigentlich verlangt.
Normalerweise ist die gesamte Breite eines Elements width + border + padding, das machen auch alle anderen Browser so. Der IE allerdings nimmt width als tatsächliche Breite und verlagert somit border und padding nach innen.
Bei IE9 reicht es, wenn du <!DOCTYPE html> einbaust. Bei älteren Versionen bezweifel ich aber, dass das funktioniert.
Alternativ kannst du auch folgendes ins CSS einfügen:
* { -moz-box-sizing: border-box; box-sizing: border-box; }
Dann sollten sich alle Browser so wie IE verhalten was die Größenberechnung angeht. -
Arbeitest du im standardkonformen Modus, also mit doctype-Deklaration?
Beitrag zuletzt geändert: 8.8.2012 20:55:04 von hm4-blog -
Ich kann deswp nur zustimmen und damit du dir darunter vllt. noch besser was vorstellen kannst, hier noch ein paar Links dazu:
Wikipedia
about.com
Ich denke außerdem noch, dass wenn Text drinnen steht, dieser mit der line-height von 20px größer ist als die umgebende Box selbst und dieser Text dir das Layout verschiebt. Probier da einfach ein bisschen herum (mit den Developer Tools von Chrome oder Firefox).
MfG
Dominic -
deswp schrieb:
Wenn du in den leeren Balken ein geschützes Leerzeichen reinbaust hast du zumindest schonmal die gleiche Höhe.
habe ich ausprobiert, mit geschützes Leerzeichen, aber IE hat das quasi ignoriert
im IE sieht es (bei mir) mit geschützem Leerzeichen genauso aus wie ganz ohne Zeichen
habe auch schon probiert alle padding auf 0 (Null) zu setzen,
aber Abstände bleiben "falsch" ...
einen DOCTYPE habe ich bisher nicht angegeben, das werde ich mal ausprobieren,
aber nicht jeder der mit IE surft hat den IE9 ....
werde wohl noch damit "rumspielen" müssen,
habe auch schon an Browser-Weiche gedacht, wenn IE anderes CSS, aber ist das empfehlenswert ?
-
Pack einfach mal den Doctype rein. Mit <!DOCTYPE html> kann sogar IE7 das normal rendern.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
