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

  2. Bill

    gwtc Guest

    Bill wrote:

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

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

  3. Bill

    Skratz Guest

    Bill wrote:
    > 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.
    >

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

    "Skratz" wrote...
    > 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.


    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

    "Bill" wrote...
    > I just fixed the problem by forcing Firefox to behave - I put the proper DOCTYPE in

    the
    > header & now it plays nice.


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

    Skratz Guest

    Bill wrote:
    > 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.
    >

    * 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

    On 15/11/05 01:43, Bill scribbled:
    > "Bill" wrote...
    >> I just fixed the problem by forcing Firefox to behave - I put the proper DOCTYPE in

    > the
    >> header & now it plays nice.

    >
    > Scratch that - Firefox won't recognize the proper DOCTYPE.
    >


    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 ;)
    --
    Hope This Helped and MTFBWY...
    Kieren aka JediFans - <URL:http://jedifans.com/>
    The Force Is With Me, SUSE Linux 10.0, Mozilla Firefox 1.5 RC1, Mozilla
    Thunderbird 1.5 Beta 2 and Revenge Of The Sith!
     
    Jedi Fans, Nov 15, 2005
    #7
  8. Bill

    Bill Guest

    "Jedi Fans" <"news[at]jedifans[--=dot=-]com"> wrote in message
    news:...
    > On 15/11/05 01:43, Bill scribbled:
    > > "Bill" wrote...
    > >> I just fixed the problem by forcing Firefox to behave - I put the proper DOCTYPE in

    > > the
    > >> header & now it plays nice.

    > >
    > > Scratch that - Firefox won't recognize the proper DOCTYPE.
    > >

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


    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

    > "Skratz" wrote...
    > Bill wrote:
    > > 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.
    > >

    > * Line: 39 Context : #customBx ul
    > Invalid number : padding-right -1.0 negative values are not allowed :
    > -1em


    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)

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


    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

    Firefox screwing with my style sheet margins - SOLUTION!

    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

    On 15/11/05 17:41, Bill scribbled:
    > "Jedi Fans" <"news[at]jedifans[--=dot=-]com"> wrote in message
    > news:...
    >> On 15/11/05 01:43, Bill scribbled:
    >>> "Bill" wrote...
    >>>> I just fixed the problem by forcing Firefox to behave - I put the proper DOCTYPE in
    >>> the
    >>>> header & now it plays nice.
    >>> Scratch that - Firefox won't recognize the proper DOCTYPE.
    >>>

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

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

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

    --
    Hope This Helped and MTFBWY...
    Kieren aka JediFans - <URL:http://jedifans.com/>
    The Force Is With Me, SUSE Linux 10.0, Mozilla Firefox 1.5 RC1, Mozilla
    Thunderbird 1.5 Beta 2 and Revenge Of The Sith!
     
    Jedi Fans, Nov 15, 2005
    #11
  12. Bill

    gwtc Guest

    Bill wrote:

    > "Jedi Fans" <"news[at]jedifans[--=dot=-]com"> wrote in message
    > news:...
    >
    >>On 15/11/05 01:43, Bill scribbled:
    >>
    >>>"Bill" wrote...
    >>>
    >>>>I just fixed the problem by forcing Firefox to behave - I put the proper DOCTYPE in
    >>>
    >>>the
    >>>
    >>>>header & now it plays nice.
    >>>
    >>>Scratch that - Firefox won't recognize the proper DOCTYPE.
    >>>

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

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


    Maybe, but I think IE will make (educated?) guesses as to what you
    want while FF doesn't.


    > 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?
    >
    >
     
    gwtc, Nov 15, 2005
    #12
  13. Re: Firefox screwing with my style sheet margins - SOLUTION!

    Bill wrote:
    > 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?
    >
    >
    >


    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

    Re: Firefox screwing with my style sheet margins - SOLUTION!


    > "Leonidas Jones" wrote...

    :
    > > Can someone tell me how it looks in Opera?
    > >
    > >
    > >

    >
    > Looks pretty good in Opera, the main menu box is a little longer,
    > vertically that is, but the border is working.
    >
    > Lee


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

    Bill Guest

    Everybody, thanks for your help!

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

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Brian The Demolition Man Little

    Disney screwing WS once again

    Brian The Demolition Man Little, May 25, 2004, in forum: DVD Video
    Replies:
    7
    Views:
    542
  2. Radium
    Replies:
    9
    Views:
    481
    john Q
    May 2, 2006
  3. PRW
    Replies:
    3
    Views:
    474
    thanatoid
    Sep 11, 2006
  4. dejola
    Replies:
    16
    Views:
    642
    Beauregard T. Shagnasty
    Nov 18, 2006
  5. Radium
    Replies:
    5
    Views:
    671
    Whiskers
    Jul 19, 2007
Loading...

Share This Page