iluvhellokitty4ever
New Member
I have created a rollover menu with custom buttons that displays correctly in IE but not Firefox or Safari. In IE, the menu displays seemlessly across the top of the site. In FF and Safari it shows as a few lines of individual little boxes. I am using an HTML file to call styles from a CSS file. Both files will validate with W3C. Any thoughts on how to get this to display properly in all browsers? Is there a better way to display this menu other than a table with no borders? HTML and CSS below.HTML Code:\[code\]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>PJD</title><link href="http://stackoverflow.com/questions/13873282/menu1.css" rel="stylesheet" type="text/css"></head><body style="background-image:url(/images/GradientBackground.png)"><table border='0' cellspacing='0'><tr><th class="PJD_Logo"></th><th class="rollover_New_Client"><a href="http://stackoverflow.com/questions/13873282/PersonalInfo.php" style="display:block;"> </a></th><th class="rollover_View_Client"><a href="http://stackoverflow.com/questions/13873282/DisplayInfo.php" style="display:block;"> </a></th><th class="rollover_Search_Client"><a href="http://stackoverflow.com/questions/13873282/Search.php" style="display:block;"> </a></th><th class="menu_end"></th></tr></table>....</body></html>\[/code\]CSS Code:\[code\]body {color: #e4e4e4;}th.PJD_Logo {border: 0px;display: inline;width: 125px;height: 48px;background-image: url("/images/PJD_Logo.png");color: transparent;}th.rollover_New_Client {border: 0px;display: inline;width: 125px;height: 48px;background-image: url("/images/btn_New_Client.png");color: transparent;}th.rollover_New_Client:hover {background-image: url("/images/btn_New_Client_over.png");}th.rollover_View_Client {border: 0px;display: inline;width: 125px;height: 48px;background-image: url("/images/btn_View_Client.png");}th.rollover_View_Client:hover {background-image: url("/images/btn_View_Client_over.png");}th.rollover_Search_Client {border: 0px;display: inline;width: 125px;height: 48px;background-image: url("/images/btn_Search_Client.png");}th.rollover_Search_Client:hover {background-image: url("/images/btn_Search_Client_over.png");}th.menu_end {border: 0px;display: inline;width: 500px;height: 48px;background-image: url("/images/menu_end.png");}\[/code\]