Problem with positioning a background image using CSS in IE

Hi,

I'm having a huge amount of problems getting by background image to line up. It looked fine in Firefox but in IE. I had a gap between my navigation div and my content div.

I believe it had something to do with overflow: hidden.

The layout of my site is basically
<div id="frame">
<div id="header"><img src="images/header.jpg" width="1000" height="115" alt="" /></div>
<div id="nav"></div>
<div id="wrap">
<div id="sidebarleft"></div>
<div id="sidebarright"></div>
<div id="contentwrap">
<p>Blah blah ...
etc

In IE I see a gap between "nav" and "wrap"

If I have this in my css file

#wrap {
width: 1000px;
height: 600px;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
background: url(images/background_lrg.jpg) no-repeat center;
padding: 0;
}

If I delete overflow: hidden then it looks fine in IE but creates a gap in firefox.

Please help.

My text also starts in a different position depending on the browser but that's another problem.

It's driving me mad. Any help on this would be appreciated.

Thanks,
Travis

 

It's difficult to tell the problem just from this description. If you can post a link, I can give you a better solution, but basically there's a dirty fix you can do:

Target IE specifically by doing:

* html #wrap {
rules go here
}

This way you can specify rules for IE without affecting firefox, and work something out.

 

The site is

http://www.indiyou.com.au

at the stylesheet is called style.css

Thanks,
Travis

 

ps.

I tried

#wrap {
overflow: hidden;
}

* html #wrap {overflow: inherit;}

and it didn't work

but

#wrap {
overflow: inherit;
}

fixes IE by itself.

Very weird stuff!

 

I would try what marinaroz suggested.

Add this:

* html #wrap {
overflow: visible;
}

--Edit-- Nevermind, you beat me posting.

 

Yeah but it doesn't work.

If I have no overflow statement IE works OK.

If I use the * html hack then it doesn't work.

I may be on the wrong track it may be a margin or padding problem but I thought I fixed all those.

 

Well, if nothing else you could make an IEFix.css file and use a conditional statement to call that file if the browser is NOT ie (that way it loads in FF, Safari, Opera, etc; since they are standards compliant they should all display the same). That way IE never sees the IEFix.css file (the one with the overflow:hidden; in it) and the rest of the browsers do. This is a worst-case scenario though.

I would look into padding/margin/float problems first.

 

I looked at the code. Interestingly, the problem in firefox seems to be triggered by the floats on sidebarleft and sidebarright. As soon as you take off even one of them, the problem will go away. Alternatively, you could put a float on contentwrap. That has potential to disrupt something else, though.

 

The problem is I'll need to add content into those sidebars at some point so I'll need to keep the floats in there.

It's strange that the * html IE hack isn't fixing the problem.

Is there something wrong with


* html #wrap {
overflow: visible;
}

 

No idea what the problem is, it's supposed to work. Just needs to be put after the original code so it overrides it.

 

I read something about it not working in IE7

I ended up using a separate css file for the IE Hacks

 

I just found people are still using older versions of MSIE so I added the * html hack as well.

I now found a new problem that is really weird.

For most browsers the site looks fine.
http://browsershots.org/screenshots/722fd430034799a231415159ab1f6fe8/

But in safari the main background image appears darker
http://browsershots.org/screenshots/6ebb1090f56b16b31406e81be153a6d0/

How weird is that!

Can anyone explain it?