✔ Darstellungsproblem mit Div - Internet Explorer gegen Firefox - kein float um Menu

Status
Nicht offen für weitere Antworten.
P

Pinky

Erfahrenes Mitglied
Hallo liebe Leute

Seit längerem stehe ich wieder mal vor einem Explorer/Firefox- Darstellungsproblem. Im Firefox erscheint die Page zu meiner Zufriedenheit (was sont...:))!

Schaue ich die Page nun im IE an, so sieht das Layout ganz anders aus. Gerne möchte ich wissen, wieso das es so ist.

Ihr könnt euch den Unterschied gerne selber anschauen. Als Anhang habe ich drei Bilder hochgeladen. Das hinterste Bild zeigt, wie es im Firefox aussieht und wie ich es auch im IE gerne hätte.

Das erste Bild im Anhang zeigt die Page im IE, wenn das Browserfenster maximiert ist. Man beachte, dass der Text in der Mitte steht. Das möchte ich nicht, der soll mit einer kleinen Lücke zum Menu stehen.

Zu gut der letzt zeigt das mittlere Bild die Situation, wenn das IE- Browserfenster verkleinert wird. Hier ist ersichtlich, dass der Text unter das Menu rutscht. Das möchte ich ebenfalls vermeiden.

Ich hoffe ihr könnt mir helfen...!


Gerne Poste ich mal meine Codes.

index.php lautet wie folgt:
HTML: 
<? include 'browser.php'; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Danke für die Hilfe</title>
<link href="style_ie.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header"></div>
<div id="box">
<div id="menu"><? include 'layout/menu/menu.php'; ?></div>
<div id="inhalt"><? include 'include.php'; ?></div>
</div>
<div id="footer"></div>
</body>
</html>

Und noch das CSS- File:
Code: 
* { padding:0; margin:0; border:0; }
html, body { height: 100%; /* wichtig */ font:12px "Trebuchet MS", Verdana, Arial, sans-serif; color:#7a7a7a; background:white; text-align:left; }
#header { height:90px; position:fixed; top:0px; padding:10px; width:100%; background-image: url(layout/bg/top.gif); }
p { margin: 0; padding-top: 20px; }
#box { width:100%; margin:0 auto; text-align:left; position: relative; min-height: 100%; height:auto !important;/* moderne Browser */ height:100%; /* IE */ }
#inhalt { font-size:15px; width:700px; padding-left:320px; line-height: 30px; padding-bottom:100px;}
#footer { position:fixed; bottom:0px; text-align:left; padding:10px; width:100%; background-image: url(layout/bg/bottom.gif); }

h1 { font-size:30px; color:#388bbb; padding-bottom:25px; padding-top:50px; }
h2 { font-size:20px; color:#7a7a7a; padding-bottom:25px; padding-top:50px; }

#menu { width:220px; padding-top:100px; float:left; clear:auto; }
a.menu { text-decoration:none; margin-left:20px; border-bottom:1px dashed silver; width:230px; display:block; background: url(layout/menu/arrow.gif) left no-repeat; font-size:22px; text-align:right; color:orange; line-height:1.2cm; }
a.menu:hover { text-decoration:none; margin-left:20px; border-bottom:1px dashed silver; width:230px; display:block; background: url(layout/menu/arrow_hover.gif) left no-repeat; font-size:22px; text-align:right; color:#388bbb; line-height:1.2cm; }

Fals ihr noch das menu.php braucht:
HTML: 
<a href="#" class="menu"><div>Menu 1</div></a>
<a href="#" class="menu"><div>Menu 2</div></a>
<a href="#" class="menu"><div>Menu 3</div></a>
<a href="#" class="menu"><div>Menu 3</div></a>
<a href="#" class="menu"><div>Menu 4</div></a>


Vielen Dank & Gruss
Pinky
 

Anhänge

  • page_ie.jpg
    page_ie.jpg
    37,1 KB · Aufrufe: 1.484
  • page_ie_klein.jpg
    page_ie_klein.jpg
    70,2 KB · Aufrufe: 1.514
  • page_mf.jpg
    page_mf.jpg
    34,2 KB · Aufrufe: 1.238
Zuletzt bearbeitet:
Hi,

versuch es mal ohne die Breitenangabe für das DIV #inhalt.

Mir ist aufgefallen, dass die Breitenangabe (230px) und der linke Außenabstand (20px) für die Links widersprüchlich zur Breite des umschliessenden DIVs #menu (220px) ist.

Code: 
#menu { width:220px; padding-top:100px; float:left; clear:auto; }
Zum Vergrößern anklicken....
Den Wert "auto" für die clear-Eigenschaft gibt es überhaupt nicht, sondern:
  • none
  • left
  • right
  • both
  • inherit
Und zu guter letzt: ein Inline-Element (= a) darf kein Block-Element (= div) enthalten.
 
Hallo Maik

vielen Dank für die prompte Antworte. Es klappt auch so weit. Nur hats noch einen klienen Schönheitsfehler. Ich möchte den Inhalt auf 700px maximieren, da ich nicht will, dass der Text bis an den rechten Bildrand fliesst.

Wenn ich im CSS dem #inhalt jedoch eine Breite zuordne, wie ich es oben gemacht habe, so springt mir der Text unter das Menu, wenn ich das Browserfenster verkleinere. Steht keine Breite drin, so springt au der Text nicht.

Wie kann ich dieses Problem umegehen? Der Text nur 700px breit, jedoch nicht unter das Menu springend?

Vielen Dank & gute Nacht
Pinky
 
Richte für das übergeordnete DIV #box eine entsprechende fixe Breite ein.

Beispiel:

Code: 
#box {
width:960px;
margin:0 auto;
text-align:left;
position:relative;
min-height:100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
}

#menu {
width:250px;
padding-top:100px;
float:left;
}

#inhalt {
margin-left:260px;
padding-bottom:100px;
font-size:15px;
background:#eee;
}
 
Darstellungsproblem mit Div - Internet Explorer gegen Firefox - kein float um Men

Guten Morgen

Funktioniert leider auch nicht. Sobald ich eine Grössenangabe eingebe, so springt der Text unter das Menu...! Sehr komisch. Könnte ich evt. ein leeres Div rechts vom Inhalt einfügen, und den Abstand (vom Text zum rechten Bildrand) so "künstlich" erzeugen?

Oder kennt ihr noch bessere Lösungen?

Danke und Gruss
Pinky
 
Hi,

mit meinem vorgestellten CSS-Code springt bei mir das DIV #inhalt nicht unter das Menü.
 
Oh, ja stimmt... Hatte nur kurz zeit und habe nicht alles kopiert. Sorry.

Wenn ich das broswerfenster nun aber ganz gross mache, so ist der Text in der Mitte... wenn der jetze noch nach links kommen könnte, so wäre ich überaus glücklich!

Danke viel mals für die Arbeit und noch einen schönen Sonntagabend!

Gruss
Pinky
 
Pinky hat gesagt.:
Wenn ich das broswerfenster nun aber ganz gross mache, so ist der Text in der Mitte... wenn der jetze noch nach links kommen könnte, so wäre ich überaus glücklich!
Zum Vergrößern anklicken....
Code: 
#box {
width:960px;
margin:0 auto; 
text-align:left;
position:relative;
min-height:100%;
height:auto !important;/* moderne Browser */
height:100%; /* IE */
}
Zum Vergrößern anklicken....
Der Wert "auto" gilt dem linken und rechten Außenabstand der Box, und sorgt für ihre horizontale Zentrierung.
 
Hallo Maik

Bingo, genau das habe ich noch gesucht. Dank dir von ganzem Herzen, dass du mir immer so schnell geholfen hast. Habt mir viel Haare und Nerven gekostet :)!

Vielen Dank & einen schönen Rest vom Sonntag.
Pinky
 
und nur so am rande, würd ich dir empfehlen dein css anders hinzuschreiben, etwa so:

#inhalt {
font-size:15px;
width:700px;
padding-left:320px;
line-height: 30px;
adding-bottom:100px;
}

is einfach übersichtlicher, und man findet sich besser zurecht!
mit vielen grüßen cornelius
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück