✔ Probleme mit der Breite bei DIV - Layer

Status
Nicht offen für weitere Antworten.
Funjoy

Funjoy

Erfahrenes Mitglied
Hallo,

Ich habe ein Problem mit der Breite von meinen DIV- Layer im FireFox wird er zu Breit angezeigt und im IE genau so wie ich will. In meiner style.css datei habe ich das so geschrieben.

Code: 
/* Angaben für die Mitte */
#middle {
	position:absolute; 
	left:5px; 
	top:110px; 
	width:905px; 
	height:auto;
	background-color:#f5f5f5; 
	background-image:url(image/fuechse06_20.gif); 
	background-position:right; 
	background-repeat:repeat-y; 
	padding-left:195px; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	z-index:1;
}

beim IE funktioniert es mach ich aber die Breite also width auf den Wert 710px ist es im FireFox passend und im IE zu wenig! :rolleyes:
Kann das daran liegen das ich noch ein DIV- Layer für das Menü im andern DIV- Layer geschrieben habe?

Für das Menü habe ich das so geschrieben:

Code: 
/* Menü Deklaration */
#menue {
	position:absolute;
	left:5px;
	top:15px;
	bottom:15px;
	border-right: 1px dashed #FF0000;
	width:180px;
	height:auto;
	z-index:2;
}

und in Html habe ich das ganze so eingefügt:
Code: 
<div id="middle">
<div id="menue">
Menue...
</div>

<!-- FOOTER & COPYRIGHT -->
<div id="footer00"><div id="footer01"></div><div id="footer02"></div><div id="footer03"></div></div>
<div id="copyright"><br /><br />Copyright 2006 by TSV Marzahner F&uuml;chse e.V. (Abteilung: Tischtennis)</div>
<!-- FOOTER & COPYRIGHT  [ENDE] -->
</div>

hoffe einer hat ne Ahnung wie ich das für beide Browser passend hinbekom ohne Tabellen zu verwenden!

MfG Funjoy

Ps: Habe mal zwei screen angehangen zum verdeutlichen.
 

Anhänge

  • screen_firefox.gif
    screen_firefox.gif
    45,3 KB · Aufrufe: 67
  • screen_ie.gif
    screen_ie.gif
    54,3 KB · Aufrufe: 59
Die Breitendifferenz ergibt sich aus der CSS-Eigenschaft padding-left:195px, die nach dem Boxmodell zur Element-Breite width:905px addiert wird, und zum anderen aus einer falschen oder fehlenden Dokumenttyp-Deklaration für die Seite, was den IE in den sog. Quirksmodus versetzt und das Boxmodell falsch interpretieren lässt.

Folglich wird die DIV-Box im FireFox mit 1100px richtig und im IE (6.0) mit 905px falsch dargestellt.

Lösung:

  • Doctype wechseln bzw. hinzufügen, damit IE (6.0) im Standardmodus läuft:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

</head>
<body>

</body>
</html>
  • Wie du festgestellt und angemerkt hast, zeigt FireFox die gewünschte Breite von 905px an, wenn du width:710px bestimmst.

    Auflösung -> 710px (Breite) + 195px (linker Innenabstand) = 905px (tatsächliche Breite) ;)
 
Hallo Danke für die Antwort aber ich arbeite mit XHTML und habe folgenden Doctype:

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TSV Marzahner Füchse e.V. - News</title>
<link rel="STYLESHEET" href="{$style_pfad}" type="text/css" />
</head>
<body>
</body>
</html>

Gibs da auch eine Lösung weill auf XHTML wollte ich eigentlich nicht verzichten?!

MfG Funjoy
 
Dann habe ich ja wieder das Problem das der IE das im Quirksmodus versetzt wird und die CSS darstellung fehlschlägt! Gibs da ne Lösung?

MFG Funjoy
 
Wenn du auf die XML-Deklaration nicht verzichten kannst, lässt sich mit Hilfe des Star-HTML-Hacks eine Fehlerkorrektur für den IE vornehmen:

Code: 
#middle { /* Für non-IE Browsers */
	position:absolute; 
	left:5px; 
	top:110px; 
	width:710px; 
	height:auto;
	background-color:#f5f5f5; 
	background-image:url(image/fuechse06_20.gif); 
	background-position:right; 
	background-repeat:repeat-y; 
	padding-left:195px; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
	z-index:1;
}

* html #middle { /* Für IE */
         width:905px; 
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück