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] <!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> PHP: [/code]
The first thing to do when you run into trouble is validate your HTML and CSS. Different browsers handle errors differently. One problem which could be the cause is this: You open the <ul> then open the <li>, then you close the <ul> because you close the <li>. It should be this:
If that doesn't work you can always use a separate css file for IE instead of hacking your way through it (as most people do) There are many ways of doing that, as well as using javascript to detect browsers and load separate css files. I definitely recommend validating your html/css first and see if that resolves your issue.
Hi Thanks for responding. The problem persists. In creating the example I mixed up the </li> and </ul> but that is not the issue. I wanted to keep my example simple. I do use a CSS file with a function to display my links. This is the real function placed on the page to create the link: [code] // home page module section buttons function hom_sect_menu($hom_sect_id) { if($hom_sect_id == 10) { echo "<td width='35%' height='15' align='right'> <div id='nav-butt'> <ul> <li><a href ='../change_form.php'>"."Change Password"."</a></li> </ul> < /div> </td>"; } } PHP: [/code]