SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering ul issue

    Can anyone tell me why my ul menu is not centering?
    Below is a picture and code




    Code for header.css
    Code:
    /* overall header area */
    
    #header
        {
        background-image: url(/test/images/header/headerbg.gif);
        background-repeat: repeat-y;
        margin-top:0;
        }
        
    #header ul
        {
        list-style: none;
        font-family: Arial, sans-serif;
        font-size: 10pt;
        }
        
    #header ul li
        {
        display: inline;
        font-weight: 600;
        }
        
    #header ul li a:link
        {
        color: brown;
        }
    
    #header ul li a:hover
        {
        color: yellow;
        background-image: url(../images/header/bottomcookiemenu.png);
        }
    
    /* top graphics placement */
    
    img.topleft
        {
        float: left;
        text-align: left;
        }
        
    img.topright
        {
        float: right;
        text-align: right;
        }
        
     #top
      	{
      	height: 50px;
      	background-image: url(../images/header/top.gif);
      	background-repeat: repeat-x;
      	}
      	
      *html ul#header #header
      	{
      	padding: 0;
      	margin: 0;
    	}
    Code for main.css

    Code:
    div, ul, img{border: 1px solid black;}
    //global
    body
        {
        text-align:center;
        margin: 0 auto;
        }
        
    #main
        {
        width: 769px;
        background: white;
        text-align:center;
        margin: 0 auto;
        background-image: url(../images/mainbg.gif);
        background-repeat: repeat-y;
        }
        
    
        
    #content
        {
        text-align: center;
        line-height: 14px;
        font-size: 12px;
        font-family: Arial;
        width: 600px;
        margin-left: 50px;
        margin-bottom: 20px;
    	}
    
    h2
    	{
    	font-family: Arial;
    	text-align: left;
    	}
        
       *html #main #content
      	{
      	padding: 0;
      	margin: 0;
      	 }
      	
    p.about
    	{
    	text-align: left;
    	}
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried #header ul {text-align:center;} ?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Its probably the default padding and margins on the ul.

    Code:
    #header ul
    	{	margin:0px;padding:0;

    BTW this code can't be right!!
    Code:
      *html ul#header #header
       {
       padding: 0;
       margin: 0;
     }
    For a start there should be a space between the universal selector (*) and the tag following it( * html). Then you have 2 id's the same!! I don't even think you one have a header inside your ul let alone 2

    Paul

  4. #4
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stripping down my code, there is an inherent padding on the left part of the ul.
    As in the picture below shows in IE 6. In Safrari the div extends the whole width of its area, but the ul still remains slightly offset.



    Applying margin:0;padding:0; fixes this issue, which Paul had posted above.

    Also thanks for pointing out my * selector issue.

    Rich
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site


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
  •