Good day, to stackoverflow community. I have run into a bug with regard to html, css and Internet Explorer.
Styled tags are used as a filter of sorts. They look and act like buttons, the functionality works fine on Chrome and Mozilla but graphical errors appear once these tags are clicked on IE.
On IE9 the background div leaks into the images of the styled tags (after much testing I found that this was caused by the Layout values offset changing once the item has been clicked.)
On IE8 and IE7 the tags simply disappear completely once clicked, It will run the onclick process and finnish running it (we change the class=”” attribute to change appearance on click and hover according to the css) but after that completes it simply removes the visual element completely on the front end (according to layout the width and height are both changed to 0 and the margin values are changed to auto). P.S. only the clicked element is affected.
2 tag examples of the affected elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a id="virginActiveTag" class="vaOff" href="#" onclick="tagClick('virginActiveTag')"></a>
<a id="laFitnessTag" class="lafOn" href="#" onclick="tagClick('laFitnessTag')"></a>
</body>
</html>
Example of styling for one of the elements.
a.vaOn:link {margin:0 10px 10px 0px;display:inline-block;width:200px;height:95px;background:#fff url(../images/logos_va_on.gif) no-repeat 0 -8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 5px 5px #5c822a;-webkit-box-shadow: 0 0 5px 5px#5c822a;box-shadow: 0 0 5px 5px #5c822a;}
a.vaOff:link {margin:0 10px 10px 0px;display:inline-block;width:200px;height:95px;background:#fff url(../images/logos_va_on.gif) no-repeat 0 -110px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
a.vaOff:hover {background:#fffffe url(../images/logos_va_on.gif) no-repeat 0 -8px;}
Link to finalized site: http://pru-partnerfinder.appspot.com/
I believe that it has something to do with the hasLayout property that IE allocates to certain elements. But am not completely sure. I have tried to physically hard code the elements back to their original sizes in the onclick event but it does not accept the new values and only the margin in ie8 gets set properly.
Thanks for any help beforehand. I’m simply at stumped, could anyone assist?
HasLayout is gone in IE8 and above (but you can trigger it by putting IE into Quirks Mode or IE7 compat or whatever…): http://msdn.microsoft.com/en-us/library/ff405844(v=vs.85).aspx
Are you triggering Quirks Mode or similar?
Can you fix your problem if you style a straight element instead of a pseudo-class? IE was rather famous for getting itchy about changing display states between pseudo-classes. Besides, once an anchor’s been clicked, it’s not :link anymore, it’s :visited, and styling the element itself naturally extends to :link, :visited etc. Then :hover, :active and :focus only need to override “a”.
This sets a base on the elements themselves: display state (inline-block, for whatever that’s worth in IE7), width and height. If IE6 and absolute positioning were involved then you’d have to just suck it up and re-state the heights again on :hover, but you didn’t mention that one.
What I’m saying is, at least in older IE (6, 7) where you set your dimensions and display states mattered, so if you try this style of setup, does the problem go away or change?
IE8 and 9 make this interesting, because neither had Layout anymore and neither were quite so picky about where you stated display states.