IE 7 and below a:link a:visited problems

[xtoverus1]

I have different div's with their own a:link,visited, hover attributes because some are text links and some are jpeg's I made in photoshop:

Example:

<div id="nav">
<ul>
<li><a href="http://blahblah:><img src="**"></a></li>
</ul>
</div>

<div id="info">
<p>blah <a href="http://blah"> hi </a></p>
</div>

In my style sheet I have different rules for both div's but IE7 and below seems to ignore them all together. FF3, safari and IE8 work just fine though. I have done some searching on google and there's alot of information on IE only style sheets and css hacks but I couldn't get it to work. If someone could help me out I'd really appreciate it.

(My XHTML and CSS have been validated on W3C)

[Mr. E. Cryptic]

Can you post your CSS?

[xtoverus1]

@charset "utf-8";
/* CSS Document */

body, html
{
margin: 0;
padding: 0;
font-family:Georgia, "Times New Roman", Times, serif;
line-height: 130%;
font-size:16px;
background-color: #fff;
}

/* site logo */
#header
{
height: 65px;
color: orange;
text-align: center;
margin: 0;
padding: 0;
position:relative;
}

#logo
{
margin: 10px 0 0 0;
padding: 0;
}

/* page container */
#container
{
width: 600px;
margin-left: auto;
margin-right: auto;
padding: 0;
height: 500px;
position: relative;
}

/* navigation menu */
#menu
{
padding: 0;
position: relative;
left: 130px;
width: 340px;
height: 40px;
}


#menu ul, li
{
list-style: none;
padding: 5px;
margin: 0;
float: left;
}

/* link actions */
a:link
{
text-decoration:none;
color: white; /* no border color around image links */
}

a:visited
{
color: white;
text-decoration: none;
}

a:hover
{
color: white;
text-decoration:none;
}

.spacer /* adds space between navigation menu pics */
{
padding: 10px;
}

#info /* main content */
{
position: relative;
left: 100px;
top: 20px;
padding: 0;
width: 380px;
height: 140px;
border: 2px dashed blue;
text-align:justify;
/* adds rounded corners for firefox and safari */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

#disclaimer
{
position: relative;
top: 10px;
left: 130px;
width: 340px;
}

/* link properties for disclaimer div */
#disclaimer a:link
{
color: blue;
text-decoration: none;
}

#disclaimer a:visited
{
color: orange;
text-decoration: none;
}

#disclaimer a:hover
{
color: orange;
text-decoration:none;
}

/*validated */
#valid
{
position:relative;
left: 150px;
top: 80px;
width: 300px;
height: 60px;
position: relative;
padding: 0;
margin: 5px 0 0 0;
}

[lystar]

EDIT: Sorry I posted this reply in the wrong thread. Came back from lunch and had two windows open... followed through on the wrong one.

[xtoverus1]

Lol no worries, thanks anyway

[lystar]

Is IE ignoring all of your a:hover attributes? Or just everything after the first?

Is it possible for you to provide a link to the affected page?

I have had issues with IE and styles for things nested within lists before.
Its probably a dumb suggestion, but what if you explicitly state in your css rules for ul a:hover?

[xtoverus1]

what IE 7 and below is doing, is ignoring all my a:link,:visited attributes. I have different ones for different div's.

a:hover isn't the problem ( i don't think). it's displaying the default a:link and a:visited attributes instead of the ones I define. although higher versions of IE and along with FF and safari have no problems.

I can't provide a link yet sorry.

[Mr. E. Cryptic]

I've just tried your css in IE6 and can't see a problem, a basic link is white (as per your stylesheet) in all states.

[xtoverus1]

I found the problem, IE 6 -7 needed a border="0" added to the <img> tag, it seems you don't have to do that in mozilla, safari etc.. Thx for the help though, I appreciate it.

[Mr. E. Cryptic]

Sorry, picked you up wrong - thought you were having problems with your text links. Yes, IE will by default add a border around an image that is a link, and you have the exact solution. Although, I would add it to your CSS rather than using the border="0" attribute in the img tags:

html img{border: 0;}