Can't figure out an IE8 solution

HTML & CSS
1

Here’s the page: http://dp14.dnpstudio.com/

See the tabbed Comments/Posts/Tags in the sidebar?

If you view it in IE8, (mozilla, webkit, IE9 are all fine) the tabbed nav items are all overlapped by the element containing the background corner image. It is only overlapped when the page first loads or when you click to another tab - the first time you hover over one of the pink/non-active tabs, the overlap goes away.

I’ve tried everything I can think of. Z-indexes, overflow:hidden on the element covering it up. IE8 refuses to play nice.

Anyone have a suggestion?

Thanks

2

Did you get it sorted? The reason I’m asking is it’s identical here in Opera/FF as it is to IE8…

Though the page itself is a disaster in terms of accessibility with the absurdly undersized fixed metric (aka px) fonts and color contrasts (pink on white) far below what’s legible for most people… and of course the fixed width layout and annoying animation that leaves a lot of people out in the cold… and that’s before we talk about the code which is more 1998 than 2012. The heading orders are gibberish, (almost every H3 you have should be a H2), paragraphs around non-paragraph elements, endless classes on elements that shouldn’t need classes, static scripting inlined in the markup, presentational use of the style attribute, elements that have no business in a website written after 1998 like TARGET – It’s no wonder you end up with 191k of ‘documents’ for a mere 7.5k of plaintext – easily ten to fifteen times as much HTML as should be used to build such a simple site!

… and that’s before we talk the 79k of CSS in 8 files (FOR WHAT?), and unbelievable 491k of javascript (FOR WHAT?!?)… megabyte plus page load on a page that only has less than 8k of plaintext, 295k of images and no objects pretty much means pitch it in the trash and start over before it bankrupts you on hosting costs.

ASSUMING it actually gets visitors, which I would expect more bounce than retention.

Admittedly, most of that is par for the course with a wordpress skin that has so much facebook code slapped on it.

3

Thanks for the comments - it’s a Wordpress site with Thesis theme.

Nope it is not sorted out yet. Can’t get anything to work in IE8. Might have to ditch the triangle thing and go for another approach entirely. Still, I just have a feeling there has to be some tweak to get IE8 to understand what to do…

4

The drop-down triangle shouldn’t be that hard – but I’d suggest maybe adding it as a dummy span and absolute positioning it off the bottom, rather than trying to use your existing elements to build it. You trip haslayout on the parent numbered heading, that would/should/could work all the way back to IE 5.5


<h3>About Us<span></span></h3>



h3 {
	position:relative;
	zoom:1; /* trip haslayout, make IE behave on APo child. */
	background:#000;
}

h3 span {
	position:absolute;
	bottom:-24px;
	left:0;
	width:24px;
	height:25px; /* 1 extra PX overlap to account for FF being a retard about what bottom means */
	background:url(images/cutout.png) 0 0 no-repeat;
}

That way if the H3 needs to text-wrap it can still expand, and your cutout will appear as appropriate…