CSS probleem met child selector*

[Verwijderd]

Ik ben bezig aan een nieuwe site en op aanraden van een aantal personen heb ik mijn menu in een list gegoten wat wel voor een paar grote problemen zorgt. Ik heb het duidelijk gemaakt aan de hand van plaatjes.


Zo ziet het er uit in firefox, en zo moet het er ook uitzien.
Dit krijg ik in Internet Explorer:

Een groot verschil dus.

Hiermee zijn jullie weinig dus hier is de code

html:

code:

      <div id="menu">      
        <div class="title nastyOrangeTitle">
          Informatie
        </div>   
        <div class="content nastyOrange">
          <ul>
            <li class="menu">Geplaatst door: <a href="profile.php?id=1" class="black">Gert-Jan</a></li>
            <li class="menu">Timestamp: 09.12.05 18:40</li>

            <li class="menu">Categorie: <a href="blog.php?cat=5" class="beige2orange">Mircosoft</a></li>
            <li class="menu">Dossier: <a href="blog.php?file=3" class="beige2orange">Internet Explorer 7</a></li>
          </ul>
        </div>  
        <br>     
        <div class="title greyTitle">
          Recente blogs
        </div>   
        <div class="content grey">

          <ul>
            <li>» <a href="index.php?id=7" title="09.12.05 18:40 - Internet Explorer 7 gaat RSS-icoon Firefox gebruiken" class="beige2orange">Internet Explorer 7 gaat..</a></li>
            <li>» <a href="index.php?id=6" title="02.03.06 18:44 - Microsoft geeft ontwikkelaars vooruitblik op Direct3D 10" class="beige2orange">Microsoft geeft ontwikke..</a></li>
            <li>» <a href="index.php?id=5" title="25.12.05 18:36 - Microsoft haalt graphics uit Windows-kernel" class="beige2orange">Microsoft haalt graphics..</a></li>
            <li>» <a href="index.php?id=4" title="20.12.05 05:15 - Wellicht volgend jaar draadloze iPod" class="beige2orange">Wellicht volgend jaar dr..</a></li>

            <li>» <a href="index.php?id=3" title="15.12.05 16:55 - Bèta Exchange 12 voegt 'Unified Messaging' toe" class="beige2orange">Bèta Exchange 12 voegt '..</a></li>
            <li>» <a href="index.php?id=2" title="15.12.05 14:08 - 'Slechte omstandigheden bij leveranciers Acer en Fujitsu'" class="beige2orange">'Slechte omstandigheden ..</a></li>
            <li>» <a href="index.php?id=1" title="15.12.05 14:08 - Europarlement gaat akkoord met bewaarplicht" class="beige2orange">Europarlement gaat akkoo..</a></li>
          </ul>
        </div>  
        <br> 
      </div>

css:

code:

  #menu > div > ul {

    margin: 0px;
    padding: 0px; 
    list-style: none; 
        
  }

  #menu > div > li { float: left; }

  }  
  
  #menu { 
  
    top: 130px;
    left: 30px;
    position: absolute;
    z-index: 200;    
    width: 180px;
    height: 100%;             
    text-align: center;
    
  }
  
  #menu div.title {
  
    width: 100%;
    border: 1px solid;
    padding: 2px 5px 2px 5px; 
    font-weight: bold; 
    text-align: left;
  
  }
  
  #menu div.content {
  
    width: 100%;
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    padding: 2px 5px 2px 5px;
    font-weight: normal; 
    text-align: left;
    color: #837759;
  
  }

Ik heb al wat geprobeerd. Hiervoor was mijn resultaat namelijk nog slechter. Ik heb ook geprobeerd die > weg te laten bij de #menu css maar dan zijn men content boxes leeg dan krijg ik dit in firefox



en dit in IE



Hoe kan ik dit oplossen want ik geraakt er echt niet uit.

[André]

Je zult toch echt die > weg moeten laten, IE kan daar niet mee omgaan. Gebruik op de juiste plek classes

[r0bert]

Ik snap niet waarom je een float op de <li>-elementen hebt. Verder je list-style-type nog instellen.e: sry.. /e 2e methode werkt misschien dan wel, anders een clear:both; op je <ul>?

[ Voor 11% gewijzigd door r0bert op 18-12-2005 23:07 ]

[Verwijderd]

Het ziet er m.i. complex uit, een vreemde opzet om li's en de a's weer classes mee te geven terwijl je dit ook in de CSS simpel kan ondervangen.

[Boelie-Boelie]

Bij mij werkt het wel in FF en IE als ik dit weghaal:

code:

#menu > div > ul {
    margin: 0px;
    padding: 0px; 
    list-style: none; 
  }
  #menu > div > li { float: left; }
  }

(overigens dubbel sluitingsteken!), en in plaats daarvan gebruik maak van:

code:

#menu div ul {
    margin: 0px;
    padding: 0px; 
    list-style: none; 
}

Overigens gebruik ik wel altijd <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> (lees 'Activating the right layout mode using the doctype declaration' waarom het doctype zo belangrijk is).

[ZeilDude]

Hoewel je problemen niet uniek zijn, had ik vanmorgen toch zin in een puzzeltje.

Ik heb eerst je HTML-code wat opgeschoont door alle overbodige classes en divs te verwijderen. Je ziet meteen al in Firefox met de stijl uitgeschakeld (Beeld > Paginastijl > Geen stijl) dat de code stukken netter is. Verder alles netjes uitgelijnd, zodat je je fouten ook eerder ziet.

HTML:

