[Solved] Please help with alignment/layout problem between IE6 and Firefox

Remove width from #content_wrapper

Thankyou DanA. Your help is very much appreciated.

That fixed the problem.

Would you mind explaining why the width in #content_wrapper was creating the problem in IE6?

Thanks.

Ally

I don't exactly remember but generally (without setting other properties), in IE, the box will expand to accommodate the width of the content.
Your container (not floated) was 728px, your navigation 151px so the maximum width would be 577px-3px (wrongly addded by ie6)=574px for #content_wrapper, more than that and IE pushes the content down.

Thanks DanA.

Any ideas as to why there is the difference in spacing of the "heading" between IE6 and Firefox?

As you can see there is alot more whitespace above and below the "heading" in Firefox and hardly any whitespace in IE6.

Your help is greatly appreciated.

Thanks.

Ally

Not tested.

IE improperly collapses margins in elements with hasLayout. Since floats, in IE land, have layout, the margins are messed. Why float the h1? Leave it alone other than a margin-left as large or larger than the float column to its left, and the problem goes away.

cheers,

gary

Thanks kk5st and good point. I do not need to float the h1. I removed the float and it appears to have fixed the spacing issue. Although the spacing above and below the h1 seems to be incosistant, I believe it should be the same amout of spacing for an h1.

I added a margin-left to align the "heading" - h1 with the paragraphs however it seems that the margin is different in IE6. In Firefox it appears to align the h1 correctly.

I am wondering if this is related to the hasLayout problem you mentioned but I didn't find a reference to something like this, maybe I didn't fully understand it.

May I ask for your assistance again in helping me understand and fix the problem.

Thanks.

Ally

You're seeing the same effect here:

#content_wrapper p 
{
margin-top: 0;
margin-bottom: 0;
	float: right;
	width: 546px;
	padding-right: 10px;
}

Setting width is one of the triggers, along with float, for hasLayout.

cheers,

gary

Thanks kk5st.

By removing the width of the #content_wrapper p, the paragraphs are pushed down and do not align to the right of the "nav".

I think I will start from scratch with my css. I am have having a very difficult time trying to adjust the CSS the way it is right now. One element fix breaks another element in the layout creating more confusion on my part.

This time I will try ensure that I do not trigger hasLayout

Thanks again for all your help.

Ally

So after creating a new CSS for my webpage, I have overcome all of the problems I was having before.

However, if you will notice that the left alignment of the paragraphs is slightly different in IE6. In Firefox it is as I would like to have it.

Any ideas?

The webpage in question: http://www.anom.ca/v.2/test.shtml

The CSS is embedded within the webpage.

Thanks.

Ally

I see no particular differences beyond reasonable rendering issues. Unless you can be more specific, I wouldn't worry about it.

cheers,

gary

The paragraphs are not aligned on the left with the "anom.ca" in IE6.

I realize that since "anom.ca" is an image and its not always possible to align the text with an image. I thought there may be a margin or padding somewhere that I overlooked.

Its the perfectionist in me

But yes, I have now come to peace with it.

Thanks for all your help and keep up the good work

cheers,

Ally