Results 1 to 5 of 5

Thread: Fine in IE7 but not in FF3

  1. #1
    Join Date
    May 2007
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default Fine in IE7 but not in FF3

    I'm developing a site for my friends holiday cottages and It displays fine in IE7 but loses a whole column in Firefox 3. The problem DIV is #BodyLeft.

    The page is here... username=paddy password=paddy
    http://www.chezbaillargeon.com/dev/index_trial2.htm


    The CSS file is below. Any clues greatly appreciated.

    CSS - main.css

    body
    {
    background:#333333;
    color:#cccccc;
    padding:0px;
    margin:0px;
    font-family: 'Trebuchet MS', Arial, Georgia, Times, Serif;
    font-size:73.0%;
    }

    img {
    border: none;
    }

    form {
    margin: 0px;
    padding: 0px;
    }


    #wrapper{
    width: 740px;
    margin: 0px auto;
    }

    #header {
    height: 220px;
    }
    #topImage1 {
    float: left;
    margin: 0px 0px 0px 20px
    }
    #topImage2 {
    float: left;
    margin: 0px 0px 0px 20px
    }
    #topImage3 {
    float: left;
    margin: 0px 0px 0px 20px
    }

    #BodyLeft {
    float: left;
    width: 220px;
    }

    #BodyRight {
    float: left;
    width: 520px;
    }

    #BodyRight2 {
    float: left;
    width: 520px;
    background: #000000 url(../images/body_bkg.gif) repeat-y left top;
    }
    #BodyRightText {
    width: 470px;
    padding: 0px 25px 0px 25px;
    font-size: 16px;
    color: #FFFFFF;
    }
    #BodyRightPad {
    width: 430px;
    padding: 0px 35px 0px 35px;
    }

    #Map-France {
    margin: 20px 0px 0px 40px;
    }

    #Lower1 {
    float: left;
    width: 162px;
    margin: 0px 10px 0px 15px;
    }
    #Lower1a {
    float: left;
    width: 162px;
    margin: 0px 10px 0px 45px;
    }
    #Lower2 {
    float: left;
    width: 152px;
    }
    #Lower2a {
    float: left;
    width: 80px;
    }
    #Lower3 {
    float: left;
    width: 162px;
    }


    h1
    {
    font-family: 'Trebuchet MS', Arial, Georgia, Times, Serif;
    line-height: 1.6em;
    font-size:1.0em;
    text-align: justify;
    color:#FFFFFF;
    text-decoration: none;
    }

    h2
    {
    font-family: 'Trebuchet MS', Arial, Georgia, Times, Serif;
    font-size: 1.1em;
    font-weight: normal;
    text-align: justify;
    color:#cccccc;
    background-color:transparent;
    }

    h3
    {
    font-family: 'Trebuchet MS', Arial, Georgia, Times, Serif;
    line-height: 1.6em;
    font-size:1.2em;
    text-align: justify;
    color:#cccccc;
    text-decoration: none;
    }

    h4
    {
    font-family: 'Trebuchet MS', Arial, Georgia, Times, Serif;
    font-size: 1.7em;
    font-weight: bold;
    color:#FFFFFF;
    }

    font.droptext {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #000000; text-decoration: none;}

    .green {color: #96BF55}

    a.link {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #66CCFF; text-decoration: none;}
    a.active {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #66CCFF; text-decoration: none;}
    a.visited {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #66CCFF; text-decoration: none;}
    a.hover {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #FFFFFF; text-decoration: none; background-color: #666666;}

    a.jump1:link {font: 11px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #FF1990; text-decoration: none;}
    a.jump1:active {font: 11px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #FF1990; text-decoration: none;}
    a.jump1:visited {font: 11px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #FF1990; text-decoration: none;}
    a.jump1:hover {font: 11px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #FFFFFF; text-decoration: none; background-color: #666666;}

    a.jumpPink:link {font: 12px "Lucida Grande", Tahoma, Verdana, Sans-serif; font-weight: bold; color: #FF1990; text-decoration: none;}
    a.jumpPink:active {font: 12px "Lucida Grande", Tahoma, Verdana, Sans-serif; font-weight: bold; color: #FF1990; text-decoration: none;}
    a.jumpPink:visited {font: 12px "Lucida Grande", Tahoma, Verdana, Sans-serif; font-weight: bold; color: #FF1990; text-decoration: none;}
    a.jumpPink:hover {font: 12px "Lucida Grande", Tahoma, Verdana, Sans-serif; font-weight: bold; color: #FFFFFF; text-decoration: none; background-color: #666666;}

    a.jumpGreen:link {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #96BF55; text-decoration: none;}
    a.jumpGreen:active {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #96BF55; text-decoration: none;}
    a.jumpGreen:visited {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #96BF55; text-decoration: none;}
    a.jumpGreen:hover {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #FFFFFF; text-decoration: none; background-color: #666666;}

    a.jumpGreen16:link {font: 16px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #96BF55; text-decoration: none;}
    a.jumpGreen16:active {font: 16px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #96BF55; text-decoration: none;}
    a.jumpGreen16:visited {font: 16px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #96BF55; text-decoration: none;}
    a.jumpGreen16:hover {font: 16px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #FFFFFF; text-decoration: none; background-color: #666666;}


    a.jumpPale:link {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #39B5E7; text-decoration: none;}
    a.jumpPale:active {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #39B5E7; text-decoration: none;}
    a.jumpPale:visited {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #39B5E7; text-decoration: none;}
    a.jumpPale:hover {font: 12px 'Trebuchet MS', Arial, Georgia, Times, Serif; color: #FFFFFF; text-decoration: none; background-color: #666666;}


    /* -----[ MainMenu ]--------------------------------------------------------------------- */

    #BlackMenu {
    width: 210px;
    background: #0299CE url(../images/bkg_menu.png) no-repeat left top;
    }

    #BlackMenu img {
    padding: 0px 3px 0px 0px;
    margin: 0px;
    float: none;
    display: inline;
    }

    #BlackMenu ul {
    list-style: none;
    margin: 10px 0px 10px 14px;
    padding: 0px;
    }

    #BlackMenu li {
    display: inline;
    padding: 0px;
    margin: 0px
    }
    #BlackMenu a {
    width: 170px;
    height: 26px;
    color: #FFF;
    display: block;
    padding: 6px 0px 0px 18px;
    font-size: 14px;
    text-decoration: none;
    }

    #BlackMenu a:hover {
    background: #0299CE;
    }


    /* -----[ Navigation ]--------------------------------------------------------------------- */
    #nav {
    float: left;
    }
    .nav li {
    display: inline;
    font: 14px 'Trebuchet MS',sans-serif;
    }
    .nav li a {
    position: relative; top: 7px;
    float: left;
    display: block;
    border-width: 0;
    padding: 0 8px;
    color: #66CCFF;
    text-decoration: none;
    }
    .nav li a:hover,
    .nav li.here a,
    .nav li.here a:hover {
    top: 4px;
    padding-bottom: 2px;
    border-bottom: 5px solid transparent;
    }
    .left li a {
    float: left;
    }
    .nav li a:hover,
    .nav li.here a,
    .nav li.here a:hover {border-color: #000000;}
    #footer .nav li.here a {border-color: #000000;}

    /* -----[ Footer Navigation ]--------------------------------------------------------------------- */
    #footer {
    clear: both;
    margin-top: 6px;
    }
    #footer .nav {
    margin: 0 6px;
    }
    #footer .nav li a {
    top: 4px;
    }
    #footer .nav li a:hover,
    #footer .nav li.here a,
    #footer .nav li.here a:hover {
    top: 0;
    }
    #footer .nav li a.large {
    padding-left: 10px;
    font-family: 'Trebuchet MS',sans-serif;
    }

    /* -----[ Alphabet Navigation ]--------------------------------------------------------------------- */
    #alphabet {
    clear: both;
    margin-top: 16px;
    }
    #alphabet .nav {
    margin: 0 6px;
    }
    #alphabet .nav li a {
    top: 4px;
    }
    #alphabet .nav li a:hover,
    #alphabet .nav li.here a,
    #alphabet .nav li.here a:hover {
    top: 0;
    }
    #alphabet .nav li a.large {
    padding-left: 3px;
    font-family: 'Trebuchet MS',sans-serif;
    }

    #LeftAbout {
    float: left;
    width: 210px;
    margin: 20px 0px 20px 0px;
    }

    /* -----[ Glowing Text ]--------------------------------------------------------------------- */
    .about {font-size: 1.1em;color:#697074;}
    .about:hover {color:#ccc;}

    /* -----[ popup layer ]--------------------------------------------------------------------- */
    #dropdownbox {
    position: absolute;
    visibility: hidden;
    left: 400px;
    top: 400px;
    width: 384px;
    height: 220px;
    background-color: #F5F5F5;
    padding: 8px;
    color: #000000;
    }

    /* -----[ Boxes ]--------------------------------------------------------------------- */
    .thinBla {
    border-width: 1px;
    border-color: #000000;
    }

    .inputBlack {
    font-size: 14px;
    font-weight: normal;
    color:#FFFFFF;
    border: 1px solid #FFFFFF;
    background-color: #000000;
    height: 20px;
    }

  2. #2
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    It seems that Firefox has problems with parsing comments
    If you remove all your HTML comments, it will work fine.

    Surprisingly, removing one dash from the comment closing tag, will also fix the problem.
    Code:
    Fails:
    <!---Div header end---->
    Works:
    <!---Div header end--->
    Having 5 dashes, fails, yet having 6 dashes, works again. Really weird.
    Last edited by DimX; 07-14-2008 at 04:29 PM.

  3. The Following User Says Thank You to DimX For This Useful Post:

    burginsteve (07-14-2008)

  4. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Code:
    <!--
    Code:
    -->
    are the proper html and xhtml comment start and end tags, if you wish to add additional dashes, just leave a space inbetween the comment declaration and the remaining delimiter

    Code:
    <!-- -------------------
    Code:
    -------------------- -->
    You can use anything after the space, hence it being a comment.

  5. #4
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    Well, I did a bit of research on SGML comments and it turns out that there are comment declarations and there are comments.

    A comment declaration begins with <! and ends with >. Inside the comment declaration there can be zero or more comments.
    A comment starts with -- and ends also with --.

    White space is permitted everywhere except between the start of comment declaration and the start of the first comment (<!--).

    So for example, the following is a legal comment declaration with two comments:
    Code:
    <!------> hello-->
    IE7, Opera 9 and Safari 3.1 fail to respect these rules. Only Firefox 3 treats them correctly.

    Btw boogyman, your comment start tag <!-- ------------------- will fail, as it contains an unexpected token, where either a comment start or a comment declaration end is expected:
    Code:
    <!-- --|----|----|----|----|-

  6. #5
    Join Date
    May 2007
    Posts
    31
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    I don't know how you spotted that one but you are perfectly right. Thanks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •