Whats Wrong With The CSS ?

Hi,

I am having a problem on one of my site "www.aafrin.com".
The site loads correcttly on chrome, firefox and IE 8 but on IE 7 and below it has problem.

IN IE 7 the content div is loaded on the bottom of the page leaving empty space on the top of the page.

Can anyone let me know, whats the problem and how to fix it ?

Update: taken down the skin to fix the css problem/errors pointed by deathshadow.

 

Try adding overflow:hidden or auto and/or add display:block to the div.

 

Being that I'm seeing different rendering in IE6, 7, 8, Opera, Safari and Firefox - lord only knows which one is correct... That running the markup past the validator makes it throw up it's hands and walk away saying "I can't work with that"... It all adds up to "throw it out and start over".

Peeking under the hood we can see why... Not only does it have the trash markup one typically expects out of turdpress when it hasn't been gutted, it's knee deep in tag abuse, pointless bloated scripting, static functions inlined in the markup, and to really make it horrid stuff that should get you slapped down and de-indexed by the search engines!

Without the right markup, worrying about the CSS is silly, pointless and probably explains why you are even TRYING to send different CSS to IE7/earlier for no good reason; Since there's NOTHING on that page which should warrant that IE conditional nonsense.

I mean, it's bad...

<div id="clear">
<div class="clear">
<a href="#">English</a>
<a href="#">English</a>
<a href="#">English</a>
</div>
</div>

Code (markup):

Descriptive - that this content doesn't even show up on the page in any way, shape or form this isn't just wasted code, it's also content cloaking. Bye-bye google SERPS.

<div class="">

Code (markup):

If it doesn't have a class, you probably don't even need a div - you certainly don't need to say 'class' on it.

<div id="navpanel">
<ul class="red">
	

	
	<li><a title="RSS" href="http://www.aafrin.com"><span>Home</span></a></li> 	
	<li><a title="RSS" href="http://www.aafrin.com/about-aafrin/"><span>About Aafrin</span></a></li> 
	<li><a title="RSS" href="http://www.aafrin.com/write-here/"><span>Write Here</span></a></li> 
	<li><a title="RSS" href="http://www.aafrin.com/advertise-here/"><span>Advertise Here</span></a></li> 
	<li><a title="RSS" href="http://www.aafrin.com/contact-us/"><span>Contact Us</span></a></li> 	

	<!--
	<li><a href="#" title="home" class="current"><span>Home</span></a></li>
	-->
	</ul>
</div>

Code (markup):

From the page styling there is no reason to have the div around it, that 'red' class is presentational at which point one has to ask why are you even bothering with CSS and a modern doctype, the title attributes are completely inappropriate to what the links are, and frankly you shouldn't need title since you've got meaningful text inside the links!

	<div id="sidebarR">
		
	<div id="sideItem">
	<a class="sMaroon">SEARCH</a><a class="sBlack">ENGINE</a>
			
	<form method="get" id="searchform" action="http://www.aafrin.com/">
<div class="search">
	<input type="text" value="" name="s" id="s" size="30" />
	<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>	
			
	</div>

Code (markup):

Perfectly good FORM and DIV inside the form, what do you need #sideItem for? No labels so it's an accessibility /FAIL/ - and then there's the anchors...

Which... What the !!!

See, the only reason to use an anchor is for the name attribute for internal linking - which you shouldn't do now that we have ID's, and for linking using href... You are doing neither and as such anchor is completely the wrong tag for damned near every time you use the PRESENATIONAL sMaroon and sBlack classes. Those are HEADINGS... Headings? Don't we have TAGS for headings? Pretty much every single one of those sMaroon and sBlack pairings should probably be:

<h2>Search<span>Engine</span></h2>

Which would provide ALL the hooks you need to apply your colors.

It gets even worse when we start seeing tags like CENTER with imagemaps - both outdated techniques that have no place on any website written after 2001.

Then there's the DIV's around the images for no reason, div around the morelink for no reason, metadata as a paragraph when it's non-flow text, UTF-8 characters when your server is apparantly sending the site as ISO-8859-1 (there's where the validator bombs!), and I'm not 100% sure but I think you miss closing at least two div after the content area... and frankly given the crap in the side-bar's 'importance' to the rest of the document, I'd swap that to a content first layout.

.. oh, and turdpress' automatically inserted comments like <!-- footer starts --> aren't just retarded (I had no idea that's what <div id="footer"> meant!) given your lack of a faux-column type wrapper around your floats is probably tripping rendering bugs in IE (all versions) like dissapearing content and double-render.

Yes, it's that bad.

 

Thank you so much for your comment.
I din expect to see detailed explanation like this
I am still fixing some issue on the wordpress.
once again thanks