Msg#: 3221669 posted 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.
Msg#: 3221669 posted 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:
#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.
Msg#: 3221669 posted 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!