11 replies [Last post]
ally_n
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2006-03-05
Posts: 10
Points: 0

Please excuse the div-i-tus and the css coding techniques. I am new to CSS and working my way to learning more of it for CSS layouts.

I was hoping someone could shade some light on the problem I am having. I am not sure whether its the way I have layed out the page or something else. I have tried all the things I can think of to resolve the issue shy of trying to re-design my layout.

The layout as I would like it (minus the heading placement) can be seen through Firefox.

Through IE6 you will notice that the text/paragraphs are pushed to the bottom with alot of white space above. I am not sure what is causing this.

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

The CSS for the above webpage: http://www.anom.ca/v.2/css/globalanom.css

Any help would be greatly appreciated.

Ally

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Remove width from

Remove width from #content_wrapper

ally_n
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2006-03-05
Posts: 10
Points: 0

Thankyou DanA. Your help is

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

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 30 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

I don't exactly remember but

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.

ally_n
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2006-03-05
Posts: 10
Points: 0

Thanks DanA. Any ideas as

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 1 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Not tested. IE improperly

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ally_n
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2006-03-05
Posts: 10
Points: 0

Thanks kk5st and good point.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 1 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

You're seeing the same

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ally_n
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2006-03-05
Posts: 10
Points: 0

Thanks kk5st. By removing

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 Smile

Thanks again for all your help.

Ally

ally_n
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2006-03-05
Posts: 10
Points: 0

So after creating a new CSS

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 1 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

I see no particular

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

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ally_n
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2006-03-05
Posts: 10
Points: 0

The paragraphs are not

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 Smile

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

Thanks for all your help and keep up the good work Smile

cheers,

Ally