kostenloser Webspace werbefrei: lima-city


CSS Abstand im IE falsch

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    wegreise

    wegreise hat kostenlosen Webspace.

    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

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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.
  4. h******g

    Arbeitest du im standardkonformen Modus, also mit doctype-Deklaration?

    Beitrag zuletzt geändert: 8.8.2012 20:55:04 von hm4-blog
  5. n******t

    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
  6. Autor dieses Themas

    wegreise

    wegreise hat kostenlosen Webspace.

    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 &nbsp; 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 ?
  7. Pack einfach mal den Doctype rein. Mit <!DOCTYPE html> kann sogar IE7 das normal rendern.
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!