[CSS] Probleem met li en ul

[X-GeaR]

Tijd voor een langdradig probleem? Mooi! Fasten your seatbelts en dan neem ik je mee!

Ik heb op mijn website een pulldownmenu dat gebruik maakt van <li> en <ul> tags. De vormgevingsaspecten staan in het .css bestandje.

Even een voorbeeldje:

HTML:

<div id="menu">
                    <ul id="nav">
                    
                        <li class="menuItem"><a href="http://www.astrostart.nl/index.php">home</a></li>
                        <li class="menuItem"><a href="http://www.astrostart.nl/nieuws2.php">nieuws</a>
                            <ul>
                                <li><a class="menuBtn" href="http://www.astrostart.nl/archief2.php">laatste 50 berichten</a></li>
                                <li><a class="menuBtn" href="http://www.astrostart.nl/archief.php">archief</a></li>
                                <li><a class="menuBtn" href="http://www.astrostart.nl/zoeken.php">zoeken</a></li>
            <li  position="relative"><a class="menuBtn" href="http://www.astrostart.nl/nieuwsbrief.php">nieuwsbrief</a></li>
                                <li><a class="menuBtn" href="http://www.astrostart.nl/voegnieuwstoe.php">voeg nieuws toe</a></li>
                            </ul>
                        </li>

In de CSS file staat:

Cascading Stylesheet:

ul                          { padding: 0; margin: 0; list-style: none; background: #FFFFFF; }
li                          { float: left; position: relative}
li ul                       { display: none; position: absolute; left: 0; border-top: 1px solid #1f4a99; border-right: 1px solid #1f4a99; border-left: 1px solid #1f4a99; z-index: 99; }
li > ul                     { top: auto; left: auto; }
li:hover ul, li.over ul     { display: block; top: 22px; left: 0; width: 138px; }

Geen grote problemen verder. Alles werkte prima, tot gisteren!

Ik wilde een nieuw scriptje voor mijn nieuwssysteem invoeren (een ratingscript), maar die maakt gebruik van ul en li tags!

Nu blijkt dat hij niet goed werkt met Internet Explorer 7.
Zie hier: http://www.astrostart.nl/...-geef-jij-het-nieuws.html

Als je een cijfer wilt geven, dan kun je alleen maar hoger dan het gemiddelde cijfer geven!

Na even uitvogelen kwam ik erachter dat dit ermee te maken heeft:

Cascading Stylesheet:

ul                          { padding: 0; margin: 0; list-style: none; background: #FFFFFF; }
li                          { float: left; [b]position: relative[/b]}
li ul                       { display: none; position: absolute; left: 0; border-top: 1px solid #1f4a99; border-right: 1px solid #1f4a99; border-left: 1px solid #1f4a99; z-index: 99; }
li > ul                     { top: auto; left: auto; }
li:hover ul, li.over ul     { display: block; top: 22px; left: 0; width: 138px; }

Haal ik position: relative weg, dan doet het ratingscript het goed. Maar dan doet het menu weer raar.

Hoe zorg ik ervoor dat het menu werkt (met position: relative) en ook het ratingscript werkt (zonder position: relative).

Dank je!

Btw: dit is het gedeelte uit het ratingscriptje:

PHP:

             $stars = trim($match[1]);
             $stars_size = trim($match[2]);
             $current_rating = $rating;
             $form .=   '<div class="ratingblock'.$stars_size.'">'."\n".
                        '<ul class="unit-rating'.$stars_size.'" style="width:'.($stars * $stars_size).'px">'."\n".
                        '<li class="current-rating'.$stars_size.'" style="width:'.($current_rating * $stars_size).'px;">'.                              'Currently '.$current_rating.'/'.$stars.'</li>'."\n";
                        
                            
                            for($i = 1; $i <= $stars; $i++){
                                
                                //Check IP/Cookie
                                if(($ip_lock and isset($all_ip[$ip])) or ($cookie_lock and $_COOKIE['rating'.$id] == $id)){
                                    $form .= '<li>'.$i.'</li>'."\n";
                                }
                    else{
                                    $onclick = 'onclick="rate_it(\''.$id.'\', \''.$i.'\', \''.$config_http_script_dir.'/plugins/rating/\', \''.$stars.'\', \''.$stars_size.'\', \''.$ip.'\')" onmouseout="document.getElementById(\'message'.$id.'\').innerHTML = \'\'" ';
                                    
                                    $form .= '<li><a '.$onclick.'href="#nogo" title="'.$i.' van de '.$stars.'" class="star'.$i.'">'.$i.'</a></li>'."\n";
                                }
                            }
                        
            $form .=    '</ul></div><div id="message'.$id.'"></div>'."\n";

Gebruik voortaan de juiste code tags om je post een stuk leesbaarder te maken . Zie ook: Overzicht van UBB-codes

[Blackbird-ce]

Als dit de enige plek is waar je een probleem krijgt, waarom dan niet een aparte class maken voor de li-tjes die je in je rating-script gebruikt?

[X-GeaR]

Hoe doe ik dat?

[momania]

Cascading Stylesheet:

#menu ul                             { padding: 0; margin: 0; list-style: none; background: #FFFFFF; }
#menu li                             { float: left; position: relative}
#menu li ul                         { display: none; position: absolute; left: 0; border-top: 1px solid #1f4a99; #menu border-right: 1px solid #1f4a99; border-left: 1px solid #1f4a99; z-index: 99; }
#menu li > ul                     { top: auto; left: auto; } 

done

[Wacky]

code:

<li class="aparteclass">blabla</li>

[X-GeaR]

momania schreef op donderdag 15 maart 2007 @ 14:14:

Cascading Stylesheet:

#menu ul                             { padding: 0; margin: 0; list-style: none; background: #FFFFFF; }
#menu li                             { float: left; position: relative}
#menu li ul                         { display: none; position: absolute; left: 0; border-top: 1px solid #1f4a99; #menu border-right: 1px solid #1f4a99; border-left: 1px solid #1f4a99; z-index: 99; }
#menu li > ul                     { top: auto; left: auto; } 

done

Bedankt! Dit heeft geholpen

[momania]

X-GeaR schreef op donderdag 15 maart 2007 @ 14:29:
[...]


Bedankt! Dit heeft geholpen

Snap je ook waarom? Dan leer je er ook weer van.

[Verwijderd]

hmmm.. goede vraag.

[Verwijderd]

momania schreef op donderdag 15 maart 2007 @ 14:14:

Cascading Stylesheet:

#menu li ul                        
#menu li > ul                   

done

Ik heb een vraag, wat is het verschil tussen li ul en li > ul, behalve dat dat niet werkt in ie6 of lager?

[ Voor 36% gewijzigd door Verwijderd op 29-03-2007 15:38 ]

[Verwijderd]

Verwijderd schreef op donderdag 29 maart 2007 @ 15:38:
Ik heb een vraag, wat is het verschil tussen li ul en li > ul, behalve dat dat niet werkt in ie6 of lager?

li ul matcht alle ul's die onder een li hangen.

li > ul matcht alleen de ul's die direct onder een li hangen.

HTML:

<ul>
    <li>Niveau 1
        <div>
            <ul>
                <li>Niveau 2
            </ul>
        </div>
</ul>

li ul matcht in bovenstaand geval. li > ul matcht niet vanwege de div die er tussen zit.