Comic Genesis Forums

Ok, so if you couldn't tell, IE is giving me trouble...as usual. You see, yesterday I made some updates to the site (as in I made all the navigation buttons, including the comic nav buttons as rollover images).

And it looks beautiful in Firefox and Opera.

However, in IE everything looks fine EXCEPT the comic nav buttons. They still show up just fine, but there is no rollover state when you...roll over them.

Is this just because of IE's inability to cache background images? I'm not sure.

Here is the snippet of code that features the problem:

<table width="300" border="0" bordercolor="#000000" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="58" bgcolor="#000000"><div id="firstday" align="left"><span class="style4">***first_day***</span></div></td>
<td width="51" bgcolor="#000000">
<div id="previousday" align="left"><span

class="style4">***previous_day***</span></div></td>

And here is the snippet of cooresponding CSS:

#firstday
{
display: block;

background: url("http://mintcondition.comicgenesis.com/w ... t_day3.png") no-repeat 0 0;

}


#firstday:hover
{

background-position: 0 -43px;

}


#previousday
{
display: block;

background: url("http://mintcondition.comicgenesis.com/w ... s_day3.png") no-repeat 0 0;

}


#previousday:hover
{

background-position: 0 -43px;

}

#nextday
{
display: block;
width: 51px;
height: 43px;
background: url("http://mintcondition.comicgenesis.com/w ... t_day3.png") no-repeat 0 0;

}


#nextday:hover
{

background-position: 0 -43px;

}

#lastday
{
display: block;
width: 58px;
height: 43px;
background: url("http://mintcondition.comicgenesis.com/w ... t_day3.png") no-repeat 0 0;

}


#lastday:hover
{

background-position: 0 -43px;

}

I experimented with placing the id inside of a link tag (like all the other buttons are in) and it worked just fine in IE, however if I wrap a link tag around ***first_day*** then all it does is cause that to be a link, and when I upload it to Comicgenesis, I end up with the BG rollover image on top (and linked to nothing) and the transparent GIF image I use as the actual nav button on bottom.

So that won't help. I know that the id can be placed within a div tag...like I said, the site looks fine on other browers, but I would like to know if there's a way I can edit it and have it compatible with all browers...I already had some issues with IE's inability to render CSS correctly, but I fixed them.

This one however is a stumper. I would like to keep my rollover buttons done with CSS before anyone suggests javascript. With CSS rollovers I don't have to worry about flickering while the browser loads the rollover state image, and I can have each button (both normal and rollover state) as one single image.

And I know this isn't CG's problem, but honestly I didn't know where else to go for help, so if anyone can help out, it would be greatly appreciated.