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>© 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; }
Bookmarks