Ouch...My layout is completely messed up in IE!

[MaxS]

I haven't coded in CSS/XHTML in awhile..So give me a break :)

http://talkthis.com/a/index.html

I thought I was doing well but once I checked it in IE, I noticed it was basically completely broken...It's a simple layout yet IE doesn't display it properly, or I didn't code it well.

Could someone please help me out here...

:)

[Michael]

Is it the navigation your having a problem with? That's the only part that I can see that is significantly different.

[MaxS]

The alignment of the whole layout as well as the navigation.

[Shyflower]

First of all, you declared a margin 0 at the top of your css but later you have right and left margins set to auto. Although I'm not sure how large "auto" is, I know it isn't 0. Therefore, that's probably why your wrapper is inset from your header and banner, etc.

You also have declared borders, margins and other 0 elements as 0px. You don't need the px and I think that may be part of the problem you see in IE.

Another thing I noticed is that you are using px for everything. You would be better off using ems and percentages in many instances.

By the way, I made these observations at your site index. The link you left didn't work. :)

[Masetek]

Page doesn't load for me...

As far as the problems go, get used to it. I design every site and test it with firefox, then before I launch, test with IE and spend ages fixing dozens of bugs.

Once you've done a few sites you come to learn ways to code for both :)

[Mr.M]

As far as the problems go, get used to it. I design every site and test it with firefox, then before I launch, test with IE and spend ages fixing dozens of bugs.Well, you should keep checking your design in both browsers AS you're coding it not AFTER. This way, fixing IE bugs will be much easier\faster. :)

[SRTech]

The alignment of the whole layout as well as the navigation.

Well, the page is giving me a 404, but I am guessing from the talk here, that you may need to put "text-align: center" in the body (or other top level) because IE does not obey the margin-left/right: auto; Then you can align the text left in a sub element.

Shyflower: "margin-right: auto; margin-left: auto" aligns an element in the center of the page/box in browsers like FF. Here is a page explaining it:
http://www.maxdesign.com.au/presentation/center/

[Shyflower]

Shyflower: "margin-right: auto; margin-left: auto" aligns an element in the center of the page/box in browsers like FF. Here is a page explaining it:
http://www.maxdesign.com.au/presentation/center/

Thanks heaps, but I know what margin-left and margin-right auto does. However, the way to align in the center in css is to do


body {
margin: 0 auto;
text-align: center;}

#container{
margin: 0 auto;
text-align: left;
}

If you set all body margins to 0 and then put an element outside your container (like a banner or header), the element inside your container will be inset, which is the problem I saw at MaxS's home page.

[SRTech]

If you set all body margins to 0 and then put an element outside your container (like a banner or header), the element inside your container will be inset, which is the problem I saw at MaxS's home page.
Hmm... I think I have run into this problem before. Thanks for explaining how to fix it. Is this an IE thing, or the proper behaviour?

[Shyflower]

Hmm... I think I have run into this problem before. Thanks for explaining how to fix it. Is this an IE thing, or the proper behaviour?

Sorry, I don't remember if it was in IE only, but if your don't use the right-left auto for your body, you will have the devil to pay to get Firefox to align in the center of the page.

[MaxS]

Whoa! Thanks everyone. I'm sorry I didn't reply earlier. I got it all sorted out.