Firefox screwing with my style sheet margins!

Discussion in 'Firefox' started by Bill, Nov 14, 2005.

  1. Bill

    Bill Guest

    This page displays correctly in Internet Explorer, but not in Firefox:
    http://quarterbacks.org/test/margins1.htm

    In the #customB ul CSS declaration, IE understands the "width: 10em" statement. But
    Firefox is annoying in extending the <ul> style beyond the ID container for no apparent
    reason!

    Anybody got any clues as to how to fix this? I'd rather not have to build a separate
    style sheet for each browser.

    Thanks!

    Bill.
     
    Bill, Nov 14, 2005
    #1
    1. Advertisements

  2. Bill

    gwtc Guest

    Can't say for sure, but maybe this might help:
    http://validator.w3.org/check?uri=h...charset=(detect+automatically)&doctype=Inline
     
    gwtc, Nov 14, 2005
    #2
    1. Advertisements

  3. Bill

    Skratz Guest

    #customB ul {
    list-style: none;
    margin-left: 0em;
    margin-top: 0em;
    margin-right: 0em;
    margin-bottom: 0.5em;
    width: 9em;
    padding-left: 1em;
    padding-right: -1em;
    text-indent: -1em;
    background:#EEEEAA;

    you have width 10em and padding-left 1em, thats 11em. You have moved
    the content-box outside the elements borders by 1em.

    And your div is only 10em so you have shifted the content-box from the
    ul also outside the div.

    It is also possible to set padding-left to 0em and text-indent also to
    0em. That actualy makes more sense.

    Firefox also understands the width: 10em; but applies it to the
    content-box and not to the outher margin of the element like ie does.

    I don't know wich has the better logic ie's of firefoxes, or wich one is
    according to the w3c, but that is the way it is and nobody likes it.
     
    Skratz, Nov 14, 2005
    #3
  4. Bill

    Bill Guest

    Skratz, I tried it your way.

    It looked good in Firefox but bad in IE (you can look at the page again & check it).

    It seems that no matter what I do, I can't get IE, Firefox, and Opera to agree.

    From what I've been able to find out, when it comes to margins, IE and Netscape use a
    different style sheet standard compared to Firefox, and Opera also uses a different
    interpretation of margins

    I just fixed the problem by forcing Firefox to behave - I put the proper DOCTYPE in the
    header & now it plays nice.
     
    Bill, Nov 15, 2005
    #4
  5. Bill

    Bill Guest

    Scratch that - Firefox won't recognize the proper DOCTYPE.
     
    Bill, Nov 15, 2005
    #5
  6. Bill

    Skratz Guest

    * Line: 39 Context : #customBx ul
    Invalid number : padding-right -1.0 negative values are not allowed :
    -1em
    * Line: 47 Context : .SecHD1
    Property text-alignment doesn't exist : center

    #customB ul {
    list-style: none;
    margin-left: 0em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
    width: 10em;
    padding-left: 0em;
    padding-right: 0em;
    text-indent: 0em;
    background:#EEEEAA;
    }

    this gives me the same result in ie and ffx but opera still shows it
    wrong, but i think that is opera's fault. If everything is set to 0
    than it must be the same in all browsers, any browser that does it
    differently then must be wrong.
     
    Skratz, Nov 15, 2005
    #6
  7. Bill

    Jedi Fans Guest

    Firefox follows the W3C standard in this case, as should more recent NS
    builds [7.x+] as Mozilla was the basis of NS [so it uses Gecko].
    As to the DOCTYPE, you neglected to say what doctype you use... go for a
    strict one, html 4.01 strict if not xhtml 1.0/1.1 strict ;)
     
    Jedi Fans, Nov 15, 2005
    #7
  8. Bill

    Bill Guest

    Well, the first thing I've learned here is that I must place a DOCTYPE at the start of
    my web pages. Lazy for me not to do that. But I'm beginning to realize that Firefox & IE
    won't render the "TRANSITIONAL" DOCTYPEs in the same way - while IE will retain some of
    the "quirks mode" styles, Firefox stays with the standard.

    I would prefer to use one of
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    without a DTD link, the browser doesn't make another round trip.

    My next mission is to discover the difference between 4.0 and 4.01 - which one renders
    more consistently?
     
    Bill, Nov 15, 2005
    #8
  9. Bill

    Bill Guest

    Um, Skratz, that's the style sheet recommendation you gave me (I added an 'x' to the end
    so I could switch back & forth during testing)
    From what I've been reading, Opera isn't consistent with the standard - in some styles,
    they tried to go so very strict, that they reinterpreted the standard in ways nobody
    else has...
     
    Bill, Nov 15, 2005
    #9
  10. Bill

    Bill Guest

    O.K., I found a (conditional) solution that will allow me to keep one style sheet and
    make it work with doctype transitional.

    #customBstar ul {
    list-style: none;
    margin-left: 0em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
    * width: 10em;
    padding-left: 1em;
    padding-right: 0em;
    text-indent: -1em;
    background:#EEEEAA;
    }

    See the * in front of width? Only IE recognizes that declaration! Firefox properly
    ignores it. The page displays properly, using doctype transitional. Once I understood
    the "Internet Explorer Box Model Bug", I realized that the the only way I can get this
    to behave using a transitional doctype is to use conditional code.

    http://quarterbacks.org/test/margins1.htm
    See bottom of page.

    Can someone tell me how it looks in Opera?
     
    Bill, Nov 15, 2005
    #10
  11. Bill

    Jedi Fans Guest

    Without the dtd link you force IE into quirks mode, which is bad... if
    you use a doctype, it is better to specify a dtd to go with it, to avoid
    the quirks issue. It is better to use newest technologies, so if not the
    latest [xhtml 1.0/1.1] then HTML 4.01, see the link below for
    explanations of whats what
    <url: http://www.w3.org/MarkUp/>
     
    Jedi Fans, Nov 15, 2005
    #11
  12. Bill

    gwtc Guest

    Maybe, but I think IE will make (educated?) guesses as to what you
    want while FF doesn't.
     
    gwtc, Nov 15, 2005
    #12
  13. Looks pretty good in Opera, the main menu box is a little longer,
    vertically that is, but the border is working.

    Lee
     
    Leonidas Jones, Nov 16, 2005
    #13
  14. Bill

    Bill Guest

    Thanks!
     
    Bill, Nov 16, 2005
    #14
  15. Bill

    Bill Guest

    Everybody, thanks for your help!

    Bill.
     
    Bill, Nov 18, 2005
    #15
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.