In Firefox, the background colors, image, etc, of the menu don't wrap around the floated content area even thought the text does. In IE it does work "correctly".
<!-- m --><a class="postlink" href="http://www.matts-website.net/redesign/You">http://www.matts-website.net/redesign/You</a><!-- m --> have floated your content. Usually another div is also floated (menu?), followed by a clear:both (<p class="credit"?)
Try:
#content, #menu {float:left}
.credit {clear:both;}Yes, and no. Yes, that solved the previous problem, but it created new ones. The border on the left side of the content is missing and the background color/image doesn't go down past the menu. Again, it looks correct in IE, but incorrect in Firefox.Try this outline:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Matt's Website css-forum</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#rap { margin:0 auto; width:750px; border:1px solid #242424; background:#EDEDDA url(bg4.gif) repeat-y top right; }
#header { background:#B5B594 url(bg4.gif) repeat-y top right; border-bottom:1px solid #242424; }
#content { float:left; width:500px; padding-bottom:20px;}
#menu { float:left; color:#B5B594; font-weight:bold; width:246px; border-left:1px dashed #B5B594; border-bottom:1px dashed #B5B594; background:#E8E8CE url(bg4.gif) repeat-y top right; }
.credit {clear:both; border-top:1px solid #242424; padding:10px 0; margin:0; background:#B5B594 url(bg4.gif) repeat-y top right; text-align:center; }
/* more css */
-->
</style>
</head>
<body>
<div id="rap">
<h1 id="header"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.matts-website.net/" title="Matt’s Website">Matt’s Website</a></h1>
<div id="content">
<!-- content stuff -->
</div>
<div id="menu">
<!-- menu stuff -->
</div>
<p class="credit"><!--62 queries.--> 8.337 || <cite>Powered by <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform"><strong>WordPress</strong></a></cite></p>
</div>
</body>
</html>
#rap is the container for the header and footer and the floated divs.
It looks correct in IE and Moz.
Don't forget to clean up all the un-closed elements causing validation errors.
<!-- m --><a class="postlink" href="http://www.matts-website.net/redesign/You">http://www.matts-website.net/redesign/You</a><!-- m --> have floated your content. Usually another div is also floated (menu?), followed by a clear:both (<p class="credit"?)
Try:
#content, #menu {float:left}
.credit {clear:both;}Yes, and no. Yes, that solved the previous problem, but it created new ones. The border on the left side of the content is missing and the background color/image doesn't go down past the menu. Again, it looks correct in IE, but incorrect in Firefox.Try this outline:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Matt's Website css-forum</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#rap { margin:0 auto; width:750px; border:1px solid #242424; background:#EDEDDA url(bg4.gif) repeat-y top right; }
#header { background:#B5B594 url(bg4.gif) repeat-y top right; border-bottom:1px solid #242424; }
#content { float:left; width:500px; padding-bottom:20px;}
#menu { float:left; color:#B5B594; font-weight:bold; width:246px; border-left:1px dashed #B5B594; border-bottom:1px dashed #B5B594; background:#E8E8CE url(bg4.gif) repeat-y top right; }
.credit {clear:both; border-top:1px solid #242424; padding:10px 0; margin:0; background:#B5B594 url(bg4.gif) repeat-y top right; text-align:center; }
/* more css */
-->
</style>
</head>
<body>
<div id="rap">
<h1 id="header"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.matts-website.net/" title="Matt’s Website">Matt’s Website</a></h1>
<div id="content">
<!-- content stuff -->
</div>
<div id="menu">
<!-- menu stuff -->
</div>
<p class="credit"><!--62 queries.--> 8.337 || <cite>Powered by <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform"><strong>WordPress</strong></a></cite></p>
</div>
</body>
</html>
#rap is the container for the header and footer and the floated divs.
It looks correct in IE and Moz.
Don't forget to clean up all the un-closed elements causing validation errors.