Hey, a layout for a site I'm creating is messed up in IE7 (In IE6 too, but frankly who cares)

 

It looks like this:

But the top and bottom of the DIV is supposed to be joined, not overlapped or far apart.

 

CSS:

#content {
padding:30px;
background:url(../layoutimages/content.png) repeat;
}

#content-top {
margin-top:10px;
height:10px;
}

#content-bottom  {
height:10px;
}

Got a link or live example?

 

My first guess would be, did you reset the styles to begin with?

 

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Was I meant to add the code on that page to my CSS? If so that didnt help

Live page http://tunevibez.com/new

I have found a fix, but I haven't found the root cause; add this AFTER the two stylesheet links in the html file:-

<!--[if IE]>
<style type="text/css">
#content { position: relative; margin-top: 5px;
padding:30px;
background:url(images/content.png) repeat;
}

#content-bottom  { 
 	height:10px;  	position: relative; margin-top: -5px;
}
</style>
<![endif]-->

Wickham: Just added the fix, but now in IE7, the content background image is not there?

Looks like you've got the bg image address wrong in your ie conditional statement

 

<!--[if IE 7]>
   <style type="text/css">
   #content { position: relative; margin-top: 5px;
           padding:30px;
           background:url(layoutimages/content.png) repeat;
   }

   #content-bottom  { 
           height:10px;    position: relative; margin-top: -5px;
   }
   </style>
 <![endif]-->

Haha, how did I not notice that, its all hunky dory now! Thanks guys!!

You need to add the 7 to you conditional statement so it doesn't cause a problem in ie8

You need to add the 7 to you conditional statement so it doesn't cause a problem in ie8

 

Ok thanks!

Also, can I add that statement to an external CSS right?

Sorry about the background image url, I changed it to suit my folder structure.

 

You have to add the conditional statement in the head section of the html file after any other styles or stylesheet links, not in a css file.

 

You may have to use the same conditional statement in IE8, I didn't test, because quite often these odd situations are applicable to all IE versions. Test IE8 with <!--[if lte IE 7]> which means less than or equal to IE7 and with my <!--[if IE]> which is for all IE.

Looks like you can fix this without the conditional stylesheet

 

remove the div and give the img an id

 

so

 

<div id="content-top">
 <img src="http://tunevibez.com/new/layoutimages/content-top.png" />
</div>    

 

becomes

 

 <img id="content-top" src="http://tunevibez.com/new/layoutimages/content-top.png" />

 

same for

<div id="content-bottom">
 <img src="http://tunevibez.com/new/layoutimages/content-bottom.png" />
</div>

 

becomes

 

<img id="content-bottom" src="http://tunevibez.com/new/layoutimages/content-bottom.png" />

 

And the in the css stylesheet just add display:block; to #content-top and #content-bottom