PDA

Click to See Complete Forum and Search --> : Links problems with IE



ced--ced
11-23-2006, 09:29 AM
Hi, Please have a look at the website Iím currently working on www.theminnesotafats.com/uig. I have two problems with it that appear with IE but not FF:

1. On the left nav bar, I put a green background when you rollover. After having click on it, I want that the buttons remain the same with this green background appearing when you rollover. The problem is in IE, after having clicked on any button, the green doesnít show up anymore when you rollover.
Hereís my code:

#navbar a:link, #navbar a:visited {
display: block;
padding: 3px 0 3px 0;
background-color: transparent;
color: #000000;
text-decoration: none;
}
#navbar a:hover {
display: block;
padding: 3px 0 3px 0;
background-color: #003300;
color: #FFFFFF;
background-color: #013302;
text-decoration: none;
}

2. Second problem and quite similar and still only with IE. If you go to the products page, you will have 3 tabs above the content. Iíve set it up in a way that itís never underlined. However, in IE(!), the text is underlined after visiting the pages.
Hereís the code:
#tabs a:link, #navbar a:visited {
background-color: transparent;
text-decoration: none;
}
#tabs a:hover {
background-color: transparent;
color: #013302;
font-weight: bold;
text-decoration: none;

If you have any idea, please advise! Thanks

catbert303
11-23-2006, 10:05 AM
Hi,

for the first problem if you don't want the visited state to appear an differently to the normal links you could simplify things like this,


#navbar a {
display: block;
padding: 3px 0 3px 0;
background-color: transparent;
color: #000000;
text-decoration: none;
}
#navbar a:hover {
color: #FFFFFF;
background-color: #013302;
}

if you want to keep the different a:link and a:visited selectors you could try making your :hover selector more specific, something like this,


#navbar ul a:hover {
color: #FFFFFF;
background-color: #013302;
}

Again with the 2nd problem try replacing the specific selectors for a:link and a:visited with just a



#tabs a {
background-color: transparent;
text-decoration: none;
}
#tabs a:hover {
background-color: transparent;
color: #013302;
font-weight: bold;
text-decoration: none;
}

ced--ced
11-24-2006, 09:07 AM
:thumbsup: That works great thanks!!!