DIV tags not working in Mozilla Firefox

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
snaj
Forum Newbie
Posts: 2
Joined: Sat Feb 12, 2011 10:28 am

DIV tags not working in Mozilla Firefox

Post by snaj »

I have a piece of html that does not display correctly in Firefox, it leaves out some DIV tags. In every Div tag i have put a border so that i can easily locate it while troubleshooting. The html works well in IE, Flock, Safari and Chrome. The second problem is that the external css that i am using is entirely ignored by Opera. Pls assist. The code is as below:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>

<!---Entire body Container----------->
<div id="entire_body">
<!-------top most container for user status etc container----->
<div id="top_most">
top_most
</div>
<!---logo and slogan container------------------->
<div id="logo">
logo container
</div>
<!-----------top menu container----------->
<div id="top_menu">
top menu container
</div>
<!---left menu container----------->
<div id="left_menu">
left menu goes here
</div>
<!------------home middle body container----------->
<div id="home_middle_body">
home middle body</div>

<!--------registration container----------------------------->
<div id="registration">
registration
</div>
<div id="clear"></div>
<!------------footer container --------------->
<div id="footer">
footer.........
</div>
</div>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

#entire_body {
border-style: solid;
border-color:#F00;
width:950px;
margin-left:auto;
margin-right:auto;
}

#top_most {
border-style:solid;
border-color:#006;
}

#logo{
border-style:solid;
border-color:#0F0;
}

#top_menu {
border-style:solid;
border-color:#F30;
}

#left_menu {
border-color:#000;
border-style:solid;
float:left;
width:180px;
}

#home_middle_body {
border-style:solid;
border-color:#C06;
float:left;
width:420px;
overflow:auto;

}

#registration {
border-style:solid;
border-color:#00F;
float:left;
width:320px;
}

#footer {
border-color:#F0C;
border-style:solid;
}

#clear {
clear:both;
}
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: DIV tags not working in Mozilla Firefox

Post by McInfo »

I think you have just revealed an oddly-paired-hyphen bug. Under some circumstances, when an odd number of hyphen pairs appear in a comment tag, Firefox (3.6.13) does not treat it as a comment. The problem occurs in the presence of an XHTML 1.0 Transitional doctype, but not in the absence of a doctype.

Remove all of the extra hyphens from the comments and see what happens.

Edit: Upon further investigation, I have concluded that this is not really a "bug". The XML and HTML specifications explicitly state that comments must not contain two consecutive hyphens.
snaj
Forum Newbie
Posts: 2
Joined: Sat Feb 12, 2011 10:28 am

Re: DIV tags not working in Mozilla Firefox

Post by snaj »

Thank you very much McInfo.

When i removed the extra hyphens, the problem was solved.
Post Reply