XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IE Anzeigeproblem bei Listen Navi (http://xhtmlforum.de/showthread.php?t=48855)

scripper 12.11.2007 19:03

IE Anzeigeproblem bei Listen Navi
 
Hallo alles zusammen,

ich arbeite gerade an einer Listennavigation und hab bemerkt dass Sie im Internetten Explorer (auch v7) ein Anzeigefehler hat. Ok ich bin kein blutiger CSS Anfänger und hab schon nach der Lösung gesucht (auch im Forum gelese) aber ich komm nicht dahinter.
Also der Fehler ist dass zwischen den Listenelementen einen Abstand anzeigt der nicht sein soll und auch die Höhe und padding werden irgendwie Ignoriert..
Code:

<li class="navihead_element">Unter</li>
    <li class="navihead_container">

Hab nun auch die entsprechenden Margin und padding Werte überprüft und eigentlich kein Fehler gefunden aber vielleicht bin ich auch einfach Blind.
Naja ich freu mich über eure Unterstützund, hier mal der entsprechende HTML & CSS Code
Code:

<ul class="navihead_liste">
              <li class="navihead_element">Unter</li>
    <li class="navihead_container">
            <ul class="navicontent_liste">
                          <li class="navicontent_button"><a href="#">unter1</a></li>
                    <li class="navicontent_button"><a href="#">unter2</a></li>
                          <li class="navicontent_button"><a href="#">unter2</a></li>
                    <li class="navicontent_button"><a href="#">unter2</a></li>
            </ul>
      </li>
      </ul>

Code:

.navihead_liste {
list-style-type:none;
width:140px;
list-style-type:none;
margin-top:20px;
margin-left:10px;
padding:0;
margin-bottom:0;
}

.navihead_element {
background-image:none;
background:#9d0303;
width:135px;
height:21px;
margin:0;
/* Schrift */
color:#ffff00;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
padding-left:5px;
padding-top:7px;
padding-bottom:0;
}

.navihead_container {
margin:0;
padding:0;
}

.navicontent_liste {
list-style-type:none;
padding:0;
margin:0;
}

.navicontent_button {
background-image:url(../bilder/unterbutton.jpg);
width:120px;
height:24px;
padding-left:20px;
padding-top:4px;
margin-bottom:1px;
}

und ne URL wo Ihr euch das ganze mal LIVE anschauen könnt
Hier
Danke schonmal im vorraus

scripper 13.11.2007 16:51

ok hab das Problem gelöst ...
eigentlich war es ein unnötiges Listen element <li class="navihead_container"> und anscheinend setzt der IE für LI immer eine Höhe auch wenn dieses Leer ist, hab es einfach entfert und es funktioniert perfekt :)

heiko_rs 13.11.2007 20:23

Zitat:

Zitat von scripper (Beitrag 357634)
anscheinend setzt der IE für LI immer eine Höhe auch wenn dieses Leer ist

Ja, er dehnt die Höhe leerer Elemente so weit aus, bis Text hineinpassen würde. Abhilfe schafft z.B. font-size: 0;, aber da leere Elemente eh tabu sind, ist Deine Lösung die einzig wahre ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:24 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023