IE8 CSS issue on my theme

I'm having an issue with CSS on my site that I can't figure out. On ZippyGamer.com, everything looks perfect in Firefox, but IE has this issue:



So underneath the featured images, it's creating an extra space and pushing the text down as well.

Any ideas? Thanks for your help.

 

Hard to tell without seeing a link or seeing any code.

As a guess are you resetting the margins and paddings on everything?

As a test add:
*{margin:0;padding:0;}
To the very top of your stylesheet

 

My site can be accessed at: www.zippygamer.com

Yep, that's already there.

Here's the stylesheet:
http://www.zippygamer.com/wp-content/themes/Gamenow/style.css

 

Well, another example of issues that run a heck of a lot deeper than a spacing issue in IE8. First off all the comments that turdpress or the theme has saddled you with are likely to trip rendering errors in IE. Yes, I said COMMENTS. Both double render and/or disappearing content. So first, I'd strip all the redundant/useless comments.

I mean really:

<!-- Wrapper // -->
		<div class="wrapper">
			<!-- Header // -->
			<div class="header">
				<!-- Logo -->

Code (markup):

Hurr-durr!

Next, you have inline level elements where your doctype doesn't allow them, these can cause IE to make gaps in the damnedest places. That first anchor for example, move it inside the DIV after it, or better get rid of it and put the ID on that div, since ID is functionally identical to NAME for things like #top.

We also seem to have invalid forms, unclosed tags - here's a tip, clean up the 39 validation errors before sweating spacing issues.

Likewise, there is nothing on that page which should even warrant the use of IE conditionals, so strip all that malarkey clean out. That MOST CERTAINLY includes that BS message you are sending to IE6 users.

I'm seeing clearing div's, pointless redundant classes and excess wrappers... pretty much everything I've come to expect from a wordpress template and why it's a miracle any of them render worth a damn in any browser.

My advice? As our dearly departed friend Dan got me saying - Chuck it and start over by ripping out anything wordpress creates for markup and replace it with clean semantic markup, separation of presentation from content, etc, etc, etc...

 

I see. That makes a lot of sense. I had no idea IE freaks out about comments in certain cases... wow.

Looks like I'll have some work to do to clean up this theme.

Edit: UPDATE

Well I got the issue fixed.

I changed this line:

.ftop .featured li div {margin-top:1px;padding:5px;}

Code (markup):

To this:

.ftop .featured li div {margin-top:0px;padding-left:5px;padding-right:5px;}

Code (markup):

And it looks fine on IE now too. I lost a little padding but it still looks good to me. I'm still going to pursue fixing the validation errors and other stuff that came with this theme...

Thanks for your help, wd_2k6 and deathshadow. I appreciate your time.