Firefox vs IE in padding

Discussion in 'HTML' started by ishky1@gmail.com, Sep 26, 2007.

  1. Guest

    HI,

    Sorry no web page to point to.

    I have a two column page design using two floated divs:

    div#left{
    width: 50%;
    float: left;
    }
    div#right{
    width: 50%;
    float: right;
    }
    All works well in both browsers and shows two columns side by side.
    The problem comes up when I insert padding into the css. With the
    padding IE renders the page with two column side by side. However in
    Firefox there is an overlap and the right column is displayed below
    the left.

    My solution is to float both to the left and fiddle with the width
    until both columns fit side by side. But I don't really like it. Can
    somebody explain what Firefox is doing.

    Thanks for the help,
    Andy
    , Sep 26, 2007
    #1
    1. Advertising

  2. Jim Moe Guest

    wrote:
    >
    > I have a two column page design using two floated divs:
    >
    > div#left{
    > width: 50%;
    > float: left;
    > }
    > div#right{
    > width: 50%;
    > float: right;
    > }
    > All works well in both browsers and shows two columns side by side.
    > The problem comes up when I insert padding into the css. With the
    > padding IE renders the page with two column side by side. However in
    > Firefox there is an overlap and the right column is displayed below
    > the left.
    >

    First, use HTML 4.01 Strict for your DTD (doctype), and validate your
    code. Otherwise you will have more of these kinds of problems.
    The padding is in addition to the given width. The easiest way to allow
    for this is to use % for the padding and verify the total div width plus
    padding is 50%.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Sep 26, 2007
    #2
    1. Advertising

  3. dorayme Guest

    In article
    <>,
    "" <> wrote:

    >
    > Sorry no web page to point to.
    >
    > I have a two column page design using two floated divs:
    >
    > div#left{
    > width: 50%;
    > float: left;
    > }
    > div#right{
    > width: 50%;
    > float: right;
    > }
    > All works well in both browsers and shows two columns side by side.
    > The problem comes up when I insert padding into the css. With the
    > padding IE renders the page with two column side by side. However in
    > Firefox there is an overlap and the right column is displayed below
    > the left.


    I would think that FF is correct for css 2. If both left and
    right take up 50%, and there is added something extra (eg a 1 px
    border or padding) in just one of these, then it must take up a
    little more than the 50% you specified. Width, strange as it may
    seem, mostly refers to the horizontal area for content.

    --
    dorayme
    dorayme, Sep 27, 2007
    #3
  4. Guest

    On Sep 26, 5:32 pm, Jim Moe <> wrote:
    > wrote:
    >
    > > I have a two column page design using two floated divs:

    >
    > > div#left{
    > > width: 50%;
    > > float: left;
    > > }
    > > div#right{
    > > width: 50%;
    > > float: right;
    > > }
    > > All works well in both browsers and shows two columns side by side.
    > > The problem comes up when I insert padding into the css. With the
    > > padding IE renders the page with two column side by side. However in
    > > Firefox there is an overlap and the right column is displayed below
    > > the left.

    >
    > First, use HTML 4.01 Strict for your DTD (doctype), and validate your
    > code. Otherwise you will have more of these kinds of problems.
    > The padding is in addition to the given width. The easiest way to allow
    > for this is to use % for the padding and verify the total div width plus
    > padding is 50%.
    >
    > --
    > jmm (hyphen) list (at) sohnen-moe (dot) com
    > (Remove .AXSPAMGN for email)


    I tried your suggestion and got it to work in Firefox. But in IE the
    two columns take up less than 100%. I guess that forces me to choose
    from the least ugly fix.

    Thanks,
    Andy
    , Sep 27, 2007
    #4
  5. wrote:

    >
    > I tried your suggestion and got it to work in Firefox. But in IE the
    > two columns take up less than 100%. I guess that forces me to choose
    > from the least ugly fix.


    If your page triggers MSIE's quirks mode that MSIE will *incorrectly*
    add the padding within the DIV's width. A url would help your fix this...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 27, 2007
    #5
  6. Neredbojias Guest

    Well bust mah britches and call me cheeky, on Thu, 27 Sep 2007 00:32:24
    GMT scribed:

    >> > I have a two column page design using two floated divs:

    >>
    >> > div#left{
    >> > width: 50%;
    >> > float: left;
    >> > }
    >> > div#right{
    >> > width: 50%;
    >> > float: right;
    >> > }
    >> > All works well in both browsers and shows two columns side by side.
    >> > The problem comes up when I insert padding into the css. With the
    >> > padding IE renders the page with two column side by side. However
    >> > in Firefox there is an overlap and the right column is displayed
    >> > below the left.

    >>
    >> First, use HTML 4.01 Strict for your DTD (doctype), and validate
    >> your
    >> code. Otherwise you will have more of these kinds of problems.
    >> The padding is in addition to the given width. The easiest way to
    >> allow
    >> for this is to use % for the padding and verify the total div width
    >> plus padding is 50%.

    >
    > I tried your suggestion and got it to work in Firefox. But in IE the
    > two columns take up less than 100%. I guess that forces me to choose
    > from the least ugly fix.


    If you're sure you're using a correct strict doctype, try inserting an
    additional div just inside each of the 2 floated divs and put the padding
    on those inner divs - keeping the floats at 50% width.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Sep 27, 2007
    #6
  7. Jim Moe Guest

    wrote:
    >>
    >> First, use HTML 4.01 Strict for your DTD (doctype), and validate your
    >> code. Otherwise you will have more of these kinds of problems.
    >> The padding is in addition to the given width. The easiest way to allow
    >> for this is to use % for the padding and verify the total div width plus
    >> padding is 50%.
    >>

    > I tried your suggestion and got it to work in Firefox. But in IE the
    > two columns take up less than 100%. I guess that forces me to choose
    > from the least ugly fix.
    >

    Are you using the Strict doctype? That is very important for
    cross-browser display uniformity. And validated code.
    Without an URL to a test case there is little else to suggest.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Sep 27, 2007
    #7
    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. Jeremy Epstein

    Too much padding in Firefox

    Jeremy Epstein, Jul 31, 2004, in forum: HTML
    Replies:
    1
    Views:
    553
    Lisa-Marie Welsh
    Aug 1, 2004
  2. dlychowyd

    Re: Too much padding in Firefox

    dlychowyd, Jul 31, 2004, in forum: HTML
    Replies:
    1
    Views:
    368
    Hywel
    Jul 31, 2004
  3. dlychowyd

    Re: Too much padding in Firefox

    dlychowyd, Jul 31, 2004, in forum: HTML
    Replies:
    4
    Views:
    416
    Jukka K. Korpela
    Aug 2, 2004
  4. Hans Nieser
    Replies:
    4
    Views:
    1,488
    Hans Nieser
    Sep 16, 2004
  5. Replies:
    11
    Views:
    667
    =?ISO-8859-1?Q?G=E9rard_Talbot?=
    Oct 28, 2006
Loading...

Share This Page