Center UL within a div

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • code green
    Recognized Expert Top Contributor
    • Mar 2007
    • 1726

    Center UL within a div

    I have this piece of code
    Code:
    <div style="text-align:center" id="nav">    
    <h1>Stocktake Menu</h1>
    <ul>   		
    <li> <a href="HTML/upload.html" 
    	title="Upload Spreadsheet and Check Integrity">
    	Check Spreadsheet</a></li>
    <li> <a href="scripts/insertStock.php"
    	title="Upload Data from Spreadsheet">
    	Upload Figures</a></li>
    <li> <a href="scripts/zeroise.php"
    	title="Zeroise the Store the Current Spreadsheet Relates to">
    	Zero Store</a></li>
    </ul>     
    </div>
    Which used to align evenly in IE 7, but in IE8 it looks like this
    Code:
                      Stocktake Menu
               Check Spreadsheet
                  Upload Figures
                    Zeroise Bin
    That is the menu items no longer sit centrally under the heading but have shifted left but still obviously centered to something

    Anybody any idea why this is?
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    IE8 does not work like IE7 compatibility which doesn't work like IE7 which doesn't work like IE6 and none of them work correctly as the other more modern browsers do, so I would suspect IE8s "fixes" fixed something you depended on in IE7 which is more proof of why no one should trust IE to do anything right (and why no one should use IE at all).

    This may have to do with how bullets are set up in the <li> or do you have those removed? IE uses margin while others use padding there. Is there any CSS applied to this?

    Sorry, I don't have IE handy to check right now.

    Comment

    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434

      #3
      double post

      Comment

      • code green
        Recognized Expert Top Contributor
        • Mar 2007
        • 1726

        #4
        With FF the alignment is slightly better,
        the menu items are further to the right but not centrally under the heading.
        I can't remember if this is better or worse than previous FF versions.
        This is the relevant CSS written by an ex-colleague more savvy in HTML
        Code:
        #nav li {        
                width: 25em; /* width needed or else Opera goes nuts */
                font-size: 25px;
                list-style: none;
                margin-bottom: 1ex;
            }
        Is it the width property doing this?

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434

          #5
          Yes. I don't know why he feels that is needed for Opera. Remove that and add to that li 'margin:0; padding:0'

          Comment

          • code green
            Recognized Expert Top Contributor
            • Mar 2007
            • 1726

            #6
            Thanks drhowarddrfine. That worked!

            Comment

            Working...