I Know This Is Hard to Believe…

You know, there are times when I hate IE. I mean, I hate IE in general, but there are times when I REALLY hate I.E. I’m doing a freelance site that has gone one forever and a day, but I’m 99.5% done now – and have found an error that is really pissing me off.

I have a right-column DIV that I use for images, quotes, etc. The right column div has a section of 3 sub-divs within it which in turn have background images to create a fancy-schmancy box:


/* CSS */
#rtcolboxtop {
position:relative;
background-image:url(images/callbox_top.gif);
background-repeat:no-repeat;
background-position:top left;
width:250px;
text-align:center;
}
#rtcolbox {
background-image:url(images/callbox_sides.gif);
background-repeat:repeat-y;
background-position:top left;
width:250px;
text-align:center;
}
#rtcolboxbottom {
background-image:url(images/callbox_bottom.gif);
background-repeat:no-repeat;
background-position:bottom left;
width:250px;
text-align:center;
}

In Firefox, everything is hunky-dorey, but in IE6 when you hover over the link, the whole middle section (#rtcolbox) shifts over:

After a series of tweaks to find out where the problem lay, I figured out it was this two lines of code in the CSS:

a.linkage:link, a.linkage:visited {text-decoration:none;
color:#369;
font-weight:bold;
border-bottom:1px solid #79A0C7;}
a.linkage:hover, a.linkage:active {text-decoration:none;
color:#369;
font-weight:bold;
border-bottom:1px solid #336699;}

In particular, it was the a.linkage:hover state border-bottom color change that was causing the problem; if the color stayed the same as the link and visited states, then everthing was great. But switch the color and the shift occurred.

I’ve found a lot of people mentioning similar things, including this post and the Holly Hack, but none of the solutions proposed seemed to help. In the end, I just used the * html selector hack to give IE the same color bottom-border, and better browsers the changing color.

What bugs me (no pun intended) is just why the heck this is happening and how do I stop it without having to write special code for IE (which is the client’s preferred browser, unfortunately).

Facebooktwitter

Leave a Reply