[SOLVED] padding margin alignment

[Lambneck]

Hello,

I am having trouble properly aligning the contents of this list:

 

html:

<ul id="navbar">
  <li id="recruitTeacher"><a href="recruitTeacher.php">Recruit Teacher</a></li>
  <li id="postResume"><a href="postResume.php">Post Resume</a></li>
  <li id="viewJobs"><a href="viewJobs.php">View Jobs</a></li>
  <li id="viewResumes"><a href="chatRoom.php">View Resumes</a></li>
  <li id="forum"><a href="forums.php">Forum</a></li>
  <li id="help"><a href="help.php">Help</a></li>
</ul>

 

CSS:

#navbar{
height:44px;
margin:0; 
padding:0;
background-image: url(../pix/perpetualGradient.jpg);
background-repeat: repeat-x;
}


#recruitTeacher, #postResume, #viewJobs, #viewResumes, #forum, #help {
padding-top: 14px;
margin-left: 82px;
border-left: none;
display: inline;
font-size:14px
}

 

The content of the list is displayed totally aligned to the top of the "navbar" area. What I am trying to do is get it centered in that area. As you can see I tried pushing it down with {padding-top: 14px;} but it didn't affect the content at all and I don't know why.

 

 

[svivian]

Easiest solution is to put line-height:44px; in the #navbar rules. (Using inline-block and vertical-align for the list items is probably the best solution, but some browsers do not support it properly yet).

 

Also, your second set of rules (#recruitTeacher, #postResume...) can be abbreviated to #navbar li if you want it to apply to all the list items inside the ul. Then you don't need the id attributes (unless you're using them for something else, eg a drop down menu).

[Lambneck]

hey thanks svivian,

line-height did the trick!