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.