Another CSS Headache... a big one!

[mattlowe81]

Hi everyone.

As you can probably gather from looking at my previous posts, I'm developing with CSS for the first time... and encountering all sorts of difficulties! Though all up to now have been solved by the kind people of this forum.

The latest headache is because of the following:

I have a <div> called "navMain" in which I want to display a row of list items (text anchors). Because this <div> sits on top of a background, the positioning of the inline list is important. The XHTML code for the <div> and list is as follows:

Code: Select all

        
<div id="navMain">
     <ul id="navList">
       <li><a href="aboutUs.html">  ABOUT US  </a></li>
       <li><a href="ourSmiles.html">OUR SMILES</a></li>
       <li><a href="services.html">  SERVICES   </a></li>
       <li><a href="faq.html">        FAQ           </a></li>
    </ul>
  </div>

I played about with the CSS for a few hours, and got the inline list along with the CSS rollover effects looking wonderful... in IE. However, when I viewed it in other browsers (Netscape, Firefox, Opera), the darn list appears much lower down the <div>. Nightmare.

I've stripped my code down to the bare essentials to try and solve the problem, yet still can't fathom it out.

I've included two screen shots to illustrate this. The ieDisplay screen grab (from IE) shows the links (in blue) at the very top of the navMain <div>, whilst the nnDisplay screen grab shows the same webpage viewed in Netscape - notice the links are further down the <div>... NIGHTMARE!

Here's the CSS that controls the navMain <div> and the list.

Code: Select all

#navMain
{
  width: 496px;
  height: 289px;
  padding:0px;
  margin:0px;
  float: right;
}
 
#navList ul, #navList li
{
  margin: 0;
  padding: 0;
  display: inline;
  list-style-type: none;
  font-size: 12px;
  font-weight: bold;
}

I would be very extremely grateful if anybody could have a look at this and help me out in trying to find the answer for this cross-browser difference, and a solution as to how to display the list the same across all browsers.

Many thanks in advance.

[herkalees]

Old:
#navList ul, #navList li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
font-size: 12px;
font-weight: bold;
}

--------------------

New:
ul#navList
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
font-weight: bold;
}

ul#navList li
{
margin: 0 5px 0 5px;
padding: 0;
float: left:
}



What you had was CSS saying "All <ul>s that are a child of anything called id=navList". But, your <ul> itself was called navList, not anything below it.

My new CSS up there might not achieve your exact desired result, but play around with the declared margin and padding numbers, you'll be a lot closer now.

[masonbarge]

Or put an id in your <li> tags. I'd use a class personally.
But Herk's way is better, IMO.