...

View Full Version : DIV (with a border) doesn't line up in Firefox 3.6



Jeff_Tackett
12-20-2010, 05:30 AM
Hello,

I have been struggling with the following code and can't seem to figure out what I am doing wrong! I had these three simple divisions: header, nav, and content. Everthing was working fine until I decided to add a 1px border to the content div. After I added the border, now the content div DOES NOT want to float next to the "nav" div anymore! It only appears to happen in FF (I'm using v3.6)

What's worse is that when I use FF to view the below code on my PC it works fine!!! It's only when I upload it to me web server and view it from their does it do this weird alignment thing.

Can someone please peruse my code (in particular the CSS stuff)???

Thanks in advance,

http://www.downriveractivities.com/seasonal/winter/border_bug2.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" />

<style type="text/css">

#banner {
width: 1000px;
height: 150px;
float: none;
text-align: center;
border: 0;
margin-top: 25px;
margin-bottom: 25px;
position: relative; /* peekaboo bug fix for IE6 */
min-width: 0px; /* peekaboo bug fix for IE7 */
background-color: #996;
}

#page_body {
width: 1000px;
float: none;
text-align: center;
}

#nav_bar {
width: 200px;
float: left;
clear: none;
position: relative;
background-color: #063;
}

#page_content {
width: 760px;
float: right;
clear: none;
margin: 0px 0px 0px 38px;
padding: 0;
border-style:solid;
border-width:1px;
border-color:#B9A59C;
background-color: #FFC;
}

</style>



<title>Why won't this work?</title>
</head>

<body>

<!------------------------------------------->
<!-- BANNER DIVISION -->
<!------------------------------------------->
<div id="banner">This is the banner</div>


<!------------------------------------------->
<!-- ENTIRE BODY DIVISION -->
<!------------------------------------------->
<div id="page_body">

<!------------------------------------------->
<!-- NAVIGATION DIVISION -->
<!------------------------------------------->
<div id="nav_bar">
Navigation 1<br />
Navigation 2<br />
Navigation 3<br />
Navigation 4<br />
Navigation 5<br />
</div> <!-- End of "nav_bar" -->

<!------------------------------------------->
<!-- CONTENT DIVISION -->
<!------------------------------------------->
<div id="page_content">
Why won't this line up with the top of the navigation bar?<br />
It works fine when viewed locally...<br />
AND it only happens in Firefox!!<br />
</div> <!-- End of "page_content" -->




</div> <!-- End of "page_body" -->


</body>
</html>

SB65
12-20-2010, 09:16 AM
Lines up for me in FF.

teedoff
12-20-2010, 04:51 PM
Looks line up to me as well. Here is a screenshot of FF 3.6

Jeff_Tackett
12-21-2010, 05:41 AM
That's weird, cause this is what it looks like when I view it in FF 3.6.13 (see attachment). I looked at this on my work FF and it looks ok (dunno exact version). Is it possible I have a caching issue? Could Firefox be using an old CSS type because it is stored in temporary internet files?

Remember I only see this problem when I am viewing it from the webserver and not the local pc....

Any tips or suggestions are greatly appreciated! ;)

SB65
12-21-2010, 08:36 AM
Could be caching, because that's the same version of FF I'm using. Have you tried clearing out your cache?

Kor
12-21-2010, 11:57 AM
I confirm that it looks OK in FF (FF 3.6.13 / Win7). Clear the cache. See also if it is not a problem of the server's cache (even I doubt, as we can see it OK).

Excavator
12-21-2010, 01:24 PM
Hello Jeff_Tackett,
Try making some more changes and see if they show up when you refresh your browser. That way you'll know if your cache is the problem or not.
Try making your CSS look like this once -
html, body {background: #f63;}
#banner {
height: 150px;
width: 1000px;
margin: 25px 0;
text-align: center;
background: #996;
}

#page_body {
width: 1000px;
text-align: center;
overflow: auto;
background: #ccc;
}
#nav_bar {
width: 200px;
float: left;
position: relative;
background: #063;
}
#page_content {
margin: 0 0 0 238px;
padding: 0;
border: 1px solid #B9A59C;
background: #ffc;
}

Jeff_Tackett
12-22-2010, 03:21 AM
Yep, it was the cache alright. I had to clear it and reload the page and all was good. Man, it's crazy how the simple things can trip you up and waste a ton of your time.

Thanks for taking the time to look at this.:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum