I am having trouble with *gasp* Internet Explorer. Here is the site I am working on. It looks just like I need it to in the latest versions of FireFox and Opera, but IE7 is screwing a lot of stuff up and I was just wondering if some of you could take a look at what I have and give me any suggestions for getting it to look right.Here is my HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Belmont County Health Department</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" type="text/css" href="main.css"><script LANGUAGE="JavaScript">image1 = new Image();image1.src = "images/arrow_over.jpg";image2 = new Image();image2.src = "images/arrow_over.jpg";image3 = new Image();image3.src = "images/arrow_over.jpg";image4 = new Image();image4.src = "images/arrow_over.jpg";image5 = new Image();image5.src = "images/arrow_over.jpg";image6 = new Image();image6.src = "images/arrow_over.jpg";image7 = new Image();image7.src = "images/arrow_over.jpg";</script></head><body><div style="width:120px; height:120px; position:absolute; left:850px; top:5px; z-index:4; background-image:url(images/seal.png); background-repeat:no-repeat; background-position:center;"></div><!-- BEGIN HEADER --><div style="background-color:#FF8000; border-bottom-width:thick; border-bottom-color:#FFBF7F; border-bottom-style:solid; width:auto; height:70px; margin-left:-8px; margin-right:-8px; margin-top:-8px; z-index:1"><table border="0" cellpadding="0" cellspacing="0" style="position:relative; left:30px; top:0px; background-color:#FFFFFF; width:200px; height:100%;"><tr><td><img src="images/logo.jpg" alt="Logo" title="Click here to go home."></td></tr></table></div><!-- END HEADER --><div style="background-image:url(images/bg_spikyhair.jpg); background-position:left; background-repeat:no-repeat; background-color:#CCCCCC; width:auto; height:275px; margin-left:-8px; margin-right:-8px; z-index:1;"><table border="0" cellpadding="0" cellspacing="0" style="position:relative; left:30px; top:0px; opacity:0.5; width:200px; height:100%;"><tr><td> </td><td> <a href="http://www.google.com" onmouseover="image1.src='images/arrow_over.jpg';" onmouseout="image1.src='images/arrow_out.jpg';"> <img name="image1" src="images/arrow_out.jpg" border=0><span> Nursing Division</span> </a> <br> <a href="http://www.google.com" onmouseover="image2.src='images/arrow_over.jpg';" onmouseout="image2.src='images/arrow_out.jpg';"> <img name="image2" src="images/arrow_out.jpg" border=0><span> Environmental Division</span> </a> <br> <a href="http://www.google.com" onmouseover="image3.src='images/arrow_over.jpg';" onmouseout="image3.src='images/arrow_out.jpg';"> <img name="image3" src="images/arrow_out.jpg" border=0><span> Vital Statistics</span> </a> <br> <a href="http://www.google.com" onmouseover="image4.src='images/arrow_over.jpg';" onmouseout="image4.src='images/arrow_out.jpg';"> <img name="image4" src="images/arrow_out.jpg" border=0><span> W I C</span> </a> <br> <a href="http://www.google.com" onmouseover="image5.src='images/arrow_over.jpg';" onmouseout="image5.src='images/arrow_out.jpg';"> <img name="image5" src="images/arrow_out.jpg" border=0><span> Family Planning</span> </a> <br> <a href="http://www.google.com" onmouseover="image6.src='images/arrow_over.jpg';" onmouseout="image6.src='images/arrow_out.jpg';"> <img name="image6" src="images/arrow_out.jpg" border=0><span> Disaster Preparedness</span> </a> <br> <a href="http://www.google.com" onmouseover="image7.src='images/arrow_over.jpg';" onmouseout="image7.src='images/arrow_out.jpg';"> <img name="image7" src="images/arrow_out.jpg" border=0><span> Forms</span> </a></td></tr></table></div><!-- BEGIN BODY --><div style="background-color:#4690B1; border-top-width:thick; border-top-color:#97DDFF; border-top-style:solid; width:auto; height:auto; top:0px; margin-left:-8px; margin-right:-8px; margin-bottom:-8px; z-index:1"><table border="0" cellpadding="0" cellspacing="0" style="position:relative; left:30px; top:0px; height:100%"> <tr> <td width="200px" bgcolor="#A3C8D8" align="center" valign="top"> <!-- ROW 1 ~~START~~ CELL 1 --> <br> <table border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td class="light_top_left"></td> <td class="light_top"></td> <td class="light_top_right"></td> </tr> <tr> <td class="light_left"></td> <td bgcolor="#FFFFFF" width="142px"> <img src="images/alerts_advisories.jpg" alt="Alerts and Advisories" title="Click here for the latest Emergency Alerts and Advisories."> </td> <td class="light_right"></td> </tr> <tr> <td class="light_bottom_left"></td> <td class="light_bottom"></td> <td class="light_bottom_right"></td> </tr> </table> <br> <table border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td class="light_top_left"></td> <td class="light_top"></td> <td class="light_top_right"></td> </tr> <tr> <td class="light_left"></td> <td bgcolor="#FFFFFF" width="142"> <img src="images/header_news.jpg" alt="News" title="Get your latest Health Department news here."> <br><br> <div style="text-align:justify;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam mauris ante, faucibus ac, bibendum cursus, fringilla ut, metus. Sed elit. Aliquam fermentum.</div> </td> <td class="light_right"></td> </tr> <tr> <td class="light_bottom_left"></td> <td class="light_bottom"></td> <td class="light_bottom_right"></td> </tr> </table> <!-- ROW 1 ~~END~~ CELL 1 --> </td> <td valign="top" width="350px" style="padding:0px 15px 0px 15px;"><br> <!-- ROW 1 ~~START~~ CELL 2 --> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#4690B1"> <tr> <td class="dark_top_left"></td> <td class="dark_top"></td> <td class="dark_top_right"></td> </tr> <tr> <td class="dark_left"></td> <td bgcolor="#FFFFFF"> <h2>Title</h2> <div class="rule"></div> <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam mauris ante, faucibus ac, bibendum cursus, fringilla ut, metus. Sed elit. Aliquam fermentum. Aliquam arcu. Proin mollis quam vitae massa. Ut augue mauris, vulputate ac, suscipit sed, aliquet ac, justo. Morbi semper magna nec ante. Vivamus pede lacus, dignissim vel, elementum a, hendrerit sed, enim. Curabitur id mi nec enim ornare rhoncus. Nullam lectus ligula, molestie pharetra, vestibulum et, pharetra et, enim. Suspendisse ultrices dictum justo. Integer enim. Aenean nec nisi. Nulla ante. Ut risus. Cras erat metus, tincidunt a, faucibus id, euismod vel, lorem. Cras et enim. Duis quis turpis eget velit pulvinar porttitor. Duis tincidunt congue orci. Maecenas dapibus eros sit amet nibh.</p> </td> <td class="dark_right"></td> </tr> <tr> <td class="dark_bottom_left"></td> <td class="dark_bottom"></td> <td class="dark_bottom_right"></td> </tr> </table> <br> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#4690B1"> <tr> <td class="dark_top_left"></td> <td class="dark_top"></td> <td class="dark_top_right"></td> </tr> <tr> <td class="dark_left"></td> <td bgcolor="#FFFFFF"> <h2>Title</h2> <div class="rule"></div> <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam mauris ante, faucibus ac, bibendum cursus, fringilla ut, metus. Sed elit. Aliquam fermentum. Aliquam arcu. Proin mollis quam vitae massa. Ut augue mauris, vulputate ac, suscipit sed, aliquet ac, justo. Morbi semper magna nec ante. Vivamus pede lacus, dignissim vel, elementum a, hendrerit sed, enim. Curabitur id mi nec enim ornare rhoncus. Nullam lectus ligula, molestie pharetra, vestibulum et, pharetra et, enim. Suspendisse ultrices dictum justo. Integer enim. Aenean nec nisi. Nulla ante. Ut risus. Cras erat metus, tincidunt a, faucibus id, euismod vel, lorem. Cras et enim. Duis quis turpis eget velit pulvinar porttitor. Duis tincidunt congue orci. Maecenas dapibus eros sit amet nibh.</p> </td> <td class="dark_right"></td> </tr> <tr> <td class="dark_bottom_left"></td> <td class="dark_bottom"></td> <td class="dark_bottom_right"></td> </tr> </table> <!-- ROW 1 ~~END~~ CELL 2 --> <br> </td> <td valign="top" width="350px"><br> <!-- ROW 1 ~~START~~ CELL 3 --> <table border="0" cellpadding="0" cellspacing="0" bgcolor="#4690B1"> <tr> <td class="dark_top_left"></td> <td class="dark_top"></td> <td class="dark_top_right"></td> </tr> <tr> <td class="dark_left"></td> <td bgcolor="#FFFFFF"> <h2>Title</h2> <div class="rule"></div> <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam mauris ante, faucibus ac, bibendum cursus, fringilla ut, metus. Sed elit. Aliquam fermentum. Aliquam arcu. Proin mollis quam vitae massa. Ut augue mauris, vulputate ac, suscipit sed, aliquet ac, justo. Morbi semper magna nec ante. Vivamus pede lacus, dignissim vel, elementum a, hendrerit sed, enim. Curabitur id mi nec enim ornare rhoncus. Nullam lectus ligula, molestie pharetra, vestibulum et, pharetra et, enim. Suspendisse ultrices dictum justo. Integer enim. Aenean nec nisi. Nulla ante. Ut risus. Cras erat metus, tincidunt a, faucibus id, euismod vel, lorem. Cras et enim. Duis quis turpis eget velit pulvinar porttitor. Duis tincidunt congue orci. Maecenas dapibus eros sit amet nibh.<br>Donec malesuada, erat ut accumsan posuere, felis purus pulvinar turpis, et pellentesque libero augue non libero. Vivamus a diam. Pellentesque enim. Nunc sollicitudin turpis sed lectus. Donec vitae arcu. Duis dignissim turpis at metus. Aliquam varius, ante sit amet semper viverra, ligula nisi blandit nibh, in tincidunt erat augue varius augue. Integer et velit sed lacus aliquet pellentesque. Nam faucibus nibh non enim. Suspendisse eget est id nulla condimentum hendrerit. Aenean ipsum pede, consequat et, ultricies nec, malesuada eu, odio. In porttitor egestas metus. In et turpis. Donec convallis commodo dui. Nunc interdum. Aenean blandit orci non libero. Fusce consequat purus in eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam imperdiet elit. Aliquam et felis.</p> </td> <td class="dark_right"></td> </tr> <tr> <td class="dark_bottom_left"></td> <td class="dark_bottom"></td> <td class="dark_bottom_right"></td> </tr> </table> <!-- ROW 1 ~~END~~ CELL 3 --> </td> </tr></table><!-- BEGIN FOOTER --><div style="background-color:#737373; border-top-width:thick; border-top-color:#A7A7A7; border-top-style:solid; width:auto; height:70px; z-index:1 "><table border="0" cellpadding="0" cellspacing="0" style="position:relative; height:100%; left:30px; top:0px; background-color:#B9B9B9;"><tr><td width="200px"><div class="footer" style="font-size:9px;">Site design by<br><a href="http://www.youradsolution.com" title="Click here to go to the Liquid Media Solutions website." style="color:#737373;">Liquid Media Solutions, LLC.</a><br>© Copyright 2007<br>Belmont County Health Department<br>All Rights Reserved</div></td><td bgcolor="#737373" style="width:750px; text-align:center"><div style="color:#B9B9B9; font-size:12px;"><a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">Nursing Division</a> : : <a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">Environmental Division</a> : : <a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">Vital Statistics</a> : : <a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">W I C</a> : : <a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">Family Planning</a> : : <a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">Distaster Predaredness</a> : : <a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">Forms</a><br> <a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">Home</a> : : <a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">Contact Us</a> : : <a href="http://www.google.com" title="THA GOOGLES!" style="color:#B9B9B9;">Login</a></div></td></tr></table></div><!-- END FOOTER --></div><!-- END BODY --></body></html>
Yeah the is still some garble in there, I usually clean up the code after I get it working right.Here is the CSS
/* CSS Document *//* START LIGHT BOX */.light_top_left{background-image:url(images/light_top_left.jpg);background-repeat:no-repeat;width:15px;height:15px;}.light_top_right{background-image:url(images/light_top_right.jpg);background-repeat:no-repeat;width:15px;height:15px;}.light_bottom_left{background-image:url(images/light_bottom_left.jpg);background-repeat:no-repeat;width:15px;height:15px;}.light_bottom_right{background-image:url(images/light_bottom_right.jpg);background-repeat:no-repeat;width:15px;height:15px;}.light_left{background-image:url(images/light_left.jpg);background-repeat:repeat-y;width:15px;}.light_top{background-image:url(images/light_top.jpg);background-repeat:repeat-x;height:15px;}.light_right{background-image:url(images/light_right.jpg);background-repeat:repeat-y;width:15px;}.light_bottom{background-image:url(images/light_bottom.jpg);background-repeat:repeat-x;height:15px;}/* END LIGHT BOX *//* START DARK BOX */.dark_top_left{background-image:url(images/dark_top_left.jpg);background-repeat:no-repeat;width:15px;height:15px;}.dark_top_right{background-image:url(images/dark_top_right.jpg);background-repeat:no-repeat;width:15px;height:15px;}.dark_bottom_left{background-image:url(images/dark_bottom_left.jpg);background-repeat:no-repeat;width:15px;height:15px;}.dark_bottom_right{background-image:url(images/dark_bottom_right.jpg);background-repeat:no-repeat;width:15px;height:15px;}.dark_left{background-image:url(images/dark_left.jpg);background-repeat:repeat-y;width:15px;}.dark_top{background-image:url(images/dark_top.jpg);background-repeat:repeat-x;height:15px;}.dark_right{background-image:url(images/dark_right.jpg);background-repeat:repeat-y;width:15px;}.dark_bottom{background-image:url(images/dark_bottom.jpg);background-repeat:repeat-x;height:15px;}/* END DARK BOX */.rule{height:1px;width:90%;background-color:#4690B1;margin-left:auto;margin-right:auto;}a:link{text-decoration:none;color:#000000}a:visited{text-decoration:none;color:#000000}a:active{text-decoration:none;color:#000000}a:hover{text-decoration:none;color:#000000}body{font-family:"Times New Roman", Times, serif}/* START FOOTER NAVIGATION */.footer{color:#737373;text-align:center;font:Verdana, Arial, Helvetica, sans-serif;}.footer a{text-decoration:none;color:#000000}/* END FOOTER NAVIGATION */
This code will probobly change a lot, so you can look at the source on the link I put on the top. Any help would be much appreciated. Thanks.
