SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Raleigh, North Carolina
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox/Safari Div Float Problem

    After trying a few different methods to accomplish something I'm not sure where to turn next. Here's the problem.

    http://www.blogcatalog.com/layout.htm

    As you can see it looks correct in IE and even Opera however in Firefox & Safari there is a gap on the background image repeat. I'm really confused as to why it would do this. I've tried different ways of positioning and nothing really seems to work. I've attempted to search the forum and google but I was unable to find anything relating this because I'm not really sure what to call it. Below is the XHTML and CSS. The IDs in question are #footer, #left and #content.

    Thanks in advance:

    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" xml:lang="en">
     <head>
     	<title>BlogCatalog.com - The Ultimate Blog Directory / Internet Web Log Directory</title>
     	
     	<link href="styles.css" rel="stylesheet" type="text/css" />
     
     	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     	<meta name="Title" content="BlogCatalog.com - The Ultimate Blog Directory / Internet Web Log Directory" />
     	<meta name="Description" content="The Ultimate Blog Directory / Internet Web Log Directory" />
     	<meta name="Keywords" content="blog, directory, catalog, blog catalog, weblog catalog, blog directory, weblog directory" /> 
     </head>
     
     <body>
     
     <div id="outer">
     	<div id="wrapper">
     		<div id="header">
     			<a href="#">
     		    	<img id="bannertop" src="http://www.imposed.net/banners/imposed-banner.gif" alt="" />
     			</a>
     		</div>
     
     		<div id="navigation">
     			<ul>
     		    	<li><a href="#">Home</a></li>
     		    	<li><a href="#">Blog Directory</a></li>
     		    	<li><a href="#">Popular Blogs</a></li>
     		    	<li><a href="#">Submit A Blog</a></li>
     		    	<li><a href="#">Manage A Blog</a></li>
     				<li><a href="#">FAQ</a></li>
     			</ul>
     		</div>
     		
     		<div id="body">
     			<div id="left">
     				This is the left side<br />
     				This is the left side<br />
     				This is the left side<br />
     				This is the left side<br />
     				This is the left side<br />
     				This is the left side<br />
     
     			</div>
     			<div id="content">
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     
     			</div>
     		</div>
     	</div>
     </div>
     <div id="footer">
     	<span>&copy; BlogCatalog 2004 (<a href="http://validator.w3.org/check/referer" target="_blank" title="Validate XHTML Transitional 1.0">XHTML</a> / <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="Validate CSS2">CSS</a>)</span>
     </div>
     
     </body>
     </html>
    Code:
     html, body {
     	margin: 0;
     	padding: 0;
     }
     
     body {
     	background: url('images/bg_tile.jpg') repeat;
     }
     
     body, div, td, a, p, span {
     	font-family: Verdana, Tahoma, Sans-Serif;
     	font-size: 11px;
     }
     
     h1, h2, h3, h4, h5 {
     	font-family: Arial, Tahoma, Sans-Serif;
     }
     
     ul, li, p {
     	padding: 0;
     	margin: 0;
     }
     
     a {
     	color: #F26522;
     }
     
     /*	Specific ID's	*/
     #outer {
     	width: 800px;
     	background: url('images/shadow_tile.jpg') top center repeat-y;
     	margin: 0 auto;
     }
     
     #wrapper {
     	width: 768px;
     	margin: 0 auto;
     }
     
     #header {
     	background: #fff url('images/logo.jpg') no-repeat bottom left;
     	height: 105px;
     	text-indent: 285px;
     	text-align: center;
     }
     
     #bannertop {
     	border: 0;
     	margin-top: 22px;
     	border: 1px solid #E2E2E2;
     }
     
     /*	Won't work in IE	*/
     #bannertop:hover {
     	border-color: #B4B4B4;
     }
     
     #navigation {
     	text-align: right;
     	border-bottom: 1px solid #E2E2E2;
     	margin: 0 .5em;
     	padding: .5em 0;
     }
     
     #navigation ul {
     	list-style: none;
     }
     
     #navigation ul li {
     	display: inline;
     }
     
     #navigation ul li a {
     	padding: .25em;
     	margin: 0 .25em;
     	text-decoration: none;
     	border-top: 4px solid #E2E2E2;
     	font-weight: bold;
     }
     
     #navigation ul li a:hover {
     	border-color: #B4B4B4;
     }
     
     #body {
     	padding: .5em;
     }
     
     #footer {
     	background: url('images/bg_footer.jpg') top left no-repeat;
     	height: 55px;
     	width: 830px;
     	margin: 0 auto;
     	text-align: center;
     	padding: 18px 0 0 0;
     	clear: both;
     }
     
     #footer span {
     	font-weight: bold;
     	font-size: 10px;
     	padding: 5px;
     	margin: 0 36px;
     	border-top: 1px solid #E2E2E2;
     	display: block;
     }
     
     #left {
     	float: left;
     	width: 150px;
     }
     
     #content {
     	float: right;
     	width: 606px;
     }
    WebJunkie - Behind the scenes of a webmaster

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi, THis is happening because you have floating elements and they need to be cleared. You can fix it by adding this to your code:
    Code:
    </div>
     			<div id="content">
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     				This is where the content can go...<br />
     
     			</div>
    <br style="clear: both" />
     		</div>
     	</div>
     </div>
     <div id="footer">
     	<span>&copy; BlogCatalog 2004 (<a href="http://validator.w3.org/check/referer" target="_blank" title="Validate XHTML Transitional 1.0">XHTML</a> / <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="Validate CSS2">CSS</a>)</span>
     </div>
     
     </body>
     </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Raleigh, North Carolina
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seemed to fix it, thank you very much!
    WebJunkie - Behind the scenes of a webmaster


Bookmarks

Posting Permissions

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