✔ Div Abstände in IE falsch (sowohl 6 als auch 7) -> In Firefox keine

T

Thom-

Grünschnabel
Hallo zusammen,

ich verzweifel hier schon ein wenig.
Ich habe früher viel mit CSS gemacht und heute ist mir ein uraltes Layout zwischen die Finger gerutscht, in welches ich einen Teil in CSS realisieren muss.

Im Endeffekt ist es etwas sehr simples.
Ein Menü (3 Spalten) soll oben angezeigt werden.

Ich habe folgenden Code (ja ich weiß, CSS in eigene File usw. aber in diesem einen Fall muss das im HTML Code selber geschehen)

Code: 
	<div style='float:left;background-image:url(skins/main/images/1_1.jpg);width:324px;height:50px;text-align:right'>
		<div style='padding-right:20px;width:auto;'>
			Username<br />MEIN USERNAME
		</div>
	</div>	
	<div style='float:right;background-image:url(skins/main/images/1_3.jpg);height:50px;width:73px'>&nbsp;</div>
	<div style='background-image:url(skins/main/images/1_2.jpg);width:100%;text-align:right;height:50px;'>
KNUBBELKEKS
	</div>

Im Endeffekt eine ganz simple Sache. Sieht im Firefox auch wunderbar aus (Anlage 1), alle IE zicken jedoch rum.
Ich erhalte mysteriöse Abstände, die ich nicht rausfiltern kann.
Habe schon mit Margin und Co. rumgespielt, aber ich bekomm das beim IE einfach nicht weg. (Anlage 2)

Bei meinen Suchen im Internet habe ich zwar den 3px Gap Bug gefunden, aber der tritt normalerweise nur im IE6 (bzw. kleiner als IE6) auf und die vorgeschlagene Lösung funktioniert bei mir ohnehin nicht.

Vielleicht kann mir jemand hier helfen, bevor ich die Tischkante komplett auffresse.

Gruß
-Thom
 

Anhänge

  • anlage1.jpg
    anlage1.jpg
    24,4 KB · Aufrufe: 18
  • anlage2.jpg
    anlage2.jpg
    25,1 KB · Aufrufe: 13
Hi,

hier tritt im IE6 tatsächlich der "3px-Gap-Bug" in Erscheinung, der sich wie folgt beheben lässt:
Code: 
<div style='float:left;background: url(skins/main/images/1_1.jpg);width:324px;height:50px;text-align:right;margin-right:0 !important;margin-right:-3px;'>
                <div style='padding-right:20px;width:auto;'>
                        Username<br />MEIN USERNAME
                </div>
        </div>
        <div style='float:right;background: url(skins/main/images/1_3.jpg);height:50px;width:73px;margin-left:0 !important;margin-left:-3px;'>&nbsp;</div>
        <div style='background: url(skins/main/images/1_2.jpg);text-align:right;height:50px;margin:0 73px 0 324px !important;margin:0 70px 0 321px !important;'>
KNUBBELKEKS
        </div>


Die width:100%-Deklaration für den mittleren Spaltenblock entfällt gänzlich.

Wenn das HTML-Dokument im standardkonformen Modus übergeben wird, taucht der Bug im IE7 überhaupt nicht auf, ansonsten verhält er sich im "Quirksmode" wie sein Vorgänger.

mfg Maik
 
Uff, funktioniert ja wunderbar.
Habe irgendwie eine falsche Lösung für das Problem verwendet... vielen Dank!

Kann es sein, dass das Problem bei folgendem Code ebenfalls am "Quirks" Modus des IE7 liegt?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <style type="text/css" media="screen">
 
	  
	  
	  /*###################*/
	  /* Beginn Navigation */
	  /*###################*/
 
	  #navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */
 
		#navi li { width:128px; float:left; } /* Horizontale Anordnung */
		
		#navi li ul { display:none; } /* Normalzustand eingeklappt */
		#navi li:hover ul { display:block; } /* Ausgeklappt */
		
      /*###################*/
	  /* Styles fuers Auge */
	  /*###################*/
	  
	  #navcontainer { height:16px; position:relative; }
	  
	  #navi { position:absolute; }
	  
	  #navi li { border:1px solid #000; margin:0 32px 0 0; }
	    #navi ul li { border:none; margin:0; }
		
	  #navi a { font-weight:bold; text-align:center; display:block; padding:0.1em; }
	  #navi a:link, #navi a:visited { color:#FFF; background:#A8CFF0; text-decoration:underline; }
	  #navi a:active, #navi a:hover { color:#000; background:#FFF; text-decoration:none; }
	  
    </style>

<div id="navcontainer">
<ul id="navi">
  <li><a href="#">Willkommen</a></li>
  <li><a href="#">&Uuml;ber uns</a>
    <ul>
      <li><a href="#">Angebot</a></li>
	  <li><a href="#">Geschichte</a></li>
	  <li><a href="#">Jobs</a></li>
    </ul>
  </li>
  <li><a href="#">Projekte</a>
    <ul>
      <li><a href="#">Alpha</a></li>
	  <li><a href="#">Beta</a></li>
	  <li><a href="#">Gamma</a></li>
    </ul>
  </li>
  <li><a href="#">Impressum</a></li>
</ul>

Eine stinknormale CSS Dropdown Navigation.

Wenn ich den oberen doctype weglasse, spinnt mir der IE7 rum. Er zeigt dann keine hover Effekte auf die UL Elemente an.
Das Problem ist, dass ich diesen Code in eine bestehende Intranet Seite einbauen muss, welche absolut nicht mit dem strict Mode mitspielt.
Gibt es da auch irgendeine Lösung?

Gruß
-Thom
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück