1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

List alignment

Discussion in 'HTML, Graphics & Programming' started by Phaser, 20 May 2006.

  1. Phaser

    Wise Guy

    Joined: 17 Mar 2004

    Posts: 1,562

    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. :)
     
  2. Al Vallario

    Mobster

    Joined: 3 Aug 2005

    Posts: 4,534

    Location: UK

    Change

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

    Code:
    ul#pagemenu { 
      width: 12em;
      margin: 0;
      padding: 0;
      float: left;
      clear: both;
    }
    av. :)
     
  3. Phaser

    Wise Guy

    Joined: 17 Mar 2004

    Posts: 1,562

    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.
     
    Last edited: 21 May 2006