• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hilfe: IE Problem

H

horst

Neues Mitglied
Hallo Leute,

ich habe ein kleines Problem:

TEST

im Firefox sieht diese Testseite so aus wie es aussehen sollte,
wenn ich das ganze jedoch im IE teste, so wird die "middle" DIV leiter unterhalb der linken und rechten angezeigt...

Kann mir jemand behilflich sein ?

Würde mich um Hilfe sehr freuen...
 
also ich habe jetzt den Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

hinzugefügt.. aber es funktioniert immer noch nicht.. mhhh...
 
Es ist der 3px-Bug (IE5-IE6)

Nur für IE<7:
Code: 
* html #left {
margin-right: -3px;
}

* html #right {
margin-left: -3px;
}

* html #middle {
float: none;
}
 
Zuletzt bearbeitet:
hey cool, danke..

dass "Problem" ist jetzt nur noch, dass ein kleiner Zwischenraum zwischen den DIVs ist.. kann man das noch irgendwie beheben, oder geht das nicht anders ?
 
TEST

ich habe das mit dem margin-left: -3px; und margin-right: -3px; und das float:none; eingefügt...

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">


<title> TEST </title>
 <meta http-equiv="Content-Style-Type" content="text/css">



</style> 

</head>
<body>

<center>


<div style="width:805px; height:400px;">

<div style="width:805px; height:100px; background-color:#F0FF2F;">
 Header </div>

<div style="background-color:#FF0000; float:left; width:200px; height:400px; margin-right: -1px;">
 Left </div>

<div style="background-color:#00FFFF; float:right; width:200px; height:400px; margin-left: -1px;">
Right </div>
<div style="background-color:#00F00F; width:400px; height:400px; float:none;"> 
Middle </div>

<div style="background-color:#F0FF00; clear:both; width: 800px; height:50px;">
Bottom </div>

</div>

</center>
 </body>

 </html>
 
Was soll denn das im Kopfbereich darstellen?

Code: 
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">


<title> TEST </title>
 <meta http-equiv="Content-Style-Type" content="text/css">



</style> 

</head>

Die Seite wird doch schon als text/html ausgegeben. Die text/css-Angabe ist völlig überflüssig, ebenso wie der beendente style-Tag.
 
Die Korrekturen sind nur für den IE5-6 gedacht.
Nur diese haben den 3px-Bug.
Du hast width für das umschließende Element vergrößert.
In deinem Code steht -1px;

So sollte es aussehen:
Code: 
...
#left {
background-color:#FF0000;
 float:left;
 width:200px;
 height:400px;
}

#right {
background-color:#00FFFF;
float:right;
width:200px;
height:400px;
}

#middle {
float: left;
background-color:#00F00F;
width:400px;
height:400px;
}

* html #left {
margin-right: -3px;
}

* html #right {
margin-left: -3px;
}

* html #middle {
float: none;
}
</style>
...
<div style="width:800px; height:400px;">

<div style="height:100px; background-color:#FFFFFF;">
 Header
 </div>

<div id="left">
 Left
 </div>

<div id="right">
Right 
</div>

<div  id="middle"> 
Middle 
</div>

<div style="background-color:#F0FF00; clear:both; width: 800px; height:50px;">
Bottom 
</div>
</div>
...
* html selektor { } wird nur vom IE5-6 berücksichtigt (sternchenhack)

Besser du versteckst es zusätzlich in Conditional Comments
Conditional Comments
Verwende besser Klassen und id's anstelle der inline-styles.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben