Home/ Questions/Q 8989615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T22:18:16+00:00

I have created a rollover menu with custom buttons that displays correctly in IE

  • 0

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. Image: How it should look like
HTML 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="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="PersonalInfo.php" style="display:block;">&nbsp;</a></th>
            <th class="rollover_View_Client"><a href="DisplayInfo.php" style="display:block;">&nbsp;</a></th>
            <th class="rollover_Search_Client"><a href="Search.php" style="display:block;">&nbsp;</a></th>
            <th class="menu_end"></th>
        </tr>
      </table>
    ....
  </body>
</html>

CSS 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");
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would strongly suggest that you stop using a table, and instead use DIV or SPAN tags, or a UL and LI construction.

    Your problem is the display: inline; line. Inline elements have no size, so they ignore your width and height requirements. If you use the table, simply remove the line. If you use one of the others, consider using display: inline-block; instead?

    • 0