Padding inconsistencies, can't scroll in IE, good practice?

Discussion in 'CSS' started by groover, Sep 10, 2006.

  1. #1
    Hi all,

    Thank you for taking the time to look at my post. Here is the design template for you to see: http://www.bymblack.com/clients/ghostdust/template.html

    It's a very basic layout which is why it irks me so much that these issues persist. Usually I outsource my CSS work but I thought it's about time I faced my fears so there may be some n00b related quirks I have overlooked.

    Please offer suggestions specifically as to why the following bugs occur and the correct way around them. I have read many approaches to some of these issues and I'm somewhat lost in a sea of information.

    Bug 1: In IE the page centers but in Firefox it's left aligned
    Bug 2: In Firefox the page scrolls when a lot of information is in the main content container however in IE it just cuts it off. I'm not talking about scrollbars on the DIV, I'm talking about the actual page scrollbars on the right of the browser.
    Bug 3: In both browsers the display is very inconsistent with what appears to be padding/margins. I've had to add top:-3px to get the left menu base (the rounded corner bit) to sit correctly because IE adds a generous gap between the DIVs

    But aside from these three bugs, I thought about the structural advantages of dividing the CSS into layout, typography, navigation, and colours then having default.css import them so I need only include default.css. I also added the menu title as hidden text + background image so that if someone has images disabled the site should degrade to text only.

    Please comment on whether I'm doing the right or wrong thing structurally as well as workarounds for these bugs. I really appreciate your opinions and help.

    Thanks,
    ~groover
     
    groover, Sep 10, 2006 IP
  2. groover

    groover Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Just came on to tell of the solution to the problem. I had

    *
    {
    postion:relative;
    }

    which caused IE to do some odd things. I removed this and adding the relative positioning only to the required elements.

    Furthermore the container DIV required this:

    margin: 20px auto 0 auto;

    to make it center in IE (apparently a well known quirk).

    Kudos to Suzy from webmasterworld for this assistance. I'm posting it here to hopefully assist others also.

    Cheers
    ~groover
     
    groover, Sep 10, 2006 IP