top bar in FF

almightyegg · 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;
}

wildteen88 · 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;
}

almightyegg · February 11, 2007

Wow! Looks great, except the input fields now don't show like before

almightyegg · February 11, 2007

Oh sorry my mistake. I'd messed it up. It's sorted now. Thank you

Sign In

top bar in FF

Recommended Posts

almightyegg

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

almightyegg

Link to comment

Share on other sites

almightyegg

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information