<div id="menu01">      
    <h3>Informatie</h3>   
    <ul>
        <li>
            Geplaatst door:
            <a href="profile.php?id=1">Gert-Jan</a>
        </li>
        <li>
            Timestamp: 09.12.05 18:40
        </li>
        <li>
            Categorie: 
            <a href="blog.php?cat=5">Mircosoft</a>
        </li>
        <li>
            Dossier: 
            <a href="blog.php?file=3">Internet Explorer 7</a>
        </li>
    </ul>
</div>
<div id="menu02">   
    <h3>Recente blogs</h3>
    <ul>
        <li>
            <a href="index.php?id=7" title="09.12.05 18:40 - Internet Explorer 7 gaat RSS-icoon Firefox gebruiken">Internet Explorer 7 gaat..</a>
        </li>
        <li>
            <a href="index.php?id=6" title="02.03.06 18:44 - Microsoft geeft ontwikkelaars vooruitblik op Direct3D 10">Microsoft geeft ontwikke..</a>
        </li>
        <li>
            <a href="index.php?id=5" title="25.12.05 18:36 - Microsoft haalt graphics uit Windows-kernel">Microsoft haalt graphics..</a>
        </li>
        <li>
            <a href="index.php?id=4" title="20.12.05 05:15 - Wellicht volgend jaar draadloze iPod">Wellicht volgend jaar dr..</a>
        </li>
        <li>
            <a href="index.php?id=3" title="15.12.05 16:55 - Bèta Exchange 12 voegt 'Unified Messaging' toe">Bèta Exchange 12 voegt '..</a>
        </li>
        <li>
            <a href="index.php?id=2" title="15.12.05 14:08 - 'Slechte omstandigheden bij leveranciers Acer en Fujitsu'">'Slechte omstandigheden ..</a>
        </li>
        <li>
            <a href="index.php?id=1" title="15.12.05 14:08 - Europarlement gaat akkoord met bewaarplicht">Europarlement gaat akkoo..</a>
        </li>
    </ul>
</div>

Ok, dat is al een goed begin, nu dus de stijlsheet. Ook daarin niet meer dan noodzakelijk. Je hoeft geen lastige childselectors te gebruiken. ook daarin weer netjes de code uitlijnen. Zo staat in de css die jij postte 2x '{' achter elkaar, wat tot fouten kan leiden.

Cascading Stylesheet:

#menu01, #menu02 {
    width: 180px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#menu01 ul, #menu02 ul {
    margin: 0px;
    margin-bottom: 25px;
    padding: 0px; 
    list-style: none; 
    background-color: Silver;
    border: 1px solid Black;
}

#menu01 h3, #menu02 h3 {
    margin: 0px;
    padding: 5px; 
    list-style: none; 
    background-color: Gray;
    color: White;
    border: 1px solid Black;
    border-bottom: 0 none;
    font-size: 13px;
}

#menu01 li, #menu02 li {
    margin: 5px;
}

#menu01 a, #menu02 a {
    text-decoration: none;
}

#menu01 a:hover, #menu02 a:hover {
    text-decoration: none;
    color: Red;
}

Volgens mij heb je nu wat jij bedoelt. Overigens zijn er op dit gebied tal van tutorials. Zoek maar eens goed!

[Verwijderd]

bedankt het probleem is opgelost.

[BtM909]

Ik hoop dat je het advies van ZeilDude van harte neemt en je er een beetje in gaat verdiepen. Leer je er ook nog van

[SuperRembo]

Ik zou in plaats van #menu01, #menu02 een class gebruiken. Dat scheelt nogal in typwerk als je meer menu's hebt.

[ZeilDude]

SuperRembo schreef op dinsdag 20 december 2005 @ 07:51:
Ik zou in plaats van #menu01, #menu02 een class gebruiken. Dat scheelt nogal in typwerk als je meer menu's hebt.

Had ik gedaan, omdat hij de menu's anders wilde vormgeven. Als ze hetzelfde zijn, kun je inderdaad beter een class dan een id gebruiken.

Verwijderd schreef op maandag 19 december 2005 @ 19:54:
bedankt het probleem is opgelost.

Toon je site eens dan...

[ Voor 21% gewijzigd door ZeilDude op 20-12-2005 08:45 ]

[SuperRembo]

ZeilDude schreef op dinsdag 20 december 2005 @ 08:41:
Had ik gedaan, omdat hij de menu's anders wilde vormgeven. Als ze hetzelfde zijn, kun je inderdaad beter een class dan een id gebruiken.

Dan zou ik nog steeds als basis een menu class gebruiken. Dan kan je als nog per menu op id een aantal dingen overrulen.

[ZeilDude]

SuperRembo schreef op dinsdag 20 december 2005 @ 08:55:
[...]


Dan zou ik nog steeds als basis een menu class gebruiken. Dan kan je als nog per menu op id een aantal dingen overrulen.

Dus per tag een id én een class? Gaat dat wel lekker met oude browsers?

[_eXistenZ_]

Daarvoor is de update knop.
Je moet wel met verschillende browsers / w3c rekening houden, niet met oude browsers die de helft niet kunnen IMHO.

[BtM909]

ZeilDude schreef op dinsdag 20 december 2005 @ 08:57:
[...]


Dus per tag een id én een class? Gaat dat wel lekker met oude browsers?

Welke oude browsers?

Overigens is het natuurlijk niet de bedoeling om elke tag een class en / of id te geven

Lees ook eens een verhaal van Mophor @ http://www.rikkertkoppes.com/thoughts/class-and-style

[ZeilDude]

BtM909 schreef op dinsdag 20 december 2005 @ 10:13:
[...]
Lees ook eens een verhaal van Mophor @ http://www.rikkertkoppes.com/thoughts/class-and-style

Goed om te weten!