DIV tags not working in Mozilla Firefox
Posted: Sun Feb 20, 2011 3:28 am
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;
}
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;
}