Ooo I'm the first! - Html/css link Q

[fobby]

I posted this in boards too, a few days ago, but I put it in an existing thread, so I guess it got lost in there .....



When I do the below, it looks good in Dreamweaver and in Firefox. When I test it in IE. 7, the links go back to being the default blue and change the position. Its as if IE is not reading the CSS for these links ??

<div class="contact"> <a href="contact.html" target="_self" class="contact">Contact</a></div>


.contact a:link {
position: absolute;
left: 450px;
top: 312px;
width: 72px;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
height: 28px;
font-weight: 900;
text-decoration: underline;
color: #FFFFFF;
}

 

[louie]

I posted this in boards too, a few days ago, but I put it in an existing thread, so I guess it got lost in there .....



When I do the below, it looks good in Dreamweaver and in Firefox. When I test it in IE. 7, the links go back to being the default blue and change the position. Its as if IE is not reading the CSS for these links ??

<div class="contact"> <a href="contact.html" target="_self" class="contact">Contact</a></div>


.contact a:link {
position: absolute;
left: 450px;
top: 312px;
width: 72px;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
height: 28px;
font-weight: 900;
text-decoration: underline;
color: #FFFFFF;
}

First of all you give the a tag the same css tag for no reason.

second: when you set a:link make sure you also have a:visited a:hover
try this

<div class="contact"> 
  <a href="contact.html">Contact</a>
</div>
 
 
.contact a:link,.contact a:visited, .contact a:hover {
    position: absolute;
    left: 450px;
    top: 312px;
    width: 72px;
    font-family: "Times New Roman", Times, serif;
    font-size: 10pt;
    height: 28px;
    font-weight: 900;
    text-decoration: underline;
    color: #FFFFFF;
}

 

[fobby]

Ok, thanks will try later ...

First of all you give the a tag the same css tag for no reason.

kinda lost me on this point though? Do I have to put .class a:link for all links in CSS or only when I'm using the hover/visted attributes ?


thanks for the help

 

[daviddoran]

What he's saying is your CSS ".contact a:link" will select all a:links under contact. However, if you assign "contact" to the link then IE doesn't find any links inside the link. (Hmm.. that's hard to explain)

Also, try not only setting a:link but also setting :visited,:active and :hover to cover all the bases.

 

[fobby]

ok, think I gota ya, will play around for a bit to make sure, thanks lads

 

[mneylon]

If you are running windows I'd highly recommend TopStyle - there's a "light" version which is 100% free

It helps make sense of a lot of the CSS options that are otherwise quite confusing

 

[gary.b]

Yep - it comes with HomeSite 5 < best thing to use for HTML.

 

[louie]

sorry man i have been very sick when i replied to you so didn't get a chance to explain it why and how, but i hope you got it and it worked out for you.