Darstellungsproblem mit Div - Internet Explorer gegen Firefox - kein float um Menu @ tutorials.de: Tutorials, Forum & Hilfe

Pinky · 06.10.07 22:28

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-Code:

<? 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-Code:

<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

Maik · 06.10.07 23:08

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 :

1	#menu { width:220px; padding-top:100px; float:left; clear:[color=red]auto[/color]; }

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.

Pinky · 06.10.07 23:45

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

Maik · 07.10.07 00:32

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;
}

Pinky · 07.10.07 08:10

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

Maik · 07.10.07 08:21

Hi,

mit meinem vorgestellten CSS-Code springt bei mir das DIV #inhalt nicht unter das Menü.

Pinky · 07.10.07 19:41

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

Maik · 07.10.07 19:43

Zitat von Pinky

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!

Code :

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

Der Wert "auto" gilt dem linken und rechten Außenabstand der Box, und sorgt für ihre horizontale Zentrierung.

Pinky · 07.10.07 20:36

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

nullnullsix · 08.10.07 17:30

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

Maik · 08.10.07 17:39

Zitat von nullnullsix

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;
}

@nullnullsix: Und beim nächsten Mal das p für padding-bottom nicht vergessen.

nullnullsix · 09.10.07 11:38

hab ich ja ned selber geschrieben sondern von pinky reinkopiert!

und da wird mir wohl ein kleines padding-p abhanden gekommen sein!

Maik · 09.10.07 12:31

Zitat von nullnullsix

hab ich ja ned selber geschrieben sondern von pinky reinkopiert!

und da wird mir wohl ein kleines padding-p abhanden gekommen sein!

Vermutlich beim Setzen der Zeilenumbrüche, denn in Pinkys Stylesheet fehlt der Buchstabe nicht.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Darstellungsproblem im Internet Explorer, background-image

Firefox und Internet Explorer

<p> Firefox ---> Internet Explorer

Zuviele neue Zeilen bei float im Internet Explorer

Internet Explorer vs. Firefox

E-Mail:

Abonnieren Abbestellen