Forum Moderators: not2easy
Questions:
- Logos will be added by client, via a back-end admin area, to "Sponsors" area. How do I ensure that the bottom of "left_nav" always stays snug up against the top of footer given that I don't know how much space the logos will take up?
- Is there a "cleaner" way of extending the length of "left_nav" without all the <br>s I've put in?
- The "main_graphic," the text "This Website is Sponsored By:" and the "footer_fine_print" all act as if they are hyperlinked when you mouse over them even though they're not. Why?
- In FireFox 3.0.5 the text "This Website is Sponsored By:" is default blue, while in IE 7.0.6 is white, as I intend it. Why?
- Also, the "footer_fine_print" is white, as it should be in FF, but blue in IE. Why?
Any other suggestions for improvements are welcome.
Thanks.
==========================HTML===================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Comp Website</title>
<link href="comp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_wrapper">
<div id="header"><img src="GRAPHICS/header_3.jpg"></div>
<div id="left_nav">
<ul>
<li><a href="javascript:;">Item1</li>
<li><a href="javascript:;">Item2</li>
<li><a href="javascript:;">Item3</li>
<li><a href="javascript:;">Item4a & Item4b </li>
<li><a href="javascript:;">Item5</li>
<li><a href="javascript:;">Item6a Item6b</li>
<li><a href="javascript:;">Item7 </li>
<li><a href="javascript:;">Item8a Item8b</li>
<li><a href="javascript:;">Item9</li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="main">
<br>
<center><img src="GRAPHICS/main_graphic.gif" width="550" height="400" border="0"></center><br>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="logo_bar">This Website is Sponsored By:</div>
<div id="sponsors">
<!-- sponsor logos here -->
</div>
<br id="clear_float" />
<div id="footer">
<ul>
<li><a href="javascript:;">Item1</li>
<li><a href="javascript:;">Item2</li>
<li><a href="javascript:;">Item3</li>
<li><a href="javascript:;">Item4a & Item4b </li>
<li><a href="javascript:;">Item5</li>
<li><a href="javascript:;">Item6a Item6b</li>
<li><a href="javascript:;">Item7 </li>
<li><a href="javascript:;">Item8a Item8b</li>
<li><a href="javascript:;">Item9</li>
</ul>
<div class="footer_fine_print">Footer fine print</div>
</div>
</div> <!-- top_wrapper closing div -->
</body>
</html>
==========================CSS===================================
@charset "utf-8";
body, h1, h2, h3, h4, p, ul, li {margin: 0px; padding: 0px;}
body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: #082561; text-align: center;}
#main_wrapper {text-align: left; width: 950px; background-color: #fff; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;}
#header {width:950px;}
#left_nav {float: left; width: 175px; padding: 15px 5px 0 10px; color:#FFFFFF; background: #65779d; text-decoration: none;}
#left_nav ul {font-size: 80%; list-style-type: none; padding 0; margin 0;}
#left_nav li {display: block; padding: 15px 15px 15px 10px; }
#left_nav li a {text-decoration: none; color:#FFF;}
#left_nav li a:hover {color:#ada54a;} #left_nav li a:visited {color:#fff;}
#main {margin: 0 0 0 200px; padding: 10px 30px 10px 10px;}
#logo_bar {font-family:Verdana, Geneva, sans-serif; margin: 0 0 0 192px; color: white; font-size: 12px; background-color: #333; text-align:center;}
#sponsors {margin: 0 0 0 192px;}
#clear_float {clear:both; height:0; font-size: 1px; line-height: 0px;}
#footer {font-size: 70%; padding: 15px; background: #ccc; height:50px;}
#footer ul {list-style-type: none; padding 0; margin 0; text-align:center;}
#footer li {display: inline;}
#footer li a {text-decoration: none; color:#FFF;}
#footer li a:hover {color:#ada54a;} #footer li a:visited {color:#fff;}
.footer_fine_print {font-size: 100%; text-align:center;}
.footer_fine_print a {text-decoration: none; color: #fff;}
.footer_fine_print a:hover {color:#ada54a;} .footer_fine_print a:visited {color:#fff;}
