✔ Abstand zwischen zwei DIV-Container im IE sichtbar im Firefox unsichtbar

[webix]

Guten Tag,

im IE wird ein Abstand zwischen zwei DIV-Containern angezeigt, wobei im Firefox dieser Abstand nicht vorhanden ist.

Ich möchte, dass die zwei DIV-Container im IE ohne Abstand angezeigt werden.

<div id="page_margins">
	
		<div id="header">
		
			<div id="logo">
			<img src="images/logo.gif" width="149" height="71" alt="logo">
			</div>
			
			<div id="faces">
			<img src="images/faces.gif" width="433" height="71" alt="faces">
			</div>

			<div id="loginbox">
			a
			</div>

		</div>

		<div id="menu">
		<img src="images/test.gif">
		</div>

		b

	</div>

body {margin: 0;padding: 0; background: #fff;}

#page_margins {
	width: 800px;
	min-width: 800px;
	max-width: 100 em;
	margin-left: auto;
	margin-right: auto;
}

#header {
	float: left;
}

#logo {
	float: left;
	width: 165px;
	text-align: center;
}

#faces {
	float: left;
}

#loginbox {
	float: left;
	width: 199px;
}

#menu {
margin-left: 0;
margin-right: 0;
border-left: 0;
border-right: 0;
}

 

[Maik]

Hi,

erweiter mal das Stylesheet mit der folgenden Regel, um die Lücke im IE zu schliessen:

img {
display:block;
}

 

[webix]

Vielen Dank!

Im IE wirds korrekt angezeigt, jedoch zeigt der Firefox jetzt die Leiste weit rechts außen.

 

[Maik]

Okay, dann differenzieren wir mal die Regel, und wenden sie nur auf die beiden Grafik-Elemente innerhalb der DIVs #logo und #faces an:

#logo img, #faces img {
display:block;
}

 

[darun307]

Hallo,

ich habe die Antworten hier gut brauchen können. Eine Frage habe ich noch: Wie ist es bei einer Flash-Datei, anstatt eines Bildes? Da funktionier es doch nicht über img, was nehme ich stattdessen?

Danke schon mal im Voraus.

 

[Maik]

Hi,

wenn du die empfohlene Regel auf eine Flash-Datei anwenden willst, lautet das Stylesheet:

object, embed { 
display:block; 
}

 

[darun307]

Hallo Maik,

herzlichen Dank, den Tipp habe ich gut brauchen können.

Jetzt habe ich gerade nur noch das gleiche Problem bei Grafiken, die Typo3 erzeugt. Kennst du dich damit auch aus?

Ich versuche es mal zu beschreiben:

Dies ist der Code in der CSS-Datei:

div#links { 
	float:left;
	width:180px;
	padding-bottom:10px;
	background-color:#F7F7F7;
	display:block;
	
}

Dies ist der Code in der HTML-Datei:

<div id="links">
			<div>
				###MENULINKS###
			</div>
      	
      </div>

Und hier noch der Code im Template:

MENULINKS = HMENU
	MENULINKS {
		
		special = directory
		special.value = 7	
		entryLevel = 1
		1 = GMENU
		1.NO = 1
		1.NO {
			XY = 180, 27
			backColor = #EDEDED
			
			# Text auf den Menüpunkt rendern
			10 = TEXT
			10.text.field = title
			10.fontColor = #6E0000
			10.fontFile = fileadmin/fonts/verdanaf
			10.fontSize = 12
			10.niceTEXT = 1
			10.offset = 28, 18
			
			# Die blaue Linie
			20 = IMAGE
			20.file = GIFBUILDER
			20.file {
				XY = 180, 1
				backColor = #2E2E2E
				
			}
			20.offset = 0, 26	
			
			# Rote Grafik im Menü
			30 = IMAGE
			30.file = GIFBUILDER
			30.file = fileadmin/images/nav_hintergrund.jpg
			30.offset = 0, 0
		}	
		
		# Rollovereffekt
		1.RO < .1.NO
		1.RO {
		30 = IMAGE
		30.file = GIFBUILDER
		30.file = fileadmin/images/nav_hintergrund_hover.jpg
		}
		
		# Aktiver Zustand	
		1.CUR < .1.RO	
		
		# Zweite Ebene im Menü
		2 < .1
		2.NO {
			10.fontSize = 11
			10.fontColor = #666666
			10.offset = 38, 18
			}
			
		2.RO < .2.NO
		2.RO {
		30.file = fileadmin/images/nav_hintergrund_hover.jpg
			}
			
		2.CUR < .2.RO
				
		
	}

Ich weiß nicht, ob die Infos reichen, aber vielleicht kann mir jemand helfen. Und zwra habe ich rechts neben den vom GIFBUILDER erzeugten Grafiken auch einen Abstand zum rechts daneben befindenen Inhalt. Und ebenfalls nur beim IE.
Typo3 Version: 4.1.2

Vielen Dank im Voraus.

 

[Maik]

Ich denke nicht, dass hier die Lücke zum benachbarten Element auf der rechten Seite durch die Grafik entsteht, sondern dass hier vermutlich der "3px-Gap-Bug" bei den floatenden Boxen in Erscheinung tritt.

Der in diesem Thread angesprochene Abstand zwischen zwei Elementen ergibt sich nämlich immer zum darunterliegenden Element.

Für genauere Hinweise, solltest du aber besser mal den Link zu deiner Seite nennen, damit man sich einen genaueren Überblick verschaffen kann.

 

[darun307]

Hallo Maik,

vielen herzlichen Dank. Das Stcihwort "3px-Gap-Bug" hat mir jetzt schon weiter geholfen, das Problem in den Griff zu bekommen. Du lagst genau richtig.