[css] Klein CSS probleempje in buttons

[MrDummy]

Ik ben bezig met bouwen van nieuwe site. Daarbij experimenteer ik de nieuwe indeling.
Dat gaat tot nu toe goed, maar toch stuit ik op een ongemak ondanks dat code nog goed werkt in FF.
Bij IE gaat het even gekke kant op.



Hier hele css:

Cascading Stylesheet:

/* site kader */
.site_kader_side { width:335px; float:left; margin-bottom:5px; }
.site_kader_strik { height:34px; width:308px; background:url(images/kader-strik.png) no-repeat center; }
.site_kader_body { width:300px; float:left; background-color:#FFF; }
.site_kader_img { display:table-cell; height:300px; width:300px; vertical-align:middle; text-align:center; }
.site_kader_img img { vertical-align:middle; }
.site_kader_slideshow { width:300px; overflow:hidden; }
.site_kader_slidebody { position:relative; }
.site_kader_buttonslide { width:240px; float:left; overflow:hidden; background:#CCC; }
.site_kader_buttonbody { position:relative; left:110px; }
.site_kader_slideinfo { width:300px; float:left; cursor:pointer; }
.site_kader_aanbieding { height:308px; width:27px; background:url(images/kader-aanbieding.png) no-repeat top; float:left; }
.site_kader_thema { height:308px; width:27px; background:url(images/kader-thema.png) no-repeat top; float:left; }
.dot_play { height:12px; width:20px; background:url(images/button-play.gif) no-repeat; float:left; cursor:pointer; }
.dot_pause { height:12px; width:20px; background:url(images/button-pause.gif) no-repeat; float:left; cursor:pointer; }
.dot_select { float:left; text-align:center; font-size:9px; cursor:pointer; }
.dot_select a:link,a:visited { display:block; height:12px; width:18px; border-left:#ec6e08 solid 1px; border-right:#ec6e08 solid 1px; background:#fff; color:#ec6e08; }
.dot_select a:hover { display:block; height:12px; width:18px; border-left:#ec6e08 solid 1px; border-right:#ec6e08 solid 1px; background:#000; color:#FFF; text-decoration:none; }
.dot_select a:active { display:block; height:12px; width:18px; border-left:#ec6e08 solid 1px; border-right:#ec6e08 solid 1px; background:#FF0; color:#ec6e08; }
.dot_nummer { float:left; text-align:center; font-size:9px; cursor:pointer; }
.dot_nummer a:link,a:visited { display:block; height:12px; width:18px; border-left:#fff solid 1px; border-right:#fff solid 1px; background:#ec6e08; color:#000; }
.dot_nummer a:hover { display:block; height:12px; width:18px; border-left:#fff solid 1px; border-right:#fff solid 1px; background:#000; color:#FFF; text-decoration:none; }
.dot_nummer a:active { display:block; height:12px; width:18px; border-left:#fff solid 1px; border-right:#fff solid 1px; background:#fff; color:#000; }
.dot_left { float:left; cursor:pointer; }
.dot_left a:link,a:visited,a:active { display:block; height:12px; width:20px; background:url(images/dot-pijl-links.png) no-repeat; }
.dot_left a:hover { display:block; height:12px; width:20px; background:url(images/dot-pijl-links-black.png) no-repeat; }
.dot_left a:active { display:block; height:12px; width:20px; background:url(images/dot-pijl-links.png) no-repeat left; }
.dot_right { float:right; cursor:pointer; }
.dot_right a:link,a:visited,a:active{ display:block; height:12px; width:20px; background:url(images/dot-pijl-rechts.png) no-repeat; }
.dot_right a:hover { display:block; height:12px; width:20px; background:url(images/dot-pijl-rechts-black.png) no-repeat; }
.dot_right a:active { display:block; height:12px; width:19px; background:url(images/dot-pijl-rechts.png) no-repeat left; }
.bigprijs { position:relative; font-size:18px; color:#ec6e08; float:right; font-weight:bold; top:-2px; }
.artnr { font-size:9px; color:#ec6e08; }
.artnaam { font-size:12px; }

In dot_left / dot_right zitten background image als pijl.
In IE worden ze zomaar bijgepakt na mouseout (nadat ze geklikt zijn) als background image en dat gaat het niet goed. In FF heb ik al beetje gefixed met alleen "background:...."

De php deel luidt:

PHP:

<div class="site_inhoud_onder" id="slideshow_nav">
<div class="dot_pause" onclick="controlslide();" id="playbutton"></div>
<div class="dot_left" onclick="slideleft();"><a href="#"></a></div>
<div class="site_kader_buttonslide">
<div class="site_kader_buttonbody" id="buttonbody" style="width:<?=$dotwidth;?>px;">
<? for ($i=1;$i<=$countrows;$i++) { ?>
<div class="dot_nummer" id="dot_<?=$i;?>"><a href="#" onclick="jumpslide(<?=$i;?>);"><?=$i;?></a></div>
<? } ?>
</div>
</div>
<div class="dot_right" onclick="slideright();"><a href="#"></a></div>
</div>
<div class="clearfloat"></div>
</div>
<div class="site_kader_aanbieding"></div>
</div>

Kan ik iets aan veranderen zodat de storing in css in IE weg is? Heb ik iets teveel erin gedaan?
Een hulp is welkom om code in CSS iets beter te maken
Het is bedoeling dat de kleine buttons onderaan correct teruggaan naar normale state, en niet dat ze ineens anders gaan doen (neemt dus codedeel over van dot_left)

Alvast dank.

[Raynman]

MrDummy schreef op donderdag 13 oktober 2011 @ 16:50:
In dot_left / dot_right zitten background image als pijl.

Niet alleen in dot_left/dot_right. De lijst

code:

.dot_right a:link,a:visited,a:active

is niet hetzelfde als

code:

.dot_right a:link, .dot_right a:visited, .dot_right a:active

[MrDummy]

Moet je dus allemaal apart erbij zetten en niet simpelweg door komma's samengevat?

[Bosmonster]

Je scheidt selectors middels komma's. In jouw geval zijn dit dus de volgende selectors:

dot_right a:link,
a:visited,
a:active

Dingen een beetje structureren in je css-file ipv alles achter elkaar plempen heeft zo z'n voordelen voor het overzicht

[MrDummy]

Bedankt voor aanwijzen probleem.
Ik dacht eerst zo dat dot_right soort container vormt voor drie a: functies. Blijkt niet zo te zijn. De komma's zijn dus toch apart bedoeld en moet ik toch nog volledig maken.

Dingen een beetje structureren in je css-file ipv alles achter elkaar plempen heeft zo z'n voordelen voor het overzicht
Ik doe dat omdat het allemaal kort zijn en scheelt hoop scrollen met wiel. Dus beetje compressen.
Natuurlijk kun je gewoon onder elkaar doen, maar dat maakt wel langer omdat er zoveel groepen zijn

[ Voor 44% gewijzigd door MrDummy op 14-10-2011 00:19 ]

[Bosmonster]

Een CSS-file wordt nu eenmaal lang voor een site, daar doe je niet zoveel aan. Een goede editor kan je helpen bij het navigeren daarin. Je focust nu ook erg op de classnames, terwijl voor het overzicht de properties veel belangrijker zijn. Die bepalen je styling (en dus ook je bugs!) en daar is het overzicht nu helemaal weg. Helemaal als je niet een 24" scherm hebt om op te werken...

Het zijn precies dat soort structuur-, overzicht- en leesbaarheidsdingetjes die fouten voorkomen in code en het voor jezelf en anderen prettig werken maakt. Als ik gevraagd zou worden hierin een bug te fixen, dan ben ik onnodig 3x zo lang bezig dan als het netjes onder elkaar had gestaan (even negerende dat ik natuurlijk gewoon direct de auto-formatter eroverheen haal ).

ps Het is ook aan te raden om altijd element-type te definieren ipv alleen .classname te gebruiken. Nu zijn het bij jou alleen maar divs (das weer een ander probleem..), maar ook dat maakt het voor andere developers een stuk leesbaarder en vooral scanbaarder. (Ja dat kost je ongeveer 0,00001% performance, maar boeien )

[ Voor 21% gewijzigd door Bosmonster op 14-10-2011 08:22 ]

[tonyisgaaf]

MrDummy schreef op vrijdag 14 oktober 2011 @ 00:17:
Bedankt voor aanwijzen probleem.
Ik dacht eerst zo dat dot_right soort container vormt voor drie a: functies. Blijkt niet zo te zijn. De komma's zijn dus toch apart bedoeld en moet ik toch nog volledig maken.

Als je aan deze denkwijze wilt blijven vasthouden, kijk dan eens naar SCSS/SASS.