Fine in IE7 but not in FF3

[burginsteve]

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;
}

[DimX]

It seems that Firefox has problems with parsing comments :confused:
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.


Fails:
<!---Div header end---->
Works:
<!---Div header end--->

Having 5 dashes, fails, yet having 6 dashes, works again. Really weird.

[boogyman]

<!--

-->
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


<!-- -------------------

-------------------- -->

You can use anything after the space, hence it being a comment.

[DimX]

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:


<!------> 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:


<!-- --|----|----|----|----|-

[burginsteve]

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