IE7 vs Firefox

Discussion in 'HTML' started by Shelly, Oct 30, 2007.

  1. Shelly

    Shelly Guest

    We am having a real problem with CSS consistency between IE7 and Firefox.
    We are working on the template for the page. It is
    http://ftp.blueskycampinsurance.org/new. In Firefox there is a small blue
    bar near the bottom that doesn't appear in IE7 (it shouldn't be there). The
    heights of all containers are automatic. We can't figure out why.

    If anyone can help, it would be greatly appreciated.

    Sheldon


    Here is the css:
    body {
    background-color: #53381B;
    font-family: Arial, Helvetica, sans-serif;
    }

    #wrapper, #header, #container-out, #container, #container-in,
    #content-holder, #footer, #trees{
    margin: 0 auto;
    }

    #wrapper {
    width: 900px;
    }

    #header {
    height: 173px;
    background-image: url(../i/img-header.jpg);
    width: 900px;
    }

    #container-out {
    width: 817px;
    background-color: #6bd5d1;
    }

    #container {
    width: 804px;
    background-color: #77d265;
    }

    #container-in {
    width: 793px;
    background-color: #53381B;
    }

    #container-top {
    width: 793px;
    height: 3px;
    background-image: url(../i/img-topbar.jpg);
    }

    #content-holder {
    width: 787px;
    background-color: #FFFFFF;
    padding-top: 1px;
    padding-bottom: 1px;
    }

    #footer {
    width: 817px;
    background-image: url(../i/img-footer.jpg);
    height: 105px;
    }

    #trees {
    width: 283px;
    height: 186px;
    position: absolute;
    margin-left: 619px;
    top: 625px;
    }

    ..footer-text {
    margin-top: 0 auto;
    padding-top: 12px;
    font-size: 12px;
    font-weight: bold;
    }

    ..main-text {
    font-size: 14px;
    margin-left: 30px;
    margin-right: 30px;
    }

    ..text-trees {
    font-size: 14px;
    margin-left: 30px;
    margin-right: 250px;
    }

    ..subheader {
    font-size: 16px;
    font-weight: bolder;
    margin-left: 30px;
    color: #77d265;
    }

    #mainleft {
    font-size: 14px;
    margin-left: 30px;
    width: 240px;
    float: left;
    padding-bottom: 15px;
    }

    #maincenter {
    font-size: 14px;
    width: 240px;
    float: left;
    padding-bottom: 15px;
    }

    #mainright {
    font-size: 14px;
    width: 240px;
    float: left;
    padding-bottom: 15px;
    }

    li {
    list-style-image: url(../i/img-bullet.jpg);
    }

    span {
    margin-left: 3px;
    color: #000000;
    }
     
    Shelly, Oct 30, 2007
    #1
    1. Advertising

  2. Shelly wrote:
    > We am having a real problem with CSS consistency between IE7 and Firefox.
    > We are working on the template for the page. It is
    > http://ftp.blueskycampinsurance.org/new. In Firefox there is a small blue


    Server Not Found.
     
    Harlan Messinger, Oct 30, 2007
    #2
    1. Advertising

  3. Shelly

    Shelly Guest

    Shelly, Oct 30, 2007
    #3
  4. Shelly

    Jim S Guest

    On Tue, 30 Oct 2007 11:25:08 -0400, Shelly wrote:

    > We am having a real problem with CSS consistency between IE7 and Firefox.
    > We are working on the template for the page. It is
    > http://ftp.blueskycampinsurance.org/new. In Firefox there is a small blue
    > bar near the bottom that doesn't appear in IE7 (it shouldn't be there). The
    > heights of all containers are automatic. We can't figure out why.
    >
    > If anyone can help, it would be greatly appreciated.
    >
    > Sheldon
    >

    No blue bar here in FF v2.0.08

    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, Oct 30, 2007
    #4
  5. Shelly wrote:

    >> Shelly wrote:
    >>> We am having a real problem with CSS consistency between IE7 and
    >>> Firefox. We are working on the template for the page. It is
    >>> http://ftp.blueskycampinsurance.org/new. In Firefox there is a
    >>> small blue

    > My mistake:
    >
    > http://ftp.blueskycampinsurance.net/new/


    Start by correcting the errors. Perhaps the different browsers are
    attempting to correct them in a different way.

    <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fftp.blueskycampinsurance.net%2Fnew%2F>
    This page is not Valid XHTML 1.0 Transitional!
    Result: Failed validation, 29 Errors

    <http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fftp.blueskycampinsurance.net%2Fnew%2F>
    Sorry! We found the following errors

    New pages should be Strict, not Transitional. You aren't transitioning
    from any legacy pages. And use HTML 4.01 Strict, not XHTML. Google for
    the hundreds of posts why.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Also, stop assigning font size in pixels. See:
    http://k75s.home.att.net/fontsize.html

    Seems you are suffering from div-itis.

    <div id="wrapper">
    <div id="header"></div> <-- empty?
    <div id="container-out">
    <div id="container">
    <div id="container-in">
    <div id="container-top"></div> <-- empty?
    <div id="content-holder"> ...

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Oct 30, 2007
    #5
  6. Shelly

    Shelly Guest

    "Jim S" <> wrote in message
    news:hkq6mei4fbtq$...
    > On Tue, 30 Oct 2007 11:25:08 -0400, Shelly wrote:
    >
    >> We am having a real problem with CSS consistency between IE7 and Firefox.
    >> We are working on the template for the page. It is
    >> http://ftp.blueskycampinsurance.org/new. In Firefox there is a small
    >> blue
    >> bar near the bottom that doesn't appear in IE7 (it shouldn't be there).
    >> The
    >> heights of all containers are automatic. We can't figure out why.
    >>
    >> If anyone can help, it would be greatly appreciated.
    >>
    >> Sheldon
    >>

    > No blue bar here in FF v2.0.08


    I also have FF v2.0.08 and there is a blue area between the main content
    area and the bottom grean area. That is the blue that I was talking about
    that doesn't appear in IE7.

    Sheldon
     
    Shelly, Oct 30, 2007
    #6
  7. Shelly

    Jim S Guest

    On Tue, 30 Oct 2007 12:41:27 -0400, Shelly wrote:

    > "Jim S" <> wrote in message
    > news:hkq6mei4fbtq$...
    >> On Tue, 30 Oct 2007 11:25:08 -0400, Shelly wrote:
    >>
    >>> We am having a real problem with CSS consistency between IE7 and Firefox.
    >>> We are working on the template for the page. It is
    >>> http://ftp.blueskycampinsurance.org/new. In Firefox there is a small
    >>> blue
    >>> bar near the bottom that doesn't appear in IE7 (it shouldn't be there).
    >>> The
    >>> heights of all containers are automatic. We can't figure out why.
    >>>
    >>> If anyone can help, it would be greatly appreciated.
    >>>
    >>> Sheldon
    >>>

    >> No blue bar here in FF v2.0.08

    >
    > I also have FF v2.0.08 and there is a blue area between the main content
    > area and the bottom grean area. That is the blue that I was talking about
    > that doesn't appear in IE7.
    >
    > Sheldon


    Yes you're right.
    I would take note of Beauregard and use this site
    http://validator.w3.org/#validate-by-upload
    --
    Jim S
    Tyneside UK
    www.jimscott.co.uk
     
    Jim S, Oct 30, 2007
    #7
  8. Shelly

    Ben C Guest

    On 2007-10-30, Shelly <> wrote:
    >
    > "Jim S" <> wrote in message
    > news:hkq6mei4fbtq$...
    >> On Tue, 30 Oct 2007 11:25:08 -0400, Shelly wrote:
    >>
    >>> We am having a real problem with CSS consistency between IE7 and Firefox.
    >>> We are working on the template for the page. It is
    >>> http://ftp.blueskycampinsurance.org/new. In Firefox there is a small
    >>> blue
    >>> bar near the bottom that doesn't appear in IE7 (it shouldn't be there).
    >>> The
    >>> heights of all containers are automatic. We can't figure out why.
    >>>
    >>> If anyone can help, it would be greatly appreciated.
    >>>
    >>> Sheldon
    >>>

    >> No blue bar here in FF v2.0.08

    >
    > I also have FF v2.0.08 and there is a blue area between the main content
    > area and the bottom grean area. That is the blue that I was talking about
    > that doesn't appear in IE7.


    It's the top margin on <p class="footer-text"> which in FF is correctly
    collapsing with the top margin of <div id="footer">.

    Either add margin-top: 0 to the p, or if you want the margin, but not to
    have it collapsed, put padding-top: 1px on #footer.
     
    Ben C, Oct 30, 2007
    #8
  9. Shelly

    Shelly Guest

    Thank you very much. We will look into these.

    Sheldon


    "Beauregard T. Shagnasty" <> wrote in message
    news:aQIVi.301930$...
    > Shelly wrote:
    >
    >>> Shelly wrote:
    >>>> We am having a real problem with CSS consistency between IE7 and
    >>>> Firefox. We are working on the template for the page. It is
    >>>> http://ftp.blueskycampinsurance.org/new. In Firefox there is a
    >>>> small blue

    >> My mistake:
    >>
    >> http://ftp.blueskycampinsurance.net/new/

    >
    > Start by correcting the errors. Perhaps the different browsers are
    > attempting to correct them in a different way.
    >
    > <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fftp.blueskycampinsurance.net%2Fnew%2F>
    > This page is not Valid XHTML 1.0 Transitional!
    > Result: Failed validation, 29 Errors
    >
    > <http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fftp.blueskycampinsurance.net%2Fnew%2F>
    > Sorry! We found the following errors
    >
    > New pages should be Strict, not Transitional. You aren't transitioning
    > from any legacy pages. And use HTML 4.01 Strict, not XHTML. Google for
    > the hundreds of posts why.
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > Also, stop assigning font size in pixels. See:
    > http://k75s.home.att.net/fontsize.html
    >
    > Seems you are suffering from div-itis.
    >
    > <div id="wrapper">
    > <div id="header"></div> <-- empty?
    > <div id="container-out">
    > <div id="container">
    > <div id="container-in">
    > <div id="container-top"></div> <-- empty?
    > <div id="content-holder"> ...
    >
    > --
    > -bts
    > -Motorcycles defy gravity; cars just suck
     
    Shelly, Oct 30, 2007
    #9
  10. Shelly

    Shelly Guest

    "Ben C" <> wrote in message
    news:...
    >> It's the top margin on <p class="footer-text"> which in FF is correctly

    > collapsing with the top margin of <div id="footer">.
    >
    > Either add margin-top: 0 to the p, or if you want the margin, but not to
    > have it collapsed, put padding-top: 1px on #footer.


    Thank you very much.

    Sheldon
     
    Shelly, Oct 30, 2007
    #10
  11. Shelly

    Andy Dingley Guest

    On 30 Oct, 15:25, "Shelly" <> wrote:
    > We am having a real problem with CSS consistency between IE7 and Firefox.


    Lose the XHTML doctype declaration - use HTML 4.01 Strict instead.
    This is particularly the case for this page, as it bears little
    relation to XHTML at all.

    Then fix the validation errors.

    _Only_ then worry about CSS inconsistencies. It's hard enough to get a
    valid site to work right. Because each browser corrects errors
    differently, you've no hope of doing it for invalid code.
     
    Andy Dingley, Oct 30, 2007
    #11
    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. Shimon Sim
    Replies:
    0
    Views:
    325
    Shimon Sim
    Jul 4, 2006
  2. Lui
    Replies:
    1
    Views:
    485
  3. Steve D.

    FireFox vs IE7

    Steve D., Dec 4, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    335
    Steve D.
    Dec 5, 2006
  4. Replies:
    7
    Views:
    718
  5. Jeff Louella

    IE7 on XP vs IE7 on Vista

    Jeff Louella, Mar 1, 2007, in forum: HTML
    Replies:
    9
    Views:
    545
    Adrienne Boswell
    Mar 2, 2007
Loading...

Share This Page