CSS knoppenbalken

Beste forumgenoten,

Zou iemand mij met het volgende CSS probleem kunnen helpen (zie ook http://www.freeke.net/test11.htm)?

Ik probeer daar (drie maal onder elkaar) een horizontale knoppenbalk te generen met een stylesheet - voor dit experiment heb ik het CCS geintegreerd in de HTML pagina. Het is vrij aardig gelukt voor WIN NT/IE5.5 en WIN XP/IE6 maar niet voor OSX/Safari. De knoppen hebben daar ‘geen’ breedte.

Het oorspronkelijke script komt van Listamatic (http://css.maxdesign.com.au/listamatic/horizontal13.htm) waar de knoppen een vaste breedte in procenten hebben. Gezien de hoeveelheid tekst mogen mijn knoppen nauwelijks breder zijn dan de tekstbreedte zelf (verschillende breedtes dus).

In mijn testpagina staan eerst de verschillende kleuren van de 3 verschillende balken gedefinieerd en vervolgens de gemeenschappelijk code (v/a regel 75). De breedte-instelling van de knoppen gebeurt in regel 106 en 114. Ik heb wat gevarieerd maar zonder resultaat.

Misschien wil ik te veel, misschien is het een kleinigheid.
Vast bedankt voor het kijken.

groeten,

Igor

Je moet de link even veranderen in http://www.freeke.net/test11.htm en ik weetniet of het het de bedoeling is maar de knoppen zien er niet uit in firefox alles is opelkaar gepropt

[quote:b073a0a2ca="Jurriaan."] ik weetniet of het het de bedoeling is maar de knoppen zien er niet uit in firefox alles is opelkaar gepropt[/quote:b073a0a2ca]

Dat heb ik ook gezien en dat is juist niet de bedoeling!

Kun je het niet oplossen door een tabel in te voegen, waarin alle knoppen in aparte cel zitten?

Ja hoor, het kan ook met een tabel. Ofwel met bitmapjes ofwel met tabelstijlen. Nadeel is dat alleen de tekst en niet het knopje 'muisgevoelig' is.

Eigenwijs als ik ben, wil ik het toch gewoon met stylesheets - en zonder tabel - proberen op te lossen. Dus als iemand nog een suggestie heeft, hoor ik het graag!

groet,

Igor

Gooi je pagina weg, kopieer de code van Listamatic opnieuw.

Voor elke balk hoef je alleen maar een nieuwe kopie toe te voegen waarbij je <div id=“navcontainer”> vevangt voor een andere en in je styles voor die id dezelfde eigenschappen definieren, alleen met een andere achtergrondkleur.

Het probleem zit 'm in de breedte van de <a> tag binnen de <li> tag, de <a> tag heeft als style [code:1:52cfa48cd5]display: block [/code:1:52cfa48cd5]en daarbij zijn hoogte en breedte verplicht. Mozilla en Safari kunnen overweg met [code:1:52cfa48cd5]width: auto;[/code:1:52cfa48cd5] terwijl IE (6 in ieder geval) een vaste breedte nodig heeft b.v [code:1:52cfa48cd5]width: 15ex;[/code:1:52cfa48cd5] IE ziet dit als de minimale breedte. Je kunt javascript of severside script gebruiken om de juiste waarde in je pagina te zetten. Nog een tip: omdat stylesheets cascading zijn zet je de algemene code boven de specifiek code.