✔ Abstand einder Box in Opera und IE zu groß

Comenius · 17. Oktober 2005

Hallo,

Mein Layout besteht aus dem LOGO, gefolgt von KOPF und Mittelteil welcher von einem RAHMEN umgeben ist und LINKS und RECHTS ein Navigationsmenü hat, darunter kommt noch der FUSS.

Im Moment hänge ich am linken Navimenü fest.
Ich habe eine Box mit float:left an die linke Seite gebracht und ihr padding:5px; gegeben, damit der Inhalt der Navibox etwas vom Rand abgehoben erscheint.

Fülle ich diese Box nun mit etwas (egal was) bekomme ich beim Opera und IE einen größeren Abstand nach unten (FF oder NS eigen es "richtig" an).

Hier der Code:

Code:

#LOGO{ 
padding:                       5px;
width:                       975px; 
border-bottom:   1px solid #8394B2; 
background-color:          #EEF2F7; 
}

#RAND{ 
width:                       985px; 
border:          1px solid #8394B2; 
background-color:          #EEF2F7; 
}

#KOPF{
padding:                       2px;
padding-left:                  5px;
padding-right:                 5px;
width:                       975px; 
border-bottom:   1px solid #8394B2; 
background-color:          #D1DCEB;
}

#LINKS{ 
padding:5px;
border:            0px solid black;
float:                        left;
}

#MITTE{
border:            0px solid black; 
margin-top:                   10px;
margin-left:                 172px;
margin-right:                173px;
margin-bottom:                10px;
}

#RECHTS{
padding:                      10px;
padding-right:                12px;
width:                       150px; 
border:            0px solid black; 
float:                       right;
}

#FUSS{
padding:                       2px;
padding-left:                  5px;
padding-right:                 5px;
width:                       975px; 
border-top:      1px solid #8394B2; 
background-color:          #D1DCEB;
clear:                        both;
}

HTML:

<div id="LOGO">
</div>

<div id="RAND">

<div id="KOPF">
</div>

<div id="LINKS">
test<BR>
test<BR>
test<BR>
test<BR>
test<BR>
</div>

<div id="MITTE">
</div>

<div id="RECHTS">
</div>

<div id="FUSS">
</div>

</div>

In die linke Box kann man nun reinschreiben was man will (test<br>test<br>usw.)....

Um das Problem besser verstehen zu können, schicke ich noch 2 Bilder mit.

Wäre super wenn mir da jemand helfen könnte

Gruss
Commi

Maik · 18. Oktober 2005

Hier das überarbeitete und erweiterte CSS-Modell:

Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

HTML:

<!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>

<style type="text/css">
<!--
#LOGO{
padding:                       5px;
width:                       975px;
border-bottom:   1px solid #8394B2;
background-color:          #EEF2F7;
}

#RAND{
width:                       985px;
border:          1px solid #8394B2;
background-color:          #EEF2F7;
}

#KOPF{
padding:                       2px;
padding-left:                  5px;
padding-right:                 5px;
width:                       975px;
border-bottom:   1px solid #8394B2;
background-color:          #D1DCEB;
}

#LINKS{
border:            0px solid black;
float:                        left;
margin:                       0;
padding:                      0;
}

#LINKS p
{
padding:                      5px;
margin:                       0;
}

#MITTE{
border:            0px solid black;
margin-top:                   10px;
margin-left:                 172px;
margin-right:                173px;
margin-bottom:                0;
}

#RECHTS{
width:                       150px;
border:            0px solid black;
float:                       right;
}

div.clear
{
clear:                       left;
height:                      0;
font-size:                   0;
margin:                      0;
padding:                     0;
}

#FUSS{
margin:                        0;
padding:                       0;
padding-left:                  5px;
padding-right:                 5px;
width:                       975px;
border-top:      1px solid #8394B2;
background-color:          #D1DCEB;
}
-->
</style>

</head>
<body>

<div id="LOGO">&nbsp;</div>

<div id="RAND">

<div id="KOPF">&nbsp;</div>

<div id="LINKS">
<p>test</p>
</div>

<div id="MITTE"></div>

<div id="RECHTS"></div>

<div class="clear"></div>

<div id="FUSS">&nbsp;</div>

</div>

</body>
</html>

Comenius · 21. Oktober 2005

Hi,

sorry für meine "verspätete" Antwort, aber ich bekam mal wieder keine E-Mail.

Danke für deine Hilfe!

Dass du dir gleich die Mühe gemacht hast den kompletten Code zu überarbeiten, finde ich super, Thx!

Gruss
Commi

✔ Abstand einder Box in Opera und IE zu groß

Comenius

Anhänge

Maik

Comenius

Neue Beiträge