be bl.eu-Design

[waechter]

Meine Webseite mit eigenem Design bebl.eu zeigt leider im Internet Explorer die Menüleiste falsch an, im Firefox und Opera ist alles ok.
Im IE sehen die Menüelemente treppenformig aus, d.h. jedes Element ist ca. 10 - 20 px niedriger als das vorherige.
Design ist richtig validiert und man kann es hier ansehen: http://jigsaw.w3.org/css-validator/validator?uri=http://www.bebl.eu&warning=1&profile=css21&usermedium=all

Ich bin echt am verzweifeln Kann jemand helfen?

[jeff1980]

Hi,

vor kurzem hatte ich ein ähnliches Problem mit einer meiner Webseiten. Das Menü wollte einfach nicht so erscheinen, wie es sollte (selbst im Firefox nicht). Deshalb hab ich mir Deine Seite mal angeschaut. Ich stelle mal die Code-Abschnitte rein, die ich geändert habe:

Original:

Code: Select all

<div id="menu">
<ul> 
<li class="start"><a><b>Home</b></a>


</li>

<li class="inactive"><a href="http://www.bebl.eu/themen">Themen</a>


</li>
</ul>

</div>

Neu:

Code: Select all

<div id="menu">
<ul>
<div class="start"><a><b>Home</b></a>


</div>

<div class="inactive"><a href="http://www.bebl.eu/themen">Themen</a>


</div>
</ul>

</div>

Aus der Liste ... habe ich divs gemacht.
Dann noch in der CSS folgendes anpassen:

Original:

Code: Select all

#menu ul {

                /* height:90px; */

                padding: 4px 20px;
                list-style: none;
                /* display: table-row; */

        }



        #menu li a {

                display:block; /*width: 95px; */ float:left;

                margin: 2px;

                padding:24px 7px;

        }
        #menu li p {

                display:block; /*width: 95px; */ float:left;

                margin: 2px;

                padding:24px 7px;

        }

Neu:

Code: Select all

#menu ul {

                /* height:90px; */

                padding: 4px 20px;
                list-style: none;
                /* display: table-row; */

        }



        #menu div a {

                display:block; /*width: 95px; */ float:left;

                margin: 2px;

                padding:24px 7px;

        }
        #menu div p {

                display:block; /*width: 95px; */ float:left;

                margin: 2px;

                padding:24px 7px;

        }

Es gibt bestimmt noch elegantere Varianten, aber so funktioniert es zumindest bei mir im Firefox 2.0.0.7, IE 6 und IE 7.

mfg
Jan

[waechter]

Vielen Dank, jetzt geht es im Konquero und IE 6,7 (5.5 ein bisschen)
Eigentlich ziemlich unpassend in einer Liste (ul) nicht il zu verwenden, aber wenn's geht

Blog