• Locked
2 replies [Last post]
Sun, 2010-02-07 05:50
JeremyC
JeremyC's picture
User offline. Last seen 29 weeks 2 days ago. Offline
newbie
Timezone: GMT-5
Joined: 2010-01-23
Posts: 5
Points: 7

Okay, I have a very strange problem and it appears to only be with Firefox though I've only tested with FF and IE8. As with any normal layout I have a container DIV and two floated DIVs inside the container for my sidebar and content. Here's the problem and it doesn't do it all the time: the DIV with hosts the content will sometimes drop down below the sidebar DIV instead of floating next to it. Strange thing is that it only does it occasionally. I've include two images to help you see what I'm talking about:

This is the correct layout:
Correct Image

And this is the layout which seems to display only part of the time:
Incorrect Image
(the DIVs are outlined in red)

You can see it for yourself here: http://www.jeremyspcservices.co.cc/ If the incorrect layout doesn't load at first just simply click "Home" until it does. I'm using Firefox 3.5.7

Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Jeremy's PC Services - Professional. Certified. Quality.</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
 
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 
 
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
 
<body>
 
<!--Site Container-->
<div id="site">
 
<!--Banner-->
	<div id="banner">
<img src="/images/banner.png" height="100" width="950" alt="Jeremy's PC Services"/>
<!--Banner End-->
	</div>
 
<!--Drop Down-->
	<div id="drop">
<?php include("menu.html"); ?>
<!--Drop Down End-->
	</div>
 
<!--Content Container-->
	<div id="content">
 
<!--Sidebar-->
		<div id="sidebar">
 
<!--Sidebar Links-->
			<div id="sidebarlinks">
			Test Links
<!--Sidebar Links End-->
			</div>
 
<!--Sidebar Certifications-->
			<div id="certifications">
			<?php include("certs.html"); ?>
<!--Sidebar Certifications End-->
			</div>
 
<!--Sidebar Feedback-->
			<div id="feedback">
			Test Quotes
<!--Sidebar Adverts End-->
			</div>
 
<!--Sidebar Adverts-->
			<div id="adverts">
			Test Advertisements
<!--Sidebar Adverts End-->
			</div>
 
<!--Side Bar End-->
		</div>
 
<!--Page-->
		<div id="page">
		<?php include("home.html"); ?>
<!--Page End-->
		</div>
 
<!--Content Container End-->
	</div>
 
<!--Footer-->
		<div id="footer">
&copy; Jeremy's PC Services 2010. All Rights Reserved.
<!--Footer End-->
		</div>
 
<!--Site Container End-->
</div>
</body>
</html>

Here is the CSS:

/*
Jeremy's PC Services
CSS Master File
Copyright 2010
Created: 01/03/10
*/
 
/*General*/
 
body {
color: #000000;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8em;
}
 
img{
border-style: none;
}
 
h1{
font-size: 1.3em;
margin: 2.5em 0 0 0;
}
 
h1.first{
margin: 1em 0 0 0;
}
 
h2{
font-size: 1em;
margin: 2.5em 0 0 0;
}
 
hr{
width: 80%;
border: 1px solid;
float: left;
}
 
p{
text-indent: 3em;
}
 
p.noindent{
text-indent: 0em;
}
 
ol li{
margin: 0 0 0.5em 0;
}
 
blockquote{
font-weight: bold;
}
 
/*Containers*/
 
#site{
width: 950px;
margin-left: auto;
margin-right: auto;
}
 
#content{
width: 942px;
margin: auto;
display: table;
border-left: 4px solid #000000;
border-right: 4px solid #000000;
background: url('./images/contentbg.gif') repeat-y 50% 0;
clear: both;
}
 
#sidebar{
min-height: 100%;
width: 264px;
padding: 8px 4px;
float: left;
border-right: 2px solid #000000;
}
 
#page{
min-height: 100%;
width: 640px;
padding: 8px 4px;
float: right;
}
 
 
 
/*Banner*/
 
#banner{
height: 100px;
width: 950px;
margin-left: auto;
margin-right: auto;
}
 
 
 
/*Drop-down Navigation*/
 
#drop{
clear: both;
height: 30px;
width: 950px;
background-color: #000000;
float: right;
}
 
#drop ul{
margin: 0;
padding: 0;
float: right;
}
 
#drop li{
width: 110px;
list-style: none;
margin: auto;
padding: 0;
float: left;
text-align: center;
}
 
#drop li li{
height: 25px;
width: 155px;
list-style: none;
margin: auto;
padding: 0;
float: left;
text-align: left;
}
 
#drop a, #drop span {
color: #FFFFFF;
display: block;
margin: 0;
padding: 2px 3px;
text-decoration: none;
}
 
#drop span {
font-size: 1em;
font-weight: bold;
}
 
#drop li:hover>a{
background-color:#3849E0;
color: #FFFFFF;
text-decoration:none;
}
 
#drop li a:hover{
background-color:#3849E0;
color: #FFFFFF;
text-decoration:none;
}
 
#drop li li a:hover{
text-decoration: underline;
}
 
#drop li {position: relative;}
 
#drop ul ul {
position: absolute;
z-index: 500;
list-style: none;
background-color: #000000;
}
 
#drop span.submenu{
display:block;
background: url('./images/arr_white.gif') no-repeat 90% 50%;
}
 
#drop  li:hover>a>span.submenu{
background-image: url('./images/arrv_white.gif');
}
 
div#drop ul ul,
div#drop ul li:hover ul ul,
div#drop ul ul li:hover ul ul
{display: none;}
 
div#drop ul li:hover ul,
div#drop ul ul li:hover ul,
div#drop ul ul ul li:hover ul
{display: block;}
 
 
 
/*Sidebar*/
 
#sidebarlinks{
width: 260px;
margin: 5px auto;
background-color: red;
}
 
#certifications{
width: 260px;
margin: 20px auto 0px auto;
clear: both;
}
 
#adverts{
width: 260px;
margin: 20px auto 0px auto;
clear: both;
}
 
#feedback{
width: 260px;
margin: 20px auto 0px auto;
background-color: green;
clear: both;
}
 
 
 
/*Page*/
 
 
/*Footer*/
 
#footer{
clear: both;
height: 30px;
width: 950px;
color: #FFFFFF;
text-align: center;
line-height: 25px;
background-image: url(/images/footer.png);
}

Top
Tags:
Sun, 2010-02-07 07:57
#1
josephbm91
josephbm91's picture
User offline. Last seen 24 weeks 1 day ago. Offline
rank Regular
Regular
Timezone: GMT-5
Joined: 2010-02-07
Posts: 17
Points: 17

Addons?

Looks fine to me. I'd check you FF addons if you run any. I know my personal site would get distorted by some FireFox ad blocking addons.

IE6: It's OUR fault.

Learn to Hand Code

Top
Sun, 2010-02-07 14:36
#2
JeremyC
JeremyC's picture
User offline. Last seen 29 weeks 2 days ago. Offline
newbie
Timezone: GMT-5
Joined: 2010-01-23
Posts: 5
Points: 7

Addons Ruled Out

It's not the addons causing the problem. I've disabled all the addons on my machine and tested it on several other PCs. All displaying the same problem. As I said above, if it appears normal simply start clicking "Home" over and over again until the DIVs misalign themselves. All my code and CSS also validates.

Top
  • Locked