Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    DIV (with a border) doesn't line up in Firefox 3.6

    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/s...rder_bug2.html

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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Lines up for me in FF.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Looks line up to me as well. Here is a screenshot of FF 3.6
    Attached Thumbnails Attached Thumbnails DIV (with a border) doesn't line up in Firefox 3.6-page.jpg  

  • Users who have thanked teedoff for this post:

    Jeff_Tackett (12-22-2010)

  • #4
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!
    Attached Thumbnails Attached Thumbnails DIV (with a border) doesn't line up in Firefox 3.6-layout_bug.jpg  

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Could be caching, because that's the same version of FF I'm using. Have you tried clearing out your cache?

  • Users who have thanked SB65 for this post:

    Jeff_Tackett (12-22-2010)

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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).
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    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 -
    Code:
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Jeff_Tackett (12-22-2010)

  • #8
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •