Previous Message
Next Message

Float left margin problem in 2 col layout in IE6 Win & IE5 Mac

Sent by Iain Donaldson (Mailing Lists) on 27 June 2004 14:02


On 22 Jun 2004, at 16:38, Zoe Gillenwater wrote:

> Iain Donaldson (Mailing Lists) wrote:
>
>> The site is at:
>> http://www.aroundthefringes.co.uk/
>> and the css is at:
>> http://www.aroundthefringes.co.uk/styles/ 
>> aroundthefringes.co.uk.css.php
>>
>> 1) in IE6 Win (all the time) the main content div doesn't sit snug  
>> against the leftnav div even though its margin-left is set to 147px  
>> which is the width of the leftnav. All padding is zeroed and I  
>> believe I've taken full account of box model differences between  
>> browsers for the width calculation of maincontent. Increasing this  
>> margin shifts the maincontent div right, decreasing it has no effect.  
>> I have read loads about IE margin problems with floats, but none of  
>> the described problems appear to accurately reflect what I have here.  
>> I have tried the display: inline hack on the leftnav (floated) to no  
>> avail. I guess I could absolutely position the divs, but can't see  
>> why this doesn't work properly. Works on Safari and Moz/Firefox and  
>> Opera.
>
>
> IE adds an extra three pixels of space between a float and following  
> content.  If the following content does not have a width, it shows up  
> as the text jog.  If it does have a width, it shows up a gap between  
> the blocks.  You need to give your left float a right margin 3 pixels  
> smaller than it should be for IE to get rid of the gap.  If you want  
> your margin to be 0, give it -3px.  You will also need to zero out any  
> left margin you have on the content you have to the right.  All this  
> is fed just to WinIE of course via the star html and Mac backslash  
> hacks.

Right - I was applying the margin change to the non floated div so that  
was why it was having no effect. Thanks for that - was sure it must be  
that simple!

>
>> 2) In IE6 Win (sometimes) the main content div is displaced until  
>> below the left nav div. This happens consistently on some Win98/IE6  
>> systems but not on Win2k/XP IE6 combinations. I think it is likely to  
>> be related to (1) but can't be sure.
>
>
> Yes, it probably is.  Those extra three pixels means everything can't  
> fit in the container, so something has to drop.

This was actually due to the browser window size causing the div to  
wrap below the float on some people's systems (with smaller monitors).  
I enclosed the whole page in a fixed width div and all is now OK.

>
>> 3) In IE5 Mac (always) there is a gap between the bottom of the  
>> leftnav and maincontent divs before the footer div. Reducing the  
>> padding/height of the maincontent div snugs the footer up to the  
>> leftnav div, implying the problem is with the maincontent div in some  
>> way.
>
>
> Can't help you there.

This is still a problem and in fact now seems to have started at the  
black menu bar div after I gave it a fixed height. Seems to be related  
to the fixed height I've given to the two divs in some way. Hmmm.

>
>> Any thought or help appreciated before i rip the whole layout up and  
>> start again.
>
>
> In NN7.1, your column of pictures sits right in the middle of your  
> content, instead of against the left side of the screen.  Your black  
> nav bar at the top is also mysteriously gone.

This was as the div didn't extend to the full height of the <p>  
elements inside. I added a clearing div which sorted out the spacing  
and then a fixed height which made the background show through.  
previously I had overflow: visible but NN7 doesn't seem to apply that  
to background images. em based fixed height sorted it out.

Thanks for pointing it out!

...Iain

>
> Zoe
>
> -- 
> Zoe M. Gillenwater
> Design Specialist
> Highway Safety Research Center
> http://www.hsrc.unc.edu
>
>
--
Iain Donaldson
[EMAIL-REMOVED]

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: