CSS Menu List

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
assgar
Forum Commoner
Posts: 46
Joined: Fri Apr 20, 2007 9:00 pm

CSS Menu List

Post by assgar »

Hi

My menu list displays correctly for Internet explorer.
I am having problems with my menu list display properly in firefox.
The row height should be 15px, but in firefox the row display twice as height than in IE.

Note:
The menue display a link, mouse over should change the colour of the link and it background

OS:Win server 2003
Language: PHP

How can I resolve this issue?

Code: Select all

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="author" content="mazuki" />
  <link href="../config/pulse_config.css" rel="stylesheet" type="text/css"/>
 
 
<style type="text/css">
<!--
.default
{
  margin-left:0;
  margin-right:0;
  text-align:center;
  font-family: Arial, Helvetica, sans-serif; 
  font-size:14px; 
  font-weight:600;
  vertical-align:top;
}
.default ul
{
  margin-left:0;
  padding-left:0;
  white-space:nowrap;
}
.default li
{
  display:inline;
  list-style-type:none;
}
.default a
{
   padding:3px 10px;
}
.default a:link
{
   color:#ffffff;
   background-color:#036;
   text-decoration:none;
}
.default a:visited
{
  color:#ffffff;
  background-color: #000000;
  text-decoration:none;
}
.default a:hover
{
   color:blue;
   background-color:#55ae3a;
   text-decoration:none;
}
-->
</style>
    
<title>Home Page</title>
</head>
 
<body bgcolor="#e0e0e0">
<!--      processor      -->
<form  action="process.php" method="post">
 
<div id="pat-dash-first-layer">
 
 
   <table height="30" width="100%" border="1">
     <tr height="15">
        <td height="39" align="right"><div class="default"><ul><li><a href ="../change_form.php">Change Password</a></ul></li></div></td>
     </tr>
     <tr height="15" align="center">
        <td width = "100%"colspn ="2"><div id="location-bar" >Home Page</div></td>
     </tr>
    </table>
 
</form>
</body>
</html>
 
 
 
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: CSS Menu List

Post by califdon »

For one thing, you are setting the row height to 15, then immediately setting the detail height to 39. I suppose IE is using the row height and FF is using the detail height. You should eliminate that logical conflict. The detail cannot be higher than the row that contains it! Personally, I never use row heights, ever, for this reason. Set your <td> CSS property to what you want it to be and remove all those old-style height=15 or whatever statements.
Post Reply