[html/css] border-collapse issue

[Verwijderd]

In een poging om een compatible dropdown menu te creëren loop ik tegen een frustrerend probleem aan. De bedoeling is om zoveel mogelijk gebruik te maken van css. Na veel geklooi en gezoek op GoT & Google is het dan eindelijk gelukt om een dropdown menu te maken met setTimeout, clearTimeout, alles wat ik mezelf maar kon wensen.

Bij de vormgeving loop ik echter tegen een klein probleem aan. Wanneer ik de onmouseover aanroep, wordt er een tabel in een layer geopend. Deze tabel wordt opgemaakt dmv de volgende code:

code:

.submenu-tabel 
{ 
width:144px; 
padding:0px; 
margin:0px; 
background-color:#FFFFFF; 
border:0px;
border-collapse:collapse;
}

.submenu-tabel td 
{ 
background-color:#E5F5FF; 
border-bottom:1px solid #343A7C; 
margin:0px; 
text-align:left; 
vertical-align:middle; 
padding-left:28px; 
padding-right:10px; 
cursor:pointer; 
font-family:arial,helvetica, sans-serif; 
font-size:8pt; 
text-decoration:none; 
color:#000000; 
font-weight:100;
}

Geen probeem zou je zeggen, tabelletje ziet er helemaal perfect uit. Alleen worden de 1px solid borders #343A7C van de betreffende td's al weergegeven nog voordat de layer geshowed (onmouseover) moet worden.

Na wat speurwerk blijkt dit probleem te zitten in de border-collapse:collapse;
Haal ik deze weg, dan sluiten de tr's of td's niet goed op elkaar aan, wat dus wel de bedoeling is. Dit kan ik oplossen door cellspacing="0" toe te voegen aan de html-pagina, maar ik wil de tabel eigenlijk in z'n geheel opmaken in css, zonder de cellspacing attribuut dus.

Hieronder heb ik drie voorbeelden staan:

1. Pagina wordt op deze manier precies weergegeven zoals ik wil, echter wordt dit gedaan na toevoeging van de cellspacing attribuut, wat niet de bedoeling is:
http://www.man84.com/menu/cellspacing/index.html

2. Pagina wordt goed weergegeven, buiten het feit dat het onmouseover menu ruimte laat zien tussen de betreffende rijen.
http://www.man84.com/menu/none/index.html

3. Dit kan ik oplossen door border-collapse:collapse; toe te voegen. Het menu wordt dan weer perfect werkend, alleen verschijnen de borders al voordat de layer wordt aangeroepen... het hele effect van het menu verdwijnt dus.
http://www.man84.com/menu/border-collapse/index.html

Methode 3 werkt overigens prima in Firefox, Internet Explorer geeft echter problemen. Wat moet ik nu ondernemen om, of te zorgen dat het menu nog niet wordt weergegeven voor de onmouseover enerzijds, of de cellspacing terug te brengen zonder gebruik te maken van het cellspacing attribuut anderzijds...

Ik zit zelf al te lang te zwoegen op dit probleem, waarschijnlijk iets heel kleins, maar ik zie het over het hoofd..

[crisp]

Een heel gek idee misschien, maar heb je al eens overwogen om andere elementen te gebruiken in plaats van een table?

Er bestaat overigens ook een CSS attribuut voor cellspacing, namelijk border-spacing - dit wordt echter niet door IE ondersteund, dus daar heb je ws ook niet veel aan...

[ Voor 43% gewijzigd door crisp op 15-10-2004 17:12 ]

[Verwijderd]

Ja, het gebruiken van een list.., maar ben net begonnen met het oefenen van css en stap nog niet zo heel snel van de table af..

[ Voor 60% gewijzigd door Verwijderd op 15-10-2004 17:11 ]

[André]

Het beste is misschien de tabellen te vervangen door layers, die zijn veel geschikter om dit soort menu's mee te maken.

En overstappen van table naar list is niet zo'n grote stap

[ Voor 24% gewijzigd door André op 15-10-2004 17:13 ]

[Verwijderd]

André schreef op 15 oktober 2004 @ 17:12:
Het beste is misschien de tabellen te vervangen door layers, die zijn veel geschikter om dit soort menu's mee te maken.

En overstappen van table naar list is niet zo'n grote stap

En dan met :hover gaan werken in plaats van de onmouseover en onmouseout?

[André]

Verwijderd schreef op 15 oktober 2004 @ 17:15:
[...]


En dan met :hover gaan werken in plaats van de onmouseover en onmouseout?

Dat kan ja, ala de suckfish dropdowns. Zoveel werk is dat niet, en het is wel zo netjes. Ben je ook direct van je probleem af.

[Verwijderd]

Ik was al begonnen met een soortgelijk suckerfish menu, maar daarbij liep ik in eerste instantie al tegen het probleem aan dat display:inline; alles niet op een goede manier aan het uitlijnen was...

Nog maar een keer proberen dan...

[Verwijderd]

Verwijderd schreef op 15 oktober 2004 @ 17:28:
Ik was al begonnen met een soortgelijk suckerfish menu, maar daarbij liep ik in eerste instantie al tegen het probleem aan dat display:inline; alles niet op een goede manier aan het uitlijnen was...

Nog maar een keer proberen dan...

Je kan waarschijnlijk beter float: left; gebruiken i.p.v. display: inline; . Oude browsers hebben namelijk problemen met display: inline; (meer dan met gebruik van floats!)

[Verwijderd]

Nou mensen,
Ik moet jullie gaan teleurstellen... ik kan niet wijs worden uit die codes die suckerfish me allemaal voorschotelt. Heb gewoon domweg te weinig kennis van css en het implementeren daarvan in een zogenaamde list.

Het menu dat ik moet maken bestaat uit 2 levels (http://www.htmldog.com/ar...downs/example/bones2.html) zoals blijkt uit onderstaande afbeelding... Het is me in eerste instantie al niet eens gelukt om de bovenste blauwe balk goed weergegeven te krijgen, laat staan dat het me lukt om de dropdowns in juiste kleur met hovers te krijgen.



Als iemand nog tips heeft, dan hoor ik die graag

[Verwijderd]

A List Apart heeft een mooi artikel over het gebruik van CSS dropdowns (vooruit, er wordt een klein beetje vals gespeeld door een minimaal stukje Javascript te gebruiken voor IE). Gecko based browsers werken al gelijk goed omdat die wel :hover voor andere elementen dan alleen `a' ondersteunen.

Misschien heb je hier wat aan.

[Verwijderd]

@ritger: dat artikel heb ik gevolgd, zelfs met een Nederlandse vertaling. Het stylen van de lists geeft echter al problemen bij mij, laat staan het goed positioneren. Dan kies ik toch voor de minder nette optie van de onmouseover en de onmouseout, eventueel gecombineerd met het cellspacing attribuut..

[Barracuda_82]

Met dat artikel van ALA ben ik laatst ook aan het klooien geweest en heb deze mooi kunnen gebruiken in een site. Jammergenoeg heb ik een hekel aan Javascript (vraag me niet waarom) en is dit voor mij dus geen mooie oplossing voor een dropdown menu. Tot een collega van me het voor elkaar heeft gekregen om hetzelfde menu te maken helemaal zonder Javascript. Ik zal eens kijken of hij het op de server heeft gezet (waar ik ook van thuis bij kan) en anders zal ik er maandag nog achteraan gaan.

Ik heb hem gevonden:

http://ontwerpen.insiders.nl/johan/vertikaal_menu.php

Maar helaas werkt dit niet in IE (zoals ik net effe snel heb gecontroleerd, ik werk zelf altijd in FF1).

[ Voor 17% gewijzigd door Barracuda_82 op 16-10-2004 19:48 ]

[mullah]

Als je bij je ".submenu-tabel td" CSS een line-height instelt zou het zo kunnen zijn dat optie twee ( http://www.man84.com/menu/none/index.html ) het wel gaat doen...

Maar waarom wil je cellspacing niet gebruiken? Je gebruikt toch ook al tables... Cellspacing is net zo compatible als de table zelf is, zo lang je het goeie bijpassende doctype gebruikt.

Barracuda_82 schreef op 16 oktober 2004 @ 19:45:
Maar helaas werkt dit niet in IE

Maar daarom zit die javascript er juist bij in het ALA voorbeeld.

[ Voor 25% gewijzigd door mullah op 16-10-2004 21:15 ]

[Verwijderd]

@Barracuda_82, dank... ik heb op dit concept eventjes doorgenkutseld, de javascript-code van ALA er bij in gedaan, en voila alles werkt. Alleen zit ik nu met een nieuw probleem...

De weergave in IE en Firefox verschilt een klein beetje van elkaar (boxmodel?). Dit is op zich geen probleem, alleen IE geeft hem naar mijn mening niet goed weer en Firefox wel. Aangezien het merendeel van de internet-surfers nog geen IE gebruikt wil ik het hier eigenlijk wel goed hebben..

Onderstaande pagina geeft mijn suckerfish-menu weer. Het probleem is het volgende: het uitklapmenuutje, de eerste level ul dus, bevat een :hover met kleurverandering. De tekst staan in IE echter niet verticaal gecentreerd, wat wel de bedoeling is.. Firefox centreert dit wel prima, hoewel de hoogte van de afzonderlijke <li> beduidend kleiner is..

Nu heb ik gespeeld met de padding, margin en height, dit geeft echter als resultaat dat de tekst wel goed staat uitgelijnd, maar dat de :hover kleur weer niet het hele deel tussen de lijntjes bevat...

bijgevoegd dus de pagina waarop hij te bezichtigen is, en het relevante stukje css:

http://www.man84.com/menu/index.html

code:

#nav li li a 
{
    padding-top:0px;
    padding-bottom:0px;
    padding-left:25px;
    display: block;
    font-weight: normal;
    color: #000000;
}
    
#nav li li a:hover 
{
    background:#EAEAF2;
}

li li 
{
    border-bottom: 1px solid #343A7C;
    border-top:0;
    border-left:0;
    border-right:0;
    display: block;
    float:none;
    font-family:arial,helvetica, sans-serif;
    background:#FFFFFF;
    font-size:8pt;
    text-align:left;
    padding:0px;
    margin:0px;
    vertical-align:center;
}