Why does this display differently in IE and Firefox

Discussion in 'HTML' started by Christopher Richards, Nov 21, 2004.

  1. Please take a look at the bottom of the page
    http://slowdownnow.org/stories.html.

    I've been playing about with this for some time. It displays fine in IE6 but
    is not centered in Firefox.
    div#bottom{
    border-top: 1px solid #ccc;
    width:799px;
    height:25px;
    padding-top:5px;
    background-color:#ffffff;
    text-align:center;
    margin:auto auto auto auto;
    }

    And while I am here, why do I have to specify div heights in pixels for
    Mozilla to show the background, but in IE percentages are fine?
    Thanks. Christopher
    Christopher Richards, Nov 21, 2004
    #1
    1. Advertising

  2. Christopher Richards

    neredbojias Guest

    Without quill or qualm, Christopher Richards quothed:

    > Please take a look at the bottom of the page
    > http://slowdownnow.org/stories.html.
    >
    > I've been playing about with this for some time. It displays fine in IE6 but
    > is not centered in Firefox.
    > div#bottom{
    > border-top: 1px solid #ccc;
    > width:799px;
    > height:25px;
    > padding-top:5px;
    > background-color:#ffffff;
    > text-align:center;
    > margin:auto auto auto auto;
    > }


    You might try width: 100%;


    > And while I am here, why do I have to specify div heights in pixels for
    > Mozilla to show the background, but in IE percentages are fine?
    > Thanks. Christopher


    IE is just a better browser.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    neredbojias, Nov 21, 2004
    #2
    1. Advertising

  3. Christopher Richards

    Steve Pugh Guest

    On Sun, 21 Nov 2004 01:31:38 GMT, "Christopher Richards"
    <> wrote:

    >Please take a look at the bottom of the page
    >http://slowdownnow.org/stories.html.
    >
    >I've been playing about with this for some time. It displays fine in IE6 but
    >is not centered in Firefox.
    >div#bottom{
    >border-top: 1px solid #ccc;
    >width:799px;
    >height:25px;
    >padding-top:5px;
    >background-color:#ffffff;
    >text-align:center;
    >margin:auto auto auto auto;
    >}


    It's appearing next to the last floated element.

    Add clear: both; to the styles.

    >And while I am here, why do I have to specify div heights in pixels for
    >Mozilla to show the background, but in IE percentages are fine?


    Depends on the circumstances. Percentage heights don't always work the
    way people think they should.Add to that the fact that IE often gets
    things wrong. Can you be mores specific about where this is happening?

    Steve
    Steve Pugh, Nov 21, 2004
    #3
  4. Also sprach Steve Pugh:

    >> And while I am here, why do I have to specify div heights in pixels
    >> for Mozilla to show the background, but in IE percentages are fine?

    >
    > Depends on the circumstances. Percentage heights don't always work the
    > way people think they should.Add to that the fact that IE often gets
    > things wrong. Can you be mores specific about where this is happening?


    Why specifying a height for div#container? Just drop it. And when you add a
    clear:both to the bottom div as suggested, the page will look the same in
    IE5, Mozilla and Firefox. And while you're at it: Change the doctype to HTML
    Strict, as it validates as that (surprisingly...). You currently have an
    XHTML doctype specified.
    Thomas Mlynarczyk, Nov 21, 2004
    #4
  5. Christopher Richards

    SpaceGirl Guest

    neredbojias wrote:
    > Without quill or qualm, Christopher Richards quothed:


    > IE is just a better browser.
    >


    mehhehehehhehehheh

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Nov 21, 2004
    #5
  6. Christopher Richards

    Duende Guest

    While sitting in a puddle neredbojias scribbled in the mud:

    > IE is just a better browser.


    Just what kind of health problem did you have that kept you out of here for
    so long?

    --
    Avoid reality at all costs.
    www.wipkip.biz
    Duende, Nov 21, 2004
    #6
  7. > It's appearing next to the last floated element.
    >
    > Add clear: both; to the styles.
    >
    >>And while I am here, why do I have to specify div heights in pixels for
    >>Mozilla to show the background, but in IE percentages are fine?

    Can you be mores specific about where this is happening?
    www.slowdownow.org/stories.html
    Thanks Steve your comment was very helpful.
    The clear both centered it. However, now there is a gap at the top of the
    bottom div and the bottom of the content div in FireFox. (IE OK) I can close
    that gap up by adjusting the height in pixels. BUT if the use enlarges the
    text size the background falls short of the text. I may not have time to
    work on it today (Sunday), But I'll try to fix it and say how here for
    anyone else that may have the same problem.
    The height of the content div works fine at 100% in IE but I must specify in
    FF.
    div#content{
    position:relative;
    width: 798px;
    height:2823px; /*percentage causes problems in Firefox*/
    text-align:center;
    padding-bottom:5px;
    left:0px;

    }
    div#left_float{
    position:relative;
    width:500px;
    text-align:left;
    left:40px;
    top:0px;

    float:left;
    }
    div#right_float{
    padding-top:30px;
    float:right;
    width:200px;
    height:100%;
    padding-left: 15px;
    padding-right: 15px;
    text-align:left;
    }

    div#bottom{
    border-top: 1px solid #ccc;
    width: 799px;
    height: 25px;
    padding-top: 5px;
    background-color: #ffffff;
    text-align: center;
    margin: auto auto auto auto;
    clear: both; /*centers bottom div for Firefox*/
    }
    Christopher Richards, Nov 21, 2004
    #7
  8. "Thomas Mlynarczyk" <> wrote in message
    news:cnpsfd$jd$02$-online.com...
    > Also sprach Steve Pugh:
    >
    >>> And while I am here, why do I have to specify div heights in pixels
    >>> for Mozilla to show the background, but in IE percentages are fine?

    >>
    >> Depends on the circumstances. Percentage heights don't always work the
    >> way people think they should.Add to that the fact that IE often gets
    >> things wrong. Can you be mores specific about where this is happening?

    >
    > Why specifying a height for div#container? Just drop it. And when you add
    > a
    > clear:both to the bottom div as suggested, the page will look the same in
    > IE5, Mozilla and Firefox. And while you're at it: Change the doctype to
    > HTML
    > Strict, as it validates as that (surprisingly...). You currently have an
    > XHTML doctype specified.
    >

    Thomas,
    That's it! Thanks so much. I were going to have a child I would name it
    after you. You don't know how much I have been struggling with this. If it
    would work in IE5 on the Mac ( I don't have one) and almost all my dreams
    would come true.
    Christopher Richards, Nov 21, 2004
    #8
  9. "Christopher Richards" <> wrote in
    message news:eT8od.24599$...
    > Please see my reply to Thomas Mlynarczyk. Fixed!


    The trouble with these forums is that you can't edit your own post. Darn. I
    was looking at IE and thinking it was FF. Working on this with a bad cold.
    Wonder why that gap is there in FF? www.slowdownnow.org/stories.html.com
    Christopher Richards, Nov 21, 2004
    #9
  10. > The trouble with these forums is that you can't edit your own post. Darn.
    > I was looking at IE and thinking it was FF. Working on this with a bad
    > cold. Wonder why that gap is there in FF?
    > www.slowdownnow.org/stories.html.com


    Here is the fix:
    margin-top:0px;/*fix for spacing in Firefox*/
    clear: both; /*centers bottom div for Firefox*/

    But it doesn't answer why the margin-top needs to be manually set to zero.
    Without it in FF there is a transparent gap; the tipoff that it was a margin
    problem.
    Christopher Richards, Nov 22, 2004
    #10
  11. Also sprach Christopher Richards:

    > Here is the fix:
    > margin-top:0px;/*fix for spacing in Firefox*/
    > clear: both; /*centers bottom div for Firefox*/
    >
    > But it doesn't answer why the margin-top needs to be manually set to
    > zero. Without it in FF there is a transparent gap; the tipoff that it
    > was a margin problem.


    I fixed this by removinh the height specification from the container div.
    Thomas Mlynarczyk, Nov 22, 2004
    #11
  12. Also sprach Christopher Richards:


    > Thomas,
    > That's it! Thanks so much. I were going to have a child I would name
    > it after you.


    There already are quite a number of children named Thomas :)

    > You don't know how much I have been struggling with
    > this. If it would work in IE5 on the Mac ( I don't have one) and
    > almost all my dreams would come true.


    As far as I've heard Microsoft has ceased support for IE/Mac - so can we
    both hope that this browser will soon be extinct?
    Thomas Mlynarczyk, Nov 22, 2004
    #12
  13. Christopher Richards

    neredbojias Guest

    Without quill or qualm, Duende quothed:

    > While sitting in a puddle neredbojias scribbled in the mud:
    >
    > > IE is just a better browser.

    >
    > Just what kind of health problem did you have that kept you out of here for
    > so long?


    DRCS. (Digital-Rectal Compulsive Syndrome.)

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    neredbojias, Nov 22, 2004
    #13
    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. InfiniteVoid
    Replies:
    3
    Views:
    471
    BootNic
    Mar 26, 2006
  2. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,733
    Smokey Grindel
    Dec 2, 2006
  3. Divick
    Replies:
    7
    Views:
    433
    Divick
    Sep 12, 2005
  4. Allen
    Replies:
    5
    Views:
    653
    Allen
    Jul 13, 2006
  5. zalek
    Replies:
    1
    Views:
    365
    Randy Webb
    Nov 6, 2007
Loading...

Share This Page