homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Background image white space problem
positioned top left image has left margin space
RedTCat




msg:3221671
 12:39 am on Jan 17, 2007 (gmt 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-image:url('../images/style/er_tlc20.jpg');
background-position: top left;
background-repeat: no-repeat; }

... any ideas?
Screenshots available.

 

Setek




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

Do you have something floated to the left of that
#main? You have a large margin-left, 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 #main also.
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 ;)

RedTCat




msg:3222253
 2:50 pm on Jan 17, 2007 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved