www.webdeveloper.com
Results 1 to 3 of 3

Thread: Ahh - what gives?

  1. #1
    Join Date
    Jul 2006
    Posts
    2

    Ahh - what gives?

    Grrr....

    I'm trying to redo the website for the office. I'm trying as hard as I can to use CSS positioning and div's instead of tables. As you can see by the screen shot, everything looks just right in IE, but when I looked at it in FireFox, it looks different. I'm not sure where to begin to fix this. Any suggestions?

    Screen Shot

    CSS

    HTML

    Thank you,

    Xy

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Your HTML:
    <div class="c4">
    <div class="c5">

    <p class="c2">Test Test</p>

    </div>
    </div>

    Nests c5 inside of c4. c4 and c5 are both 748px wide. And the class="c2" is also 748-px wide... (see CSS, below)


    Your CSS:
    div.c1 {margin-left: auto; margin-right: auto; width: 748px; }

    div.c2 {margin-left: auto; margin-right: auto; width: 748px; border: 2px solid #FF9900; } (which equals 752-px wide)

    div.c3 {margin-left: auto; margin-right: auto; padding: 6px; width: 748px; } (which equals 760-px wide)


    Therefore, you are putting a 760-pixel wide <p> inside of a 752-pixel DIV which is also inside of a 748-pixel DIV... (huh??) I see a problem here...

    If c1 is 748-pixels wide, make c5 be 100% (all that is available in it's container) and make c3 be 100% (again, all that is available in it's container). Stating defacto pixel width here is hurting you in compliant browsers. IE merely renders it the way that it thinks you wanted/intended it. Compliant browsers comply-as-written (ergo, why they are called "compliant")
    Last edited by WebJoel; 07-17-2006 at 07:00 PM.

  3. #3
    Join Date
    Jul 2006
    Posts
    2
    Thank you for that information - i never even noticed that - i'm still very new to CSS and HTML.

    Xy

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles