SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu buttons not centering in IE

    alignmento.jpgThe menu buttons center horizontally in Firefox, Opera, and even IE 9(IE 9 ONLY when the html file is viewed locally on my computer). When the html file is uploaded to the ftp and viewed online the buttons are off centered in IE.

    Also, the top and bottom 3px margins disappear when the html is viewed non locally (on the internet) in IE 9.

    I couldn't get the buttons to horizontally align with "margin: 0 auto" so I added the 140px from left value in this line:
    #mainMenu ul { position: absolute; bottom: 0px; left: 140px; margin: 0 auto; }

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
     
    
    
    <head>
    
    
    <title>Home Page</title>
    
    
    
    
    <meta name="keywords" content="home"/> 
    <meta name="description" content="home"/>
    <meta http-equiv="content-language" content="en-us"/>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252"/>
    <meta name="generator" content="Bluefish 2.0.2" />
    <meta name="progid" content="frontpage.editor.document"/>
    <meta name="microsofttheme" content="expeditn 001, default"/>
    
    
    <style type="text/css">
    
    
     
    body { color:white; background: #000 ;
           font-family: Georgia, serif;  margin: 0; padding: 0;  }
    
    
         
    
     	  
     	 
    #darkredblock {text-align:center; font-size: 1em;
        font-family: helvetica, sans-serif;  
        background-color: #790000;
        padding: 5px 22px;
        border: 8px solid #000;
        margin: 0 auto;
        width: 884px;
       
     	}	
     	 
     	
     #redblock {text-align:center; font-size: 1em;
        background-color: #ff0000;
        padding: 0px 0px;
        border: 4px solid #000;
        margin: 0 auto;
        }
        
        
    
    #mainMenu {
       position: relative; 
       margin: 3px auto;
       padding: 0;
       width: 843px; height: 259px;
       background-image: url(http://farm7.static.flickr.com/6165/6170053554_b65e1c2abd_b.jpg);
       
       background-repeat: no-repeat;
       border: 5px solid #000000;
       } 
       
      
    
    
    #mainMenu ul {  position: absolute; bottom: 0px; left: 140px;  margin: 0 auto;   }
         
         
       
      
    
    .menu li { padding: 0; margin: 0 auto; border: 0; list-style: none; 
               float: left; margin-right: 10px; }
               
     .menu li a:link, .menu li a:visited { display:block; height: 40px;  }         
    
    .home    { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/homehover.jpg); width: 112px;}
    .home a  { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/home.jpg); }
     
    .videos   { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/homehover.jpg); width: 112px;}
    .videos a   {background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/home.jpg); }
    
     
    .commentary   { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/homehover.jpg); width: 112px;}
    .commentary a   {background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/home.jpg); }
     	
    .extra   { background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/homehover.jpg); width: 112px;}
    .extra a  {background-image: url(http://i147.photobucket.com/albums/r314/paleolithix/home.jpg); } 	
    
    .menu li a:hover  {background: none;}
      
     .menu li span  {display: none;}  
        	
     	
          
    
    </style>
    </head>
    
    
    <body>
    
    
    
     
    <div id="darkredblock">
    <div id="redblock">
    
     
    
     <div id="mainMenu">
         
       <ul class="menu">
            <li class="home"><a href="http://www.google.com"><span>home</span></a> </li>
            <li class="videos"><a href="http://www.google.com"><span>videos</span></a> </li>
            <li class="commentary"><a href="http://www.google.com"><span>commentary</span></a> </li>
            <li class="extra"><a href="http://www.google.com"><span>extra</span></a> </li>
       </ul> <!-- end menu UL --> 
      
    </div> <!-- end mainMenu -->
    
    
    
    
    
    
    
    
    
    
    
     </div><!-- END redblock-->
     </div><!-- END darkredblock-->
     
    
    
    
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It 99% likely that you are looking at your online version in compatability view or you have corrupted the doctype in the online version (or you have a free host placing code above the doctype).

    The reason for the differnce bewteen compatability view is that you slip into old IE and in old IE uls have a default left margin which you have set to zero but you have not set left padding to zero which is why some browsers show the menu more towards the centre.

    If you remove the left padding.

    Code:
    #mainMenu ul {
    padding:0;
    }
    Now all browsers show your menu off centred. Therefore you can just adjust your absolute positioning to make them all look the same (assuming that you weren't looking for an automatic centering routine as we would need to change the code to use inline-block instead).

    The problem with the margin in compatability mode is the old ie haslayout problem and you need haslayout here:
    Code:
    #redblock {
    	zoom:1.0;
    }
    Read the css faq (see my sig) on haslayout if you are not sure why that is needed.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. What you have suggested works. I added the padding and the zoom, then also increased the "left" in the '#mainMenu ul' from 140px to 180px to compensate for the added code.

    I need to review what you wrote in your post more and read the css faq in your sig before commenting further. Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •