CSS troubles, please help :(

[Agenator]

Okay so im working on the navbar of this site and I need to move the link text down to the center of the navbar. I achieved this in IE but FireFox doesn't move it down. Here is my CSS and HTML code and screen shots of IE and FF:

body {
 background-image: url(sliced/background.jpg);
background-repeat: repeat-x;
background-color: black;
 color: #ffffff;
}
#Header {
background-image: url(sliced/header.jpg);
background-repeat: no-repeat;
position: absolute;
width: 807px;
height:313px; 
align: top;
margin-left: 535px; 
 
}
#navbar {
background-image: url(sliced/navbar.jpg);
position: absolute;
width: 807px;
height: 51px;
margin-top: 305px;
margin-left: 535px;
}
#navbar li {
    list-style:none;
    display:inline;
}
 
#navbar a {
    width: 150px;
    color: black;
    text-decoration:none;
font-size: 20px;
text-align: center;     
margin-left: 40px;
margin-top: 15px;
}
#navbar a:hover { 
 
    color:#4e0606;
 
}
 
#content {
background-color: black;
position: absolute;
width: 807px;
height: 100%;
margin-top: 356;
margin-left: 535px;
}
 
 
#login {
border: solid;
border-width: thin;
border-color: grey;
border-height: 100%;
height:100%;
float: left;
background-color: black;
margin-left: 0px;
margin-top: 0px;
width: 250px;
}
 
 
#signup {
position: absolute;
background-color: red;
width: 600px;
}
#forms {
margin-left: 100px;
}
label { 
position : relative;
 width : 15em;
 display : block;
 margin : .5em .5em; 
font-weight: bold;
}
label.button
{
position: relative;
display: block;
margin: .9em -5.5em;
} 
label.newsletter
{posistion: relative;
margin: 2px;
font-size: 12px;
}
label input { 
position : absolute;
 left: 90px;
 top : 0px;
 width : 10em;
 } 
label input.1 { 
position : absolute;
 left: 90px;
 top : 0px;
 width : 15em;
 } 
 
.submit { 
margin-left: 100px;
 }

<div id="content">
 
<div id="login">
<form name ="login" method="post" action="login.php">
<label>Log In</label>
<label>Email: <input type="text" name="email" /> </label>
<label>Password: <input type="password" name="password"/></label>
<label class="button"><input type="submit" name="submit" value="Submit"></label><br>
</form>
<label class="newsletter"><a href="form.html">Sign Up To Recieve Our Newsletter</a></label>
 
</div>
band info here
</div>

IMages
the way i want it(IE)
http://img246.imageshack.us/img246/6318/iempge9.jpg

the way i dont want it (FF)
http://img225.imageshack.us/img225/1231/ffmpec8.jpg

 

[hartawan]

your html code doesnt show how your navigation menu bar is layout...please post more details.. thanks....
but as i can help.. second optioon...treat the navigation links as image rollover.

 

[woiwky]

Like hartawan said, the relevant html would be nice. But I'm gonna take a stab anyway and say to try changing the "#navbar a" definiton to this:

#navbar a {
    width: 150px;
    color: black;
    text-decoration:none;
    font-size: 20px;
    text-align: center;
    margin-left: 40px;
    position: relative;
    top: 15px;
}

 

[munk666]

add this to #navbar a

vertical-align: middle;

woiwky Like hartawan said, the relevant html would be nice. But I'm gonna take a stab anyway and say to try changing the "#navbar a" definiton to this:

Code:
#navbar a {
width: 150px;
color: black;
text-decoration:none;
font-size: 20px;
text-align: center;
margin-left: 40px;
position: relative;
top: 15px;
}

from personal experience i have found it is good to stay away from relative positioning as it can leave gaps in the layout where you dont want them, resulting in people adding a relative position and the adjustment to every selector in the css code. This then leads further problems when the site does not display correctly in differnet browsers.

 

[kbjradmin]

why not just add this to it:

#navbar{
position: absolute;
margin-top: 305px;
margin-left: 535px;
}

#navbar a{
position: absolute;
top: 15px;
}

i think this will work.

 

[Agenator]

sorry i posted the first thing late at night and I was in a rush. Sorry about that.... okay so i tried all of these and none of them did the trick the closest one was the position: relative one by wowiky because it moved the links vertically but I couldnt get it move to position the links the same on both ie and ff and ff didnt recognize/ignored the vertical-align: middle or any of the others.... here is the relative html:

<html>
<head>
<title>"Melting Point Band"</title>
</head>

<body>
<LINK REL=stylesheet HREF="layout.css"
Type="text/css">

<div id="header">

</div>

<div id="navbar">
<a href="mainpage.html"> Home </a>
<a href="mainpage.html"> Contact Us </a>
<a href="mainpage.html"> Download Songs </a>
<a href="mainpage.html"> Promotional Offer </a>
</div>

<div id="content">

<div id="login">
<form name ="login" method="post" action="login.php">
<label>Log In</label>
<label>Email: <input type="text" name="email" /> </label>
<label>Password: <input type="password" name="password"/></label>
<label class="button"><input type="submit" name="submit" value="Submit"></label><br>
</form>
<label class="newsletter"><a href="form.html">Sign Up To Recieve Our Newsletter</a></label>

</div>
   info here...
     </p>
     <br>
     <br>


</div>
</body>
</html>

 

[woiwky]

from personal experience i have found it is good to stay away from relative positioning as it can leave gaps in the layout where you dont want them, resulting in people adding a relative position and the adjustment to every selector in the css code. This then leads further problems when the site does not display correctly in differnet browsers.

I've never had a problem with relative positioning. From my experience, as long as you know when to use which css properties, you shouldn't end up with an unmanageable layout as you described.

But anyway, Agenator, try this:

#navbar {
    background-image: url(sliced/navbar.jpg);
    position: absolute;
    width: 807px;
    margin-top: 305px;
    margin-left: 535px;
    padding: 15px 0px;
}

#navbar a {
    width: 150px;
    color: black;
    text-decoration:none;
    font-size: 20px;
    text-align: center;
    margin-left: 40px;
}

 

[Agenator]

okay thanks for your help, the problem looks like it was that i had a width in #navbar a which I took out and added another link I had forgotten the navbars equaled out. This is probably not a real fix but if it looks good, who cares
Edit:
one more question. Would specifying a doctype fix this problem?