Suckerfish menu uitlijn(margin) probleem [FF/IE]

[Verwijderd]

Topicstart Opgelost. Hulp nodig voor nieuw probleem. Zie laatste post!

Het verhaal:
voor een klus, wat eigelijk een studie opdracht was (en waar ik nu nogfulltime mee aan het stinken ben in de vakantie), heb ik vandaag te horen gekregen dat het ontwikkelde menu kwa functionaliteit niet voldoende was. Hier was ik het ook wel deels mee eens en nu heb ik een nieuw menu ontwerp gemaakt.

Probleemstelling:
Ik ben nu al een hele dag aan het puzzelen geweest maar ik krijg de CSS niet naar wens.. Hieronder even een voorbeeld van hoe het er nu uitziet:
weg
ok ik heb de motor dus draaiende..serieus wat uren verdiept in het Suckerfish principe maar ik ga niet ontkennen dat ik wat bronnen heb gebruikt om bij het dropdown menu een verticaal deel te krijgen.

dit is wat het gewenste resultaat zou moeten wezen:
weg
alles geprobeerd om die 1 pixel margin's erin te krijgen..van margin-bottom bij de li tot en met paddings maar het lukt maar niet.............

De recente CSS:
[code=css]
body { font-family: verdana; font-size: 10px; color: #fff; background-color: #003A87; }
a { text-decoration: none; color: #fff; }
#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 10em; }
#nav li { float: left; width: 10em; }
#nav li ul { position: absolute; background: #ff4400; width:10em; left: -999em; }
#nav li ul ul { margin: -1em 0 0 10em; }
#nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; }
[/code]

De test pagina is hier te bekijken: link

Wie zou mij wat CSS tips kunnen verstrekken voor dit probleem?

Topicstart Opgelost. Hulp nodig voor nieuw probleem. Zie laatste post!

[ Voor 11% gewijzigd door Verwijderd op 21-07-2005 20:47 ]

[Verwijderd]

Zo te zien mis je een HTML tag, en een doctype declaration.

En heb je al een simpele

Cascading Stylesheet:

ul, li { margin-top: 1px; } 

geprobeerd?

[Verwijderd]

Heb ik geprobeerd, hij plakt die 1 pixel er wel bovenop bij de eerste LI, of eronder met een -bottom maar de andere delen blijven gewoon aan elkaar verbonden

[ Voor 8% gewijzigd door Verwijderd op 20-07-2005 02:09 ]

[r0b]

offtopic:
Ben je dan ook met de nieuwe website van Escape bezig? Blijft die 750kB background? ( http://www.escape-veenendaal.nl/test/images/bg_index.jpg )

[Verwijderd]

Alhoewel ik niet voor een oplossing met <ul> en <li> zou kiezen, kan je dit proberen:
#nav li { float: left; width: 10em; background: red; margin: 1px; }
#nav li ul { position: absolute; background: blue; width:10em; left: -999em; }

[samo]

probeer het anders met:

code:

ul li { display: block; margin: 1px; }

er in te verwerken

[ Voor 12% gewijzigd door samo op 20-07-2005 08:08 ]

[Verwijderd]

Kan je dit niet heel eenvoudig met een border oplossen?

[Verwijderd]

r0b schreef op woensdag 20 juli 2005 @ 04:04:

offtopic:
Ben je dan ook met de nieuwe website van Escape bezig? Blijft die 750kB background? ( http://www.escape-veenendaal.nl/test/images/bg_index.jpg )

Klopt, maar ik heb nog maar 2 dagen om dit menu (en ruim de helft van het custom CMS) af te ronden...daarna komen pas dat soort puntjes op de i

Verwijderd schreef op woensdag 20 juli 2005 @ 09:09:
Kan je dit niet heel eenvoudig met een border oplossen?

Border is helaas voor mij geen oplossing omdat ik graag transparantie wil tussen de 1 pixel openingen in het menu, ivm de achtergrond die ik later toevoeg. Btw. border-bottom werkt maar gedeeltelijk in IE.

Verwijderd schreef op woensdag 20 juli 2005 @ 08:01:
Alhoewel ik niet voor een oplossing met <ul> en <li> zou kiezen, kan je dit proberen:
#nav li { float: left; width: 10em; background: red; margin: 1px; }
#nav li ul { position: absolute; background: blue; width:10em; left: -999em; }

Perfect!

even een beetje bijgewerkt

Cascading Stylesheet:

#nav li { float: left; width: 12em; margin-bottom: 1px; margin-left: 1px; padding-left: 2px;}
#nav li ul { position: absolute; width:12em; left: -999em; }
#nav li ul ul { margin: -1.2em 0 0 12em; }

het werkt nu "bijna" perfect. FF 2 duimen omhoog, IE zet 2 pixels, (ipv 1px) tussen de verticale menu regels

Zie: link

EDIT: Het menu werkt dus goed in IE en FF (afgezien van die pixel afwijking in IE) maar nu heb ik het menu geplaatst in de website en dient zich het volgende probleem opeens aan: Het menu verdwijnt in IE zodra je de margin raakt....
Zie: link2

[ Voor 18% gewijzigd door Verwijderd op 20-07-2005 14:39 ]

[Verwijderd]

(Excuses dat ik even m'n topic omhoog schop.. Ik heb na de laatste post netjes 24 uur gewacht)

Het probleem:

Het testmenu werkt perfect in elke browser. Zie: hier
Dit testmenu 1 op 1 gekopieerd in de website werkt opeens slecht in IE. Zie: hier op de website

Het menu is kwa functionaliteit in IE compleet onbruikbaar geworden. Zodra je de margin raakt verdwijnt het menu en dit is iets wat niet het geval is in IE met hetzelfde menu in de testomgeving.

Ik kom er niet meer uit en heb hier nog een waslijst andere "last-minute" verplichtingen. Wat heb ik geprobeerd? Van de menu div plaatsen in z-index:99 tot het toevoegen van verschillende hover.htc scripts, zonder reseultaat.

Wie o wie kan mij nog een bruikbare tip verstrekken in de puzzel?

EDIT: *begint wanhopig te raken*
EDIT2: even een tijdelijke oplossing voor IE met * html {margin: 0px;}

[ Voor 13% gewijzigd door Verwijderd op 21-07-2005 21:48 ]