XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Nested List menü (http://xhtmlforum.de/showthread.php?t=35656)

Heavenfighter 02.06.2005 16:54

Nested List menü
 
Hallo,


ich bin gerade dabei mein Menü etwas auf Fordermann zu bringen und wollte nun ein nested list menu verwenden.
Ich habe eine Anleitung hier gefunden:
http://css.maxdesign.com.au/listutorial/sub_master.htm

Nur habe ich jetzt ein problem, die Schrift ist bei mir sehr hoch eingestellt, und ich hätte sie im Menü gerne etwas kleiner. Nur wenn ich sie entsprechend setze, dann zeige mit der IE kleine Linien horizontal zwischen den Elementen der 2. Ebene an. Diese Linien treten jeweils unter der border auf und lassen den Hintergrund durchscheinen.
Woran liegt das?
Hier mal mein Code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>heavenfighter.net</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-language" content="de" />
<style type="text/css" media="screen">
* {
        padding: 0;
        margin: 0;
        border: none;
        text-align: left;
}

body {
       
        margin: 0px 25px 0px 25px;
        color: #000;
        background: #F4F4F4;
        text-align: left;
        font-family : "Trebuchet MS", Verdana, sans-serif;
        font-size: 100.01%;
       
}

#sidemenu {
        width: 9em;
        background: transparent;
}

#insidemenu ul
{
        margin: 0;
        padding: 0;
        list-style-type: none;
        background-color: #036;
        white-space: nowrap;
}

#insidemenu a
{
        display: block;
        color: #FFF;
        background-color: #036;
        width: 9em;
        padding: 3px 12px 3px 8px;
        text-decoration: none;
        font-weight: bold;
        font-size: 0.8em;
}

#insidemenu a:hover
{
        background-color: #369;
        color: #FFF;
}

#insidemenu li li a
{
        display: block;
        text-align: right;
        text-transform : lowercase;
        color: #FFF;
        width: 9em;
        background-color: #69C;
        padding: 3px 3px 3px 17px;
        text-decoration: none;
        border-bottom: 1px solid #fff;
        font-weight: normal;
        font-size: 0.7em;
        margin-left: 2em;
}

#insidemenu li li a:hover
{
        background-color: #AED3F9;
        color: #FFF;
}

#insidemenu li li a.selected {
       
        background: #2b497d url(./bilder/) repeat-x top left;
        font-weight: bolder;
        text-transform: capitalize;
}

</style>
</head>

<body>
<div id="sidemenu">
        <div id="insidemenu">
                <h2>Men&uuml;</h2>
                                         
                <ul>
                        [*]Home
                        <ul>
                                [*]About Me
                                [*]Mein Casemod
                                [*]Impressum
                        [/list]                       

                        [*]Galerie
                        [*]Links
                        [*]Gästebuch
                        [*]Homepage Historie
                        <ul>
                                [*]1. Version
                                [*]2. Version
                                [*]aktuell
                        [/list]                       
                [/list]        </div>
</div>
</body>
</html>

Lasse ich bei a und li li a die font-size weg, dann klappt alles nur ist es zu groß. Mit der font-size klappt es nur im Firefox aber nicht im IE.

Heavenfighter 02.06.2005 18:05

Ok, die Lösung hab ich mit der Hilfe von Google selbst gefunden. Für Alle die es interessiert:
http://phonophunk.phreakin.com/artic...list-items.php

Ich brauchte "nur" bei den Elementen ein
Code:

vertical-align: bottom;
einfügen. Nun sieht es überall gleich aus hoffe ich.

Vielleicht mag es noch jemand in anderen Browsern außer IE und FF testen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:46 Uhr.

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

© Dirk H. 2003 - 2023