CSS Padding(Margin?) Issues in Firefox

Discussion in 'HTML' started by sllrphoto@yahoo.com, Oct 22, 2006.

  1. Guest

    A veteran of early html, I've modified my blog template and made it
    look rather clean (albeit rather plain) when viewed with IE.

    Ironically, I'm a big Firefox fan, but when viewed in FF, my blog
    leaves a lot to be desired.

    The blog (which is at http://lazycomic.blospot.com/ ) is a basic two
    column style, with the right column being the one that's giving me the
    problems.

    In IE, it has nice padding around the text in the right column and
    decent spacing between it and the left (main) column. It also sits
    rather nicely in the middle of the window.

    PROBLEM #1 > In FireFox, the text in the right column is slammed right
    into the left edge of the column. The bulleted items even go into the
    main column. (I've noticed the FF users continue to read my blog -- and
    I appreciate it -- but it looks rather dreadful.)

    PROBLEM #2 > In IE, the color (#f5f5f5) for the right column follows
    neatly until it's done, while it FireFox it seems to end abruptly.

    I'm sure there are a ton of poor syntax issues with my blog template,
    but any help on correcting these two problems would be a great step in
    the right direction.
    , Oct 22, 2006
    #1
    1. Advertising

  2. Jim Moe Guest

    wrote:
    >
    > The blog (which is at http://lazycomic.blospot.com/ ) is a basic two
    > column style, with the right column being the one that's giving me the
    > problems.
    >

    Bad URL.

    > In IE, it has nice padding around the text in the right column and
    > decent spacing between it and the left (main) column. It also sits
    > rather nicely in the middle of the window.
    >
    > PROBLEM #1 > In FireFox, the text in the right column is slammed right
    > into the left edge of the column. The bulleted items even go into the
    > main column. (I've noticed the FF users continue to read my blog -- and
    > I appreciate it -- but it looks rather dreadful.)
    >

    Without a useful URL I'm only guessing.... Each browser has a different
    idea about how to apply padding and margins, and how much. A way to
    achieve a mostly uniform look across browsers is to use
    html * { padding: 0; margin: 0; }
    and explicitly specify the margin and padding for every element.

    For <ul> in particular, FF and IE use distinctly different values; I do
    not remember which is which but one uses padding to indent a <ul>, the
    other uses margin. If you set margin or padding to 0, one browser renders
    the list without indent on the left.
    This works reasonably well:
    html * { padding: 0; margin: 0; }
    ol { padding-left: 2.5em; } /* Allows up to 3 digits. */
    ul { padding-left: 1.4em; } /* Minimum needed across browsers. */

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Oct 22, 2006
    #2
    1. Advertising

  3. Guest

    Jim - Thank you for the tips.

    Here's the *correct* URL: http://lazycomic.blogspot.com/

    Jim Moe wrote:
    > wrote:
    > >
    > > The blog (which is at http://lazycomic.blospot.com/ ) is a basic two
    > > column style, with the right column being the one that's giving me the
    > > problems.
    > >

    > Bad URL.
    >
    > > In IE, it has nice padding around the text in the right column and
    > > decent spacing between it and the left (main) column. It also sits
    > > rather nicely in the middle of the window.
    > >
    > > PROBLEM #1 > In FireFox, the text in the right column is slammed right
    > > into the left edge of the column. The bulleted items even go into the
    > > main column. (I've noticed the FF users continue to read my blog -- and
    > > I appreciate it -- but it looks rather dreadful.)
    > >

    > Without a useful URL I'm only guessing.... Each browser has a different
    > idea about how to apply padding and margins, and how much. A way to
    > achieve a mostly uniform look across browsers is to use
    > html * { padding: 0; margin: 0; }
    > and explicitly specify the margin and padding for every element.
    >
    > For <ul> in particular, FF and IE use distinctly different values; I do
    > not remember which is which but one uses padding to indent a <ul>, the
    > other uses margin. If you set margin or padding to 0, one browser renders
    > the list without indent on the left.
    > This works reasonably well:
    > html * { padding: 0; margin: 0; }
    > ol { padding-left: 2.5em; } /* Allows up to 3 digits. */
    > ul { padding-left: 1.4em; } /* Minimum needed across browsers. */
    >
    > --
    > jmm (hyphen) list (at) sohnen-moe (dot) com
    > (Remove .AXSPAMGN for email)
    , Oct 23, 2006
    #3
  4. J.O. Aho Guest

    J.O. Aho, Oct 23, 2006
    #4
  5. David Stone Guest

    In article <>,
    Jim Moe <> wrote:

    > wrote:
    > >
    > > The blog (which is at http://lazycomic.blospot.com/ ) is a basic two
    > > column style, with the right column being the one that's giving me the
    > > problems.
    > >

    > Bad URL.
    >
    > > In IE, it has nice padding around the text in the right column and
    > > decent spacing between it and the left (main) column. It also sits
    > > rather nicely in the middle of the window.
    > >
    > > PROBLEM #1 > In FireFox, the text in the right column is slammed right
    > > into the left edge of the column. The bulleted items even go into the
    > > main column. (I've noticed the FF users continue to read my blog -- and
    > > I appreciate it -- but it looks rather dreadful.)
    > >

    > Without a useful URL I'm only guessing.... Each browser has a different
    > idea about how to apply padding and margins, and how much. A way to
    > achieve a mostly uniform look across browsers is to use
    > html * { padding: 0; margin: 0; }
    > and explicitly specify the margin and padding for every element.
    >
    > For <ul> in particular, FF and IE use distinctly different values; I do
    > not remember which is which but one uses padding to indent a <ul>, the
    > other uses margin. If you set margin or padding to 0, one browser renders
    > the list without indent on the left.


    A related problem is if the <ul> is in a middle or right column <div>
    which does not have a left margin set explicitly...
    David Stone, Oct 23, 2006
    #5
  6. Jim Moe Guest

    wrote:
    > Jim - Thank you for the tips.
    >
    > Here's the *correct* URL: http://lazycomic.blogspot.com/
    >

    Your code is a bit of a train wreck.
    - There is no need whatsoever for "<?xml ... ?>. And IE does not
    understand <?xml > anyway.
    - There is no DTD. Use
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    - There are *two* <head> sections.
    - You have mixed HTML and XHTML syntax.

    The above are the main reasons for the huge number of validation errors
    your page generates.
    <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flazycomic.blogspot.com%2F>

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Oct 23, 2006
    #6
  7. Guest

    Jim / Dave / J.O. -

    Thanks for the tips. With the "trainwreck" I've given the validators
    too much ammo -- I don't think I'll tackle that until if/when I just
    overhaul the whole template.

    The tip on defining the right column was the biggest help in getting
    things right. Also, somewhere in there I managed to get the typefaces
    to match in IE and FF.

    I still can't seem to get both columns to float center in firefox, but
    (again, thanks to the trainwreck) that may be just b/c of a
    conflict/override/glitch in the various definitions.

    Thanks again,
    Steve D. (http://lazycomic.blogspot.com/)

    Jim Moe wrote:
    > wrote:
    > > Jim - Thank you for the tips.
    > >
    > > Here's the *correct* URL: http://lazycomic.blogspot.com/
    > >

    > Your code is a bit of a train wreck.
    > - There is no need whatsoever for "<?xml ... ?>. And IE does not
    > understand <?xml > anyway.
    > - There is no DTD. Use
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > - There are *two* <head> sections.
    > - You have mixed HTML and XHTML syntax.
    >
    > The above are the main reasons for the huge number of validation errors
    > your page generates.
    > <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Flazycomic.blogspot.com%2F>
    >
    > --
    > jmm (hyphen) list (at) sohnen-moe (dot) com
    > (Remove .AXSPAMGN for email)
    , Oct 24, 2006
    #7
  8. J.O. Aho Guest

    wrote:
    > Jim / Dave / J.O. -
    >
    > Thanks for the tips. With the "trainwreck" I've given the validators
    > too much ammo -- I don't think I'll tackle that until if/when I just
    > overhaul the whole template.
    >
    > The tip on defining the right column was the biggest help in getting
    > things right. Also, somewhere in there I managed to get the typefaces
    > to match in IE and FF.
    >
    > I still can't seem to get both columns to float center in firefox, but
    > (again, thanks to the trainwreck) that may be just b/c of a
    > conflict/override/glitch in the various definitions.


    Why not make two CSS files, one for Gecko based browsers and one for MSIE, and
    a little bit of javascript that selects the right CSS based on the user-agent
    string.


    //Aho
    J.O. Aho, Oct 24, 2006
    #8
  9. dorayme Guest

    In article <>,
    "J.O. Aho" <> wrote:

    > Why not make two CSS files, one for Gecko based browsers and one for MSIE,
    > and
    > a little bit of javascript that selects the right CSS based on the user-agent
    > string.


    Why is the js needed considering there are ways to let IE see CSS
    instructions that FF does not see?

    --
    dorayme
    dorayme, Oct 24, 2006
    #9
  10. J.O. Aho Guest

    dorayme wrote:
    > In article <>,
    > "J.O. Aho" <> wrote:
    >
    >> Why not make two CSS files, one for Gecko based browsers and one for MSIE,
    >> and
    >> a little bit of javascript that selects the right CSS based on the user-agent
    >> string.

    >
    > Why is the js needed considering there are ways to let IE see CSS
    > instructions that FF does not see?


    It's easier to look true and for same options you can have different values too.


    //Aho
    J.O. Aho, Oct 24, 2006
    #10
  11. Andy Dingley Guest

    J.O. Aho wrote:
    > Why not make two CSS files, one for Gecko based browsers and one for MSIE,


    1. because it's a bad idea.

    2. because it's pointless. IE isn't _that_ bad. If you can hit the
    standard then not only is FF happy, but even IE will get nearly
    everything right, so long as you use a suitable doctype to get it into
    standards-based rendering mode. One stylesheet will fit all.

    The only issues I know of where you can't do this are for the default
    treatment of lists (just set everything (margin & padding) explicitly
    for both). Also IE still have some font-sizing issues.

    > a little bit of javascript that selects the right CSS based on the user-agent
    > string.


    That's _MUCH_ worse.
    Andy Dingley, Oct 24, 2006
    #11
  12. Followup-to set: alt.html

    > Here's the *correct* URL: http://lazycomic.blogspot.com/


    1-
    You've got 284 validation markup errors
    http://validator.w3.org/check?uri=http://lazycomic.blogspot.com/

    Your problem could be related to those, you know.. Without fixing those
    first, it's counter-productive to try to figure out what could be the
    problem.

    Using Web Standards in Your Web Pages
    The benefits for valid markup code
    http://www.mozilla.org/docs/web-developer/upgrade_2.html#benefitsvalidmarkup

    Mozilla Web author FAQ
    http://www.mozilla.org/docs/web-developer/faq.html

    Why we won't help you
    http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you


    2-
    Some of your CSS declarations imply a font-size of 10px. Now, that's
    very small for people (over 40 years old) who may have set a minimum
    font-size of over 12px for webpages in Firefox. Have you checked your
    layout with such minimum setting?

    3-
    You have many errors in your css declarations: here's a few:

    Invalid number : float center is not a float value : center
    # Line: 96 Context : #rightcontent

    Invalid number : margin only 0 can be a length. You must put an unit
    after your number : 10 10 10 10
    # Line: 100 Context : #rightcontent

    Invalid number : padding only 0 can be a length. You must put an unit
    after your number : 10 10 10 0


    4-
    You have all kinds of CSS, javascript and a deep and wide DOM tree: this
    is exactly the type of code that requires strict validation, combining
    and compressing declarations and reduction of DOM tree.

    5-
    Font-size should never be defined with px. This is well known:

    W3C Quality Assurance tip for webmaster:
    Care With Font Size: Forget <font>, use CSS
    "Do not specify the font-size in pt, or other absolute length units for
    screen stylesheets. They render inconsistently across platforms and
    can't be resized by the User Agent (e.g browser).
    Use relative length units such as percent or (better) em"
    http://www.w3.org/QA/Tips/font-size#css

    Followup-to set: alt.html

    GĂ©rard
    --
    remove blah to email me
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Oct 28, 2006
    #12
    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. Andreas Emmert

    margin/padding of submit button with CSS

    Andreas Emmert, Sep 28, 2003, in forum: HTML
    Replies:
    14
    Views:
    21,224
    chung
    Apr 22, 2008
  2. Hans Nieser
    Replies:
    4
    Views:
    1,488
    Hans Nieser
    Sep 16, 2004
  3. J055
    Replies:
    3
    Views:
    486
  4. cera
    Replies:
    1
    Views:
    1,266
    Neredbojias
    Aug 18, 2007
  5. charlbury
    Replies:
    26
    Views:
    3,551
    Andy Dingley
    Nov 19, 2007
Loading...

Share This Page