[CSS] TD background image onderbreekt!

[Spooksel]

Ik ben bezig het het in elkaar zetten van een menu voor onze nieuwe shopsite, hierin loop ik echter tegen een probleem aan waarbij alle browsers, behalve FF de achtergrond van een van de TD elementen niet doortrekken waardoor een lege ruimte te zien is, zie ook:



Ik probeer er via google achter te komen wat er precies gebeurt, maar ik kom er maar niet uit. Zal waarschijnlijk te maken hebben met het niet weten van de juiste zoektermen voor deze issue =/.

CSS voor de rijen waar de onderbreking in zit:

Cascading Stylesheet:

table.menu_mouseovers tr.tr_middlerow td {
    width: 170px;
    text-align: left;
    padding-left: 15px;
    line-height: 18px;
}

table.menu_mouseovers tr.tr_middlerow td.isFirst {
    background: transparent url(../img/background/vs_menu_kader_linksmidden.png) top left repeat-y;
    border-right: 1px solid #5f6061;
}

table.menu_mouseovers tr.tr_middlerow td.isNormal {
    background-color: #fff;
}

table.menu_mouseovers tr.tr_middlerow td.isLast {
    background: transparent url(../img/background/vs_menu_kader_rechtsmidden.png) top right repeat-y;
    border-left: 1px solid #5f6061;
}

table.menu_mouseovers tr.tr_middlerow td.isJustOne {
    background: transparent url(../img/background/vs_menu_kader_singlemidden.png) top left repeat-y;
}

De menu's zijn hier te zien: http://voetbalshop.thuiswinkelen.nu/

Ik hoop dat iemand me een tip geven richting de oplossing!

[ Voor 0% gewijzigd door Spooksel op 08-01-2010 16:23 . Reden: Om de 'spamfactor' wat te verminderen heb ik het logo van de site ff uitgeschakeld. ]

[TJHeuvel]

Hier in Firefox 3.5.7 lijkt hij het gewoon te doen.

[kalizec]

CyCloneNL schreef op vrijdag 08 januari 2010 @ 17:10:
Hier in Firefox 3.5.7 lijkt hij het gewoon te doen.

*niet meteen zo fel*

Het hele punt van de TS is juist dat het in FF wel werkt en in de rest niet.

[ Voor 9% gewijzigd door MueR op 08-01-2010 17:15 ]

[Wiethoofd]

CyCloneNL schreef op vrijdag 08 januari 2010 @ 17:10:
Hier in Firefox 3.5.7 lijkt hij het gewoon te doen.

Het is dus juist dat niet-Firefox browsers de fout in gaan

[ Voor 0% gewijzigd door Wiethoofd op 08-01-2010 17:14 . Reden: spuit 11 ]

[MueR]

Ik kan het met Chrome iig wel reproduceren, maar eerlijk gezegd heb ik niet veel trek om deze onoverzichtelijke rotzooi te gaan debuggen. Die tabellenmeuk kan echt niet

[Spinal]

Ik zie hier geen verschil tussen FF (3.5.7) en Opera (10.20), dus het is niet in "alle browsers" fout
Maar idd wat MueR zegt, is dit niet op te lossen met een soort van Suckerfish menu ipv tabellen?

[Spooksel]

MueR schreef op vrijdag 08 januari 2010 @ 17:14:
Ik kan het met Chrome iig wel reproduceren, maar eerlijk gezegd heb ik niet veel trek om deze onoverzichtelijke rotzooi te gaan debuggen. Die tabellenmeuk kan echt niet

Ik zou het liever ook anders oplossen, maar de structuur die ik noodgedwongen moet gebruiken (XML/XSL) gaat bij de wat mooiere dingen al over zijn nek

[Taurnil]

overflow: hidden; al geprobeerd? doe ik het meestal mee.
durf niet zo snel even te zeggen waar die moet in dat stuk van je css. maar kom je snel genoeg achter.

[Spooksel]

Ik heb de oorzaak gevonden, het zat in de tekst die boven de streep staat -> "Categorieën". Deze wordt binnen zijn TD element gepositioneerd met een padding. In browsers die dus niet Firefox zijn wordt deze padding onder de TD extra gerendered en daar geld de achtergrond van de middelste TD's dus niet.

Cascading Stylesheet:

table.menu_mouseovers tr.tr_toprow td {
    width: 170px;
    height: 26px;
    color: #5f6061;
    font-weight: bold;
    text-align: left;
/*  padding-top: 5px;
    padding-left: 15px; */
}

Nu hoef ik alleen nog maar ff een alternatieve manier te gebruiken om de tekst te positioneren, zal wel middels een SPAN worden.

Een andere oplossing zou geweest zijn om de achtergrond image van de bovenste TD's gewoon 5 pixels hoger te maken (canvas size) en daar de boel op door te trekken.

[ Voor 11% gewijzigd door Spooksel op 11-01-2010 11:12 ]