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

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...

:)

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

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

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. :)

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 :)

Quote:

---

Originally Posted by Masetek

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. :)

Quote:

---

Originally Posted by MaxS

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/

Quote:

---

Originally Posted by SRTech

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

Code:

---

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.

Quote:

---

Originally Posted by Shyflower

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?

Quote:

---

Originally Posted by SRTech

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.

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