Avatar billede newcoma Nybegynder
21. december 2007 - 09:32 Der er 13 kommentarer og
1 løsning

IE hoverfejl i overskriftbokse

Hej

Jeg har nogen overskriftbokse på mit site som nogen gange er klikbare. Desværre tager IE 6 klassen a:hover{color: #c43730; med.

Er der en bedre måde at gøre det på?

CSS
a{color: #000;text-decoration: none;}

a:hover{color: #c43730;}

.headlinedarkblue,.headlinelightkblue {
font-size:12px;
font-weight:bold;
color:#FFF;
padding:4px 0 3px 10px;
width:300px;
}

.headlinedarkblue a, .headlinelightkblue a{
display:block;
font-size:12px;
font-weight:bold;
color:#FFF;
width:300px;
}

.headlinedarkblue {
background-color:#00396d;

}

og HTML

<div class="headlinedarkblue">
<a href="#">Example</a>
</div>

<div class="headlinedarkblue">
Example
</div>

Link til eksempel

http://racingmedia.dk/testlink.html
Avatar billede jokkejensen Novice
21. december 2007 - 10:54 #1
.headlinedarkblue a, .headlinelightkblue a{
display:block;
font-size:12px;
font-weight:bold;
color:#FFF;
width:300px;
}

/*Tilføjes under*/
.headlinedarkblue a:hover
{
color: white;
}
Avatar billede newcoma Nybegynder
23. december 2007 - 22:05 #2
OK men så skal jeg lave en .headlinedarkblue a, .headlinedarkblue og .headlinedarkblue a:hover klasse for hver overskriftbokc og der bliver mellem 20-30 stk!! Er der ikke en bedre måde at organisere det på?
Avatar billede roenving Novice
25. december 2007 - 01:02 #3
Måske

div a:hover ?-)
Avatar billede newcoma Nybegynder
27. december 2007 - 10:08 #4
Det tror jeg kommer til at påvirke andre steder på sitet. Andre forslag?
Avatar billede w13 Novice
27. december 2007 - 11:34 #5
Du skal da ikke lave en .headlinedarkblue a, .headlinelightblue a og .headlinedarkblue a:hover klasse for hver overskriftsboks.

Du skriver, som jokkejensen skriver, ét sted i din css-fil, og så gælder det for alle overskriftsboksene, hvis blot de er opbygget som i dit eksempel.
Avatar billede newcoma Nybegynder
27. december 2007 - 12:02 #6
men det jeg mener er at hvis jeg har forskellige overskrifter med varierende baggrundsfarve, skal alle disse have defineret en hover
Avatar billede w13 Novice
27. december 2007 - 12:23 #7
Jaeh, du må lave en for hver variant, desværre. CSS er letteste løsning der.
Avatar billede olebole Juniormester
04. januar 2008 - 14:06 #8
<ole>

Du kan jo godt skrive to klasser på hvert element:

<div class="headline blue">
<a href="#">Example</a>
</div>

<div class="headline lightblue">
<a href="#">Example</a>
</div>

<div class="headline darkblue">
<a href="#">Example</a>
</div>

Så knytter du hover'en til klassen 'headline' og baggrundsfarven til den anden klasse

/mvh
</bole>
Avatar billede newcoma Nybegynder
04. januar 2008 - 14:12 #9
Ja det er egentlig smartere. Det tror jeg at jeg gør. En anden ting er at teksten står lidt for højt i FF. Kan man gøre noget ved det?
Avatar billede olebole Juniormester
04. januar 2008 - 14:15 #10
Ja, du kan lave dem ens i begge browsere (og det er IE, der fejler):

<div class="headline blue">
<a href="#">Example</a></div>

<div class="headline lightblue">
<a href="#">Example</a></div>

<div class="headline darkblue">
<a href="#">Example</a></div>

Derefter kan du rode lidt med padding-top og/eller padding-bottom på div-elementerne
Avatar billede newcoma Nybegynder
04. januar 2008 - 14:29 #11
Det er lige præcis det der er problemet. Lige meget hvilken padding den får står den lidt lavere i IE..
Avatar billede olebole Juniormester
06. januar 2008 - 23:36 #12
Du kan prøve noget à la:

.headline a {
    line-height: 1.2;
}
Avatar billede newcoma Nybegynder
10. juli 2008 - 21:08 #13
Smid et svar
Avatar billede olebole Juniormester
11. juli 2008 - 00:41 #14
*griiiiiiiiiiiiiiiiiiib*  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester