[CSS] witregel bij li/ul dropdownmenu weghalen

[Theske]

Beste Tweakers,

Ik heb een dropdownmenu gemaakt (volgens de suckerfishmethode). Het werkt allemaal goed, alleen zit er een schoonheidsfoutje in waar ik totaal niet van weet hoe ik dat kan oplossen. Ik heb hier al flink wat rond gezocht, maar dat heeft helaas nog niet tot het gewenste resultaat geleid.
Wanneer je met de muis over het menu gaat, klapt het submenu wel mooi uit, alleen daar is een witregel te zien. Dat is niet de bedoeling!
Ik kan hem wel wegwerken door "top:2.5em;" maar dan schuift alleen dat uitklapmenutje omhoog en is er nog een verschil van een aantal pixels tussen het gifje (het menu kopje) en de border eronder. En hij overlapt dan ook een beetje, wat ook niet echt mooi is.
Ik hoop dat het allemaal duidelijk is, en voor verduidelijking kan je ff kijken op::: http://www-tmp.valstar-simonis.com/

Verder heb ik nog geprobeerd alle 'enters' en spaties tussen de <li><ul> enzz weg te halen, maar ook dat maakte geen verschil

Cascading Stylesheet:

ul {
  padding: 0px;  
  margin: 0;
  list-style: none;
  }  
li {
    float: left;
    position: relative;
    width: 10em;
}
#nav .li{
  border-right: 1px solid #929496;
}
li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 3em;
}
li > ul {
  top: auto;
  left: auto;
    }   
li:hover ul, li.over ul{ display: block; }

code:

<li style="width:97px;" class="li">
    [img]"img/<?[/img]/menu_hetbureau_w.gif" width="97" name="bureau" onMouseOut='MM_swapImgRestore()' onMouseOver="MM_swapImage('bureau','','img/<? echo $lang; ?>/menu_hetbureau_k.gif',1)">
  <ul id="dropmenudiv1">
         <li><a href='index.php?m=1&s=".$s."&lang=".$lang."'>blaat</a></li>
  </ul>
</li>
<li style="width:116px" class="li">
[img]"img/<?[/img]/menu_onzeprincipes_w.gif" width="116" name="principes" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('principes','','img/<? echo $lang; ?>/menu_onzeprincipes_k.gif',1)">
  <ul id="dropmenudiv2"><?
         <li><a href='index.php?m=2&s=".$s."&lang=".$lang."'>blaat</a></li>
  </ul>
</li>

<!-- enz.... -->

edit:: als je trouwens alles selecteert zie je die witte regel ook voor de verduidelijking

edit2:: php weggepoetst

[ Voor 58% gewijzigd door Theske op 06-12-2005 13:48 ]

[Verwijderd]

Komt misschien een beetje raar over, maar ik vindt het wel een mooi effect zo!

[RM-rf]

volgens mij komt die spatie niet door je UL.., maar door de IMG

code:

    <img src="img/<? echo $lang; ?>/menu_hetbureau_w.gif" width="97" name="bureau" onMouseOut='MM_swapImgRestore()' onMouseOver="MM_swapImage('bureau','','img/<? echo $lang; ?>/menu_hetbureau_k.gif',1)"  
><ul id="dropmenudiv1">

(verder, het verzoek om liever de output HTMLcode te psoeten, en geen PHP-scripts)

[Theske]

ja, maar kan ik dat nog oplossen dan?
ik heb alle enters en spaties tussen mn afbeelding en de ul/li weggehaald, maar het is nog steeds zichtbaar...
in firefox dan, in IE is het er iig al uit

edit: hoe kan dit in firefox opgelost worden dan? iemand een idee??

[ Voor 16% gewijzigd door Theske op 06-12-2005 14:31 ]

[Theske]

bescheiden kickje..

[crisp]

Cascading Stylesheet:

li img { vertical-align: bottom; }

of

Cascading Stylesheet:

li img { display: block; }

wellicht?

[Theske]

kijk is, geweldig! bedankt

Cascading Stylesheet:

li img { vertical-align: bottom; }

deze was genoeg

En dan heb ik nog een vraagje, ik weet niet of ik het hierin kan stellen of dat ik nieuw topic moet openen....

Zoals de mensen die firefox gebruiken misschien al gemerkt hebben toen ze de website bekeken.....
het dropdownmenu gaat weer weg zodra ik met mijn muis over de div van de tekst ga. ik heb de z-index op -10 gezien van de betreffende div.. en de div van mn dropdownmenu op 10. Dat leek mij genoeg, maar helaas werkte dat nog niet. In explorer werkt het dus wel allemaal zoals het zou moeten.
Ik heb hier wel gezocht en kwam overal dingen tegen over de z-index, maar dat werkt bij mij nog niet
Heeft er iemand misschien nog iets waarmee het wel goed zou moeten gaan?

