Just today learned that one of my websites, TwitPeek.net, is not rendering properly in IE8 outside of "Compatibility Mode". The site works fine in IE7.
Upon some investigation, it appears that IE8 is refusing to apply the page stylesheets to the anchor and img tags that the page's javascript generates. Because of this, none of the script.aculo.us animations display properly, the images aren't set to a uniform size, and all margins are completely ignored.
Basically the page looks like crap.
This has to be an IE8 bug, but is there something I can do to work around it besides using the compatibility mode meta tag?
EDIT: Problem solved. IE8 wasn't processing the class attribute on the new DOMElement. Had to set className instead.
have you seen this in your source-code?
<body id="index;" >
i doubt it has anything to do w/IE8 and more to do w/your HTML...
EDIT I think your error is here:
#FeedList>div>a.item>img { <------------
border:0;
width:140px;
height:140px;
-webkit-box-shadow:0px 2px 7px black; <--------
}
maybe try:
#FeedList div a.item img {
border:0;
width:140px;
height:140px;
}
to see what it does... also, please post the generated HTML... you may be having problems with malformed HTML also.
PS: I also get the following JS error:
Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; Zune 3.0; .NET CLR 3.5.30729; .NET CLR 3.0.30618; Tablet PC 2.0) Timestamp: Sat, 25 Jul 2009 04:13:00 UTC Message: 'console' is undefined Line: 21 Char: 41 Code: 0 URI: http://www.twitpeek.net/js/twitpeek.js