My images links have X's over them in IE...why?

[Zealot Of Lux]

I can't figure out why my image links in IE have X's in the upper left hand corner. First I thought it was because I used png's...but I use png's elsewhere on the site and they work fine. Then I thought it could be because I'm dropping in the images using css and the link in the html is 'empty'...check it out....

XHTML:

<div id="newslinks"> <a class="vidone" href="http://www.dionna.myxziex.com/water_pop1.php" target="_blank"></a> <a class="vidtwo" href="http://www.dionna.myxziex.com/water_pop2.php" target="_blank"></a> <a class="vidthree" href="http://www.dionna.myxziex.com/water_pop3.php" target="_blank"></a> <a class="vidfour" href="http://www.dionna.myxziex.com/water_pop4.php" target="_blank"></a> </div>

CSS:

.vidone, .vidtwo, .vidthree, .vidfour {
display: block;
height: 68px;
width: 100px;
border: solid 1px;
border-color: #07bf52;
margin-bottom: 8px;
}
.vidone:hover, .vidtwo:hover, .vidthree:hover, .vidfour:hover {
display: block;
height: 68px;
width: 100px;
border: solid 1px;
border-color: #07bf52;
margin-bottom: 8px;
}
.vidone {
background-image: url(images/vidwater1idle.png)
}
.vidone:hover {
background-image: url(images/vidwater1hov.png)
}
.vidtwo{
background-image: url(images/vidwater2idle.png)
}
.vidtwo:hover {
background-image: url(images/vidwater2hov.png)
}
.vidthree{
background-image: url(images/vidwater3idle.png)
}
.vidthree:hover {
background-image: url(images/vidwater3hov.png)
}
.vidfour{
background-image: url(images/vidwater4idle.png)
}
.vidfour:hover {
background-image: url(images/vidwater4hov.png)
}

I don't know...it has got to be something I am or am not doing...wish I could figure it out...

If anybody has any ideas let me know...here's the link to the page if you want to see for yourself:

Dionna: Life. Pure. Water.

[zumojuice]

well you can't use png on the web for a start, but the 'x' normally means your html is looking for the file, but can't find it.

[Mack]

well, thats kinda a false statement, you can use .png's on the web. You gotta hack it, but its possible.

[zumojuice]

well ok yes... but generally it's easier to stick to jpg/gif formats...

[LeadMagnet]

You don't have to hack anything... what do you mean? Unless you mean png with transparency in IE6?

[PR Design]

You're mis-linking your files, and as LeadMagnet said, you may encounter problems with transparency in <IE7 but that's not what's wrong here.

[Mack]

Originally Posted by LeadMagnet

You don't have to hack anything... what do you mean? Unless you mean png with transparency in IE6?

Yes, Transparency. i "assumed" thats why we were using pngs. Really if your not looking for transparency, use a jpg, or a gif even.

[Zealot Of Lux]

What do you mean by mis-linking? could you elaborate? I still haven't targeted the problem...

[tommylogic]

that means your link isn't pointing to the correct file... typically when it can't find the file, it gives you a red-x. Although I think your problem is in the png.. not displaying in IE. Try converting all your png's to gif's. and updating your links to reflect that change.

[PR Design]

Is it just IE that aren't showing?