Results 1 to 11 of 11

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

  1. #1
    Registered
    Join Date
    Mar 2006
    Posts
    350

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


  2. #2
    Registered Michael's Avatar
    Join Date
    Mar 2006
    Posts
    72
    Is it the navigation your having a problem with? That's the only part that I can see that is significantly different.

  3. #3
    Registered
    Join Date
    Mar 2006
    Posts
    350
    The alignment of the whole layout as well as the navigation.

  4. #4
    Registered Shyflower's Avatar
    Join Date
    Mar 2006
    Location
    Winona, MN
    Posts
    66
    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.
    Last edited by Shyflower; 03-12-2006 at 06:12 PM.
    Linda Jenkinson
    Shyflower.com
    Writing & Editorial Services for Web Businesses

  5. #5
    Working. Masetek's Avatar
    Join Date
    Aug 2005
    Location
    Aust
    Posts
    543
    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

  6. #6
    mPeror Mr.M's Avatar
    Join Date
    Mar 2006
    Posts
    11
    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.

  7. #7
    Registered
    Join Date
    Mar 2006
    Posts
    13
    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/

  8. #8
    Registered Shyflower's Avatar
    Join Date
    Mar 2006
    Location
    Winona, MN
    Posts
    66
    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.
    Linda Jenkinson
    Shyflower.com
    Writing & Editorial Services for Web Businesses

  9. #9
    Registered
    Join Date
    Mar 2006
    Posts
    13
    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?

  10. #10
    Registered Shyflower's Avatar
    Join Date
    Mar 2006
    Location
    Winona, MN
    Posts
    66
    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.
    Linda Jenkinson
    Shyflower.com
    Writing & Editorial Services for Web Businesses

  11. #11
    Registered
    Join Date
    Mar 2006
    Posts
    350
    Whoa! Thanks everyone. I'm sorry I didn't reply earlier. I got it all sorted out.

Similar Threads

  1. Certain site layout better for advertising?
    By deronsizemore in forum Advertising & Affiliate Programs
    Replies: 15
    Last Post: 10-12-2005, 01:18 AM
  2. New Ruthsarian CSS Layout
    By shim in forum HTML, CSS, Layout, and Design
    Replies: 12
    Last Post: 06-06-2005, 03:44 PM
  3. Football Site Layout
    By hayesb26 in forum User Owned Websites
    Replies: 4
    Last Post: 04-22-2004, 12:36 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •