Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Background image white space problem

positioned top left image has left margin space

12:39 am on Jan 17, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 10, 2006
votes: 0

The content part of the pages on a site I'm just re-designing has a tiny curve image in the top left corner. This image is to create a continuous flow from the left navigation bar to the top header area.

In Netscape it looks fine... but only 5% of visitors to the site use it ... In IE6 there is a gap of about 2 or 3 pixels on the left of the image. I've tried all sorts ... but nothing will shove the background image to the far left of the div.

Here is the CSS for the div

#main { position: relative;
margin-left: 180px;
padding-top: 10px;
padding-left: 20px;
padding-right: 0px;
padding-bottom: 10px;
background-position: top left;
background-repeat: no-repeat; }

... any ideas?
Screenshots available.

1:13 am on Jan 17, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0

Do you have something floated to the left of that
? You have a large
, and it's a 3px gap, so this looks like a job by the 3px text jog, a bug in IE 6 that adds 3px worth of space to anything sitting flush against the float (if your content extends beyond the float, you'll notice the 3px disappear.)

There's a fix for it to line up (with 3px extra,) but it sounds like you want it to sit flush and line up, so in that case the fix would be to either:

Float the

Pros: sits flush with little effort
Cons: yet another float that might push down if viewport isn't wide enough, width becomes 'auto' determined by size of content.

Use position absolute for the menu instead.
This abolishes the 3px text jog which only affects floats trying to sit flush against non-floats.
Pros: sits flush with little effort
Cons: if the content of the absolutely positioned section becomes vertically taller than the content that's sitting next to it, it can look funny.

Use Position is Everything's 3px gap fix.
Position is Everything on the 3px gap [positioniseverything.net]
This method I haven't tested out myself, though it sounds a bit... messy.

But you can decide which method you think is best ;)

2:50 pm on Jan 17, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 10, 2006
votes: 0

Thanks Setek, much appreciated ... I'm also pleased it's not just me going balmy!

Yes, there is a navigation menu floated left...

I tried floating the #main: OK in IE (Horay!) but in NSNav the #main div didn't start until below the left navigation div (and minus 20px to the left) probalby for the annoying reason NSNav seems to treat margins and padding differently to IE... I tried giving the #main a width less than the gap available... but that screws up in IE!

I tried using position absolute for the menu: It didn't give the desired effect in both browsers ... I was a bit fuzzy by now ... I can't remember what it did!

I looked at the Position is Everything hack: I'm sure it works fine, but only if you can have a margin-right: with a positive value on the left nav menu (instead of a margin-left on the #main). This means you can't make the image butt up against the left anyway!

So, I'm giving up ... no delicate little curve in the top of the #main div ... no-one will notice!