Page 1 of 1

CSS Menu List

Posted: Sun Sep 28, 2008 6:06 pm
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>
 
 
 

Re: CSS Menu List

Posted: Sun Sep 28, 2008 8:45 pm
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.