List alignment

[Phaser]

Right, quick question. Working on one of my first sites.

Ignore the huge background image and other things for now..

http://www.dzire-live.com/yj/music.html

Basically, I want that list pushed across to the left so when you hover your mouse over it dosen't go over the dotted line to the left.

I've had a play around but can't get it to work.

my CSS is here: http://www.dzire-live.com/yj/screen.css

Also it works fine in Firefox but in IE the left collum is to the right of the page. A quick "float: left;" sorts it out, but that means on Firefox it totally screws up!

Thanks for any help in advance.

 

[Al Vallario]

Change

ul#pagemenu { width: 12em; }
  float: left;
  clear: both;

to...

ul#pagemenu { 
  width: 12em;
  margin: 0;
  padding: 0;
  float: left;
  clear: both;
}

av.

 

[Phaser]

Cheers for that mate, worked a treat.

Have you any idea why "news" and "reviews" are on the same line? They are both in a seperate <li> tag?

<div id="leftnav">
<h2>Music</h2>
<ul id="pagemenu">
<li><a href="music-news.html">News</a></li>
<li><a href="music-reviews.html">Reviews</a></li>
<li><a href="music-interviews.html">Interviews</a></li>
<li><a href="music-stations.html">Station Listings</a></li>
<li><a href="music-events.html">Event Listings</a></li>
<li><a href="music-archive.html">Audio Archive</a></li>
</ul>
</div>

Cheers.