6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)
  • Q:
    Bijdrager
    Thom

    CSS list probleempje

    Ik heb probleempje met de volgende lijst. Ze moeten 19 pix uit elkaar komen, dat zijn de lijntjes. Op IE6/Win slaat hij steeds een regel over. Ik weet niet wat ik aan mijn css vergeten ben, jullie?

    te zien op: http://www.initiumnet.nl/test/menu1.htm

    HTML
    [code:1:067b98f9b2]
    <div class="menu">
    <ul>
    <li><a href="page1.htm" target="beschrijving">RSI preventie training</a></li>
    <li><a href="page1.htm" target="beschrijving">RSI preventie training</a></li>
    <li><a href="page1.htm" target="beschrijving">RSI preventie training</a></li>
    <li><a href="page1.htm" target="beschrijving">RSI preventie training</a></li>
    </ul>
    </div>
    [/code:1:067b98f9b2]

    CSS
    [code:1:067b98f9b2]
    .menu {
    position: relative;
    width: 148px;
    padding: 0;

    }

    .menu ul {
    font-family: Arial, Tahoma;
    font-size: 11px;
    margin: 0;
    padding: 0;
    line-height: 19px;
    font-weight: bold;
    text-align: right;
    list-style-type: none;
    }

    .menu li {
    display: block;
    margin: 0;
    padding: 0;
    }

    .menu a {
    display: block;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    vertical-align: middle;
    }

    .menu a:link, .menu a:visited {
    color: #5882AA;
    text-decoration: none;
    }
    .menu a:hover {
    color: #FFB400;
    }
    [/code:1:067b98f9b2]

    Bijdrager
    XXX

    misschien de ‘whitespace-bug’ ? … probeer eens al je <li>’s op 1 regel te zetten, dus zonder return na elke <li>

    Bijdrager
    WebJ

    De oplossing van XXX is waarschijnlijk de goede, ik heb er bij mijn menu ook weleens mee te maken gehad.

    Bijdrager
    macpro

    Eerste wat mij ook te binnen schiet en waar ik naar heb gekeken.
    Spaties in de code.
    Ze lijken hier niet te staan, maar de regelovergang bij elke <li> </li> heeft hetzelfde effect.

    Heb laatst een vergelijkbaar probleem gehad en dat bleek ook te liggen aan een spatie.

    Bijdrager
    tennapel

    Maak van je transitional Doctype een strict doctype en zet het plaatje met de gele lijntjes niet als achtergrond op de body, maar als achtergrond op de a en lees dit: http://www.hicksdesign.co.uk/journal/546/

    Bijdrager
    Thom

    De oplossing was voor mij erg simpel:

    .menu li {
    margin: 0;
    padding: 0;
    display: inline;
    }

    Inderdaad de whitespacebug. Ik heb allemaal erg ingewikkelde oplossingen gevonden maar door simpel ‘inline’ toe te voegen werkt het ook prima!!

    Bedankt voor de link!

6 berichten aan het bekijken - 1 tot 6 (van in totaal 6)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.