almightyegg Posted February 11, 2007 Share Posted February 11, 2007 As usual, FireFox doesn't like my coding. Link - My site[/] In IE it works fine but...in firefox it has compacted everything and added padding etc... html <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td background="images/top_bg.gif"> <h2>The Online Society</h2></td><td background="images/top_bg.gif"> <div id="menu"> <ul><li><a href="http://www.koggdesigns.co.uk" class="current">Home</a></li> <li><a href="http://www.forum.koggdesigns.co.uk">Forum</a></li> <li><a href="http://www.games.koggdesigns.co.uk">Games</a></li> <li><a href="http://www.koggdesigns.co.uk/register.php">Register</a></li> <li><a href="http://www.contact.koggdesigns.co.uk">Contact</a></li></ul> </div></td></tr></table> CSS #menu ul { margin: 0; list-style: none; } #menu li { display: block; float: left; white-space: nowrap; } #menu li a { display: block; padding: 55px 20px 12px 20px; text-decoration: none; color: #fff; font-weight: bold; } #menu a { width:1%; } #menu li a:hover { background: url(/images/bg_menu.gif); } #menu li a.current { letter-spacing: 1px; color: gray; background: url(/images/bg_menu.gif); } #menu li a.current:hover { color: #fff; } Link to comment https://forums.phpfreaks.com/topic/38023-top-bar-in-ff/ Share on other sites More sharing options...
wildteen88 Posted February 11, 2007 Share Posted February 11, 2007 Try this instead: <!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" /> <title>The Online Society</title> <link rel="stylesheet" type="text/css" href="default.css" /> </head> <body> <div id="header"> <h1>The Online Society</h1> <div id="menu"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Games</a></li> <li><a href="#">Register</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div id="login"> <h3>Login</h3> <form action="home.php" method="post"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td valign="middle">Username:</td> <td><input type="text" name="email" class="txtbox" /></td> </tr> <tr> <td valign="middle">Password:</td> <td><input type="password" name="password" class="txtbox" /> </tr> <tr><td colspan="2"><input type="submit" name="submit" value="Login" class="btn" /></td></tr> </table> </form> </div> </body> </html> body { margin: 0px; padding: 0px; color: #999999; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.6em; } #header { background-image: url(images/top_bg.gif); background-repeat: repeat-x; height: 88px; } #header h1, #menu ul { margin: 0px; padding: 0px; } #header h1 { margin: 0px; padding: 30px 0 0 60px; font-size: 24px; float: left; } #menu { display: block; float: right; } #menu ul { margin: 0; list-style: none; } #menu li { display: block; float: left; white-space: nowrap; } #menu li a { display: block; padding: 57px 20px 12px 20px; text-decoration: none; color: #fff; font-weight: bold; } #menu li a:hover { background: url("./images/bg_menu.gif"); } #menu li a.current { letter-spacing: 1px; color: gray; background: url("./images/bg_menu.gif"); } #menu li a.current:hover { color: #fff; } #login { width: 300px; padding: 15px; } #login h3 { font-size: 16px; padding: 0; margin: 0; } #login input.txtbox { padding: 2px 8px 2px 8px; border: solid 0px #fff; margin: 3px; /* hieght: 20px; - no need to set the height. Let the padding do this. */ width: 184px; /* 16px offset remeber width = width + (LR padding + LR boarder) NOTE: LR = Left and Right */ background: transparent url("./images/textfield_bg.gif") no-repeat right top; } #login input.btn { border: solid 0px #fff; margin: 3px; height: 20px; width: 80px; background: transparent url("./images/textfield_bg2.gif") no-repeat center; } Link to comment https://forums.phpfreaks.com/topic/38023-top-bar-in-ff/#findComment-182054 Share on other sites More sharing options...
almightyegg Posted February 11, 2007 Author Share Posted February 11, 2007 Wow! Looks great, except the input fields now don't show like before Link to comment https://forums.phpfreaks.com/topic/38023-top-bar-in-ff/#findComment-182062 Share on other sites More sharing options...
almightyegg Posted February 11, 2007 Author Share Posted February 11, 2007 Oh sorry my mistake. I'd messed it up. It's sorted now. Thank you Link to comment https://forums.phpfreaks.com/topic/38023-top-bar-in-ff/#findComment-182077 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.