XHTMLforum - padding-Problem mit IE

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - padding-Problem mit IE (http://xhtmlforum.de/showthread.php?t=40851)

padding-Problem mit IE

hallo,

ich hab ein kleines Problem mit dem IE mal wieder!

Das Logo hab ich als Hintergrund abgelegt und drücke die HP diesen Bereich mit padding nach unten. Im Mozilla siehts auch super aus, doch nicht im IE!

http://metalheroes.de/index.php

html

Code:

<body>

<div id="wrap">

        <div id="navigation">

                <ul class="navilist">

                        <li><a href="#">Home</a></li>

                        <li><a href="http://board.metalheroes.de">Forum</a></li>

                        <li><a href="#">Crew</a></li>

                        <li><a href="#">Link uns</a></li>

                        <li><a href="#">Hilfe</a></li>

                        <li><a href="#">Kontakt</a></li>

                        <li><a href="#">Impressum</a></li>

</ul> </div> <!-- navigation end -->

        <div id="sidebar_l">

                <div class="me...............

css

Code:

* {

        margin:0;

        padding:0;

}

body {

        font-family:verdana,arial,helvetica,sans-serif;

        padding:10px 0;

        font-size:11px;

        color:#eee;

        background:#242424;

}

#wrap {

        margin:auto;

        padding:115px 0 0 0;

        width:780px;

        min-height:100%;

        text-align:left;

        border:1px solid #000;

        background:#515151 url(../design/img/logo.jpg) no-repeat;

}

#navigation ul {

        float:left;

        list-style:none;

        border-bottom:1px solid #8c8c8c;

        height:20px;

        width:780px;

        color:#fff;

        background:#242424 url(../design/img/cellpic.jpg) repeat-x;

}

#navigation ul li {

        display:inline;

        float:left;

        height:20px;

        width:50px;

        padding:0 0 0 13px;

}

#navigation ul li a {

        padding:4px 0 0 0;

        float:left;

        font-size:10px;

        font-weight:bold;

        text-align:center;

        color:#eee;

}

Das ist wegen deinem float in div#navigation. Lege mal einen Border rundum und du wirst sehen dass deine ul darüber hinaus reicht und es nur 1px hoch ist. (Mit einem border rundum würde es übrigens ebenfalls passen.)

Lösung:

Code:

.clearfix:after {

    content: "."; 

    display: block; 

    height: 0; 

    clear: both; 

    visibility: hidden;

}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

Code:

<div id="navigation" class="clearfix">

                  <ul class="navilist">

                            <li><a href="#">Home</a></li>

                            <li><a href="http://board.metalheroes.de">Forum</a></li>

                            <li><a href="#">Crew</a></li>

                            <li><a href="#">Link uns</a></li>

                            <li><a href="#">Hilfe</a></li>

    <li><a href="#">Kontakt</a></li>

                            <li><a href="#">Impressum</a></li>

  </ul>

</div> <!-- navigation end -->

Regards,
Lloyd

Vielen Dank für deine Erklärung und der Lösung. Ich war schon total verzweifelt. Jetzt weiss ich worauf ich achten muss. :lol:

Code:

<div id="navigation" class="clearfix">

<ul class="navilist">

<li><a href="#">Home</a></li>

...

</ul>

</div>

Schmeiß das div raus (ist total überflüssig) und gib ul die ID. Dann brauchst Du Clearfix auch nicht. Oder Du entfernst bei ul das float und wendest Clearfix auf sie an. Die 1%-Höhe brauchst Du nicht, denn ul hat bereits Layout.

Man sollte irgendwo mal ganz groß hinschreiben "Legt keine divs um Eure Menülisten"...

Ob es bei diesem Design ratsam ist, die Links floaten zu lassen (eher nicht), ist eine andere Frage. In jedem Fall brauchen sie keine feste Höhe. Schau Dir das Menü mal nach Textvergrößerung im Firefox an.