[Sappie]

Theske schreef op woensdag 07 december 2005 @ 10:04:
En dan heb ik nog een vraagje, ik weet niet of ik het hierin kan stellen of dat ik nieuw topic moet openen....

Zoals de mensen die firefox gebruiken misschien al gemerkt hebben toen ze de website bekeken.....
het dropdownmenu gaat weer weg zodra ik met mijn muis over de div van de tekst ga. ik heb de z-index op -10 gezien van de betreffende div.. en de div van mn dropdownmenu op 10. Dat leek mij genoeg, maar helaas werkte dat nog niet. In explorer werkt het dus wel allemaal zoals het zou moeten.
Ik heb hier wel gezocht en kwam overal dingen tegen over de z-index, maar dat werkt bij mij nog niet
Heeft er iemand misschien nog iets waarmee het wel goed zou moeten gaan?

Ik zie niet precies wat het verschil is tussen de rendering in IE en Firefox, dus misschien zou je dat ff toe kunnen lichten aan de hand van bijvoorbeeld wat plaatjes?

Verder heb ik wel wat tips / opbouwende kritiek:

- Je gebruikt een stuk javascript om aan de klasse namen van alle li elementen (onderdeel van ul met id "nav") iets toe te voegen in het geval van een mouseover. Ten eerste staat dat javascript niet op een nette plaats; plaats het liefst in een aparte file waar je naartoe linkt in de head. Ten tweede gebruik je onnodig nog de onmouseover en onmouseout attributen icm nog weer een ander javascript om de backgrounds van je hoofditems te wisselen. Beter laat je die attributen weg en doe je alle styling (en dus ook het swappen van de images) aan de hand van css.
- Ook sluit je je body tag niet af en maak je geen gebruik van de head en html elementen. Oftewel laat je de body, head en html weg (deze worden afaik toch automatisch door alle browser aan de DOM toegevoegd) of je gebruikt ze en sluit ze ook op de juiste manier af (mi nog het volledigste)
- Je gebruikt tabellen waarvoor ze niet bedoeld zijn. (semantiek is je zoekwoord)
- IE trekt hier die animated gifs op je homepage voor geen meter. Vast een IE bug / onvolkomenheid, maar misschien dat je zoiets beter in flash zou kunnen doen.
- Als laatste is je html niet voorzien van een DTD.

[Theske]

Allereerst bedankt voor je reactie, ik zal er wel wat mee gaan doen!

Om even op een paar punten terug te komen::
- Wat betref de animated gifs::: ik was daar al mee bezig om ze via JS over te laten lopen, een aantal andere zaken op de website hadden hogere prioriteiten.. dus vandaar dat het op deze manier is gegaan.
- de onmouseover en onmouseout was mijn volgende punt, gezien hier ook nog een aantal zaken in zitten die ik anders wilde (het onmouseover plaatje blijft niet staan als je met je muis over het submenu gaat)
- ik zal de html/body neerzetten en ook goed afsluiten
- ook zal ik kijken naar de tabellen die gebruikt worden voor dingen waar ze niet voor bedoelt zijn
- wat betreft de positie van de javascript:: hij werkte gek genoeg alleen toen ik hem op deze positie neerzette, in de head of een include bestand deed hij het niet, maar misschien is dat nog iets om uit te zoeken.

En wat bedoel je precies met de rendering tussen FF en IE?
Wat bij mij momenteel nog het probleem is dat in IE het submenu gewoon uit te klappen is en er verder geen problemen ontstaan.
In FF heb ik het probleem dat wanneer ik bijvoorbeeld met mijn muis over onze principes ga (hiervoor moet je wel even in een submenu, bijvoorbeeld het bureau -> missie zitten), het submenu ineens verdwijnt als ik met mijn muis over de onderstaande tekst (aan de linkerkant, wat een aparte div is) ga.
In IE werkt dit goed zonder z-index'en te hebben ingesteld.
In FF heb ik het zonder en met verschillende z-index'en geprobeerd, maar steeds bleef hij dit probleem geven.

Ik hoop dat het nou misschien iets duidelijker is en jullie mij wat verder op weg kunnen helpen. Bedankt iig alvast voor je reactie/tijd en moeite


oke, het is nu gelukt, maar mijn borders zijn nu verdwenen
hoe dat kan....... is me momenteel ff een vraag

[ Voor 5% gewijzigd door Theske op 07-12-2005 11:49 ]