UL LI alignment problem

Hi there,
I'm trying to use CSS for the first time to make a rollover menu system.
I am nearly there apart from an alignment issue I have with the UL LI tags.
Basically I have an image that when your roll over and element in the LI tag is should reposition the background image.

The main problem is the List does not start from the far left of the area that I want the menu system to occupy, it is as if it is starting in the center of that area. Hard to explain so have a look at the following URL to see what I mean http://www.completeitsolution.net/cits.htm

I'm sure I am doing something stupid, which I will be grateful if someone could assist me.

Thanks
Paul
************* CSS CODE *********************
 
/* Generic Tags */ 
body{
 padding:0px;
 margin:0px;
 background-color: #f2f2f2;
}
 
/* Page Layout */ 
#page_container{
position: relative;
width:770px;
top: 5px;
left: 50%;
margin-left:-385px;
background-color: #ffffff;
border: 1px solid #acacac;
}
 
/* Make sure there is always a scroll bar for firfox */ 
html {
     overflow: -moz-scrollbars-vertical;  
}
 
/* Sub Menu Header - Start */
#sub_menu_header{ 
 height:130px;
}
 
#sub_menu_logo{
float:left;
width:175px;
height:86px;
background-image: url('../images/banner/sub menu logo.png');
}
 
#sub_menu_advert {
width:595px;
height:86px;
background-image: url('../images/banner/sub menu advert.png');
}
 
#sub_menu_container{
position: relative;
width:770px;
margin:0, auto;
}
 
#sub_menu li {
display: inline;
}
 
#sub_menu li a {
float:left;
width:107px;
height:0px;
padding-top:40px;
overflow:hidden;
background-image:url('../images/banner/sub_menu.png');
background-repeat:no-repeat;
display:block;
}
 
#sub_menu li#option1 a {width:110px; background-position:0px 0px;}
#sub_menu li#option2 a { width:107px; background-position:-107px 0px; }
#sub_menu li#option3 a { width:107px; background-position:-214px 0px; }
#sub_menu li#option4 a { width:107px; background-position:-321px 0px; }
#sub_menu li#option5 a { width:107px; background-position:-428px 0px; }
#sub_menu li#option6 a { width:107px; background-position:-535px 0px; }
#sub_menu li#option7 a { width:110px; background-position:-642px 0px; }
 
#sub_menu li#option1 a:active , #sub_menu li#option1 a.current-link {width:110px; background-position:0px -82px;}
#sub_menu li#option2 a:active , #sub_menu li#option2 a.current-link { width:107px; background-position:-107px -82px; }
#sub_menu li#option3 a:active , #sub_menu li#option3 a.current-link { width:107px; background-position:-214px -82px; }
#sub_menu li#option4 a:active , #sub_menu li#option4 a.current-link { width:107px; background-position:-321px -82px; }
#sub_menu li#option5 a:active , #sub_menu li#option5 a.current-link { width:107px; background-position:-428px -82px; }
#sub_menu li#option6 a:active , #sub_menu li#option6 a.current-link { width:107px; background-position:-535px -82px; }
#sub_menu li#option7 a:active , #sub_menu li#option7 a.current-link { width:110px; background-position:-642px -82px; }
 
#sub_menu li#option1 a:hover {width:110px; background-position:0px -41px;}
#sub_menu li#option2 a:hover { width:107px; background-position:-107px -41px; }
#sub_menu li#option3 a:hover { width:107px; background-position:-214px -41px; }
#sub_menu li#option4 a:hover { width:107px; background-position:-321px -41px; }
#sub_menu li#option5 a:hover { width:107px; background-position:-428px -41px; }
#sub_menu li#option6 a:hover { width:107px; background-position:-535px -41px; }
#sub_menu li#option7 a:hover { width:110px; background-position:-642px -41px; }
/* Sub Menu Header - End */
 
/* content container - start */
#content_container{
position: relative;
width:770px;
overflow: visible;
top: 3px;
left: 50%;
margin-left:-385px;
background-color: #fff;
margin-bottom: 5px
}
/* content container - end */
 
**************** HTML CODE *****************************
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="cits.css" rel="stylesheet" type="text/css" />
 
</head>
<body>
<!-- page container - start -->
<div id="page_container"> 
  <!-- sub menu header- start -->
  <div id="sub_menu_header"> 
    <div id="sub_menu_logo"></div>
    <div id="sub_menu_advert"></div>
    <div id="sub_menu_container"> 
      <ul id="sub_menu">
        <li id="option1"><a class="current-link" href="#">Home</a></li>
        <li id="option2"><a href="#">Backup</a></li>
        <li id="option3"><a href="#">Support</a></li>
        <li id="option4"><a href="#">Bespoke</a></li>
        <li id="option5"><a href="#">Shop</a></li>
        <li id="option6"><a href="#">Login</a></li>
        <li id="option7"><a href="#">Home</a></li>
      </ul>
    </div>
  </div>
  <!-- sub menu header - end -->
</div>
<!-- page container - end -->
</body>
</html>

Open in new window

LVL 1
PaulEllAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
Give the <ul> margin:0 and padding: 0

Many elements have default padding and/or margins and browsers differ on their defaults for these.
I recommend that you read these:
http://www.search-this.com/2007/03/12/no-margin-for-error/ 
http://snook.ca/archives/html_and_css/no_css_reset/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
PaulEllAuthor Commented:
Hi there,

Thanks for your help.
I've added a margin and padding attributes to the UL as instructed, but with no joy.

I've uploaded the changes to http://www.completeitsolution.net/cits.htm

Thanks for your help.

Regards
Paul
#sub_menu_container{
position: relative;
width:770px;
margin:0, auto;
}
 
#sub_menu ul {
margin: 0px; 
padding: 0px;
}
 
#sub_menu li {
display: inline;
}
 
#sub_menu li a {
float:left;
width:107px;
height:0px;
padding-top:40px;
overflow:hidden;
background-image:url('../images/banner/sub_menu.png');
background-repeat:no-repeat;
display:block;
}
 
#sub_menu li#option1 a {width:110px; background-position:0px 0px;}
#sub_menu li#option2 a { width:107px; background-position:-107px 0px; }
#sub_menu li#option3 a { width:107px; background-position:-214px 0px; }
#sub_menu li#option4 a { width:107px; background-position:-321px 0px; }
#sub_menu li#option5 a { width:107px; background-position:-428px 0px; }
#sub_menu li#option6 a { width:107px; background-position:-535px 0px; }
#sub_menu li#option7 a { width:110px; background-position:-642px 0px; }
 
#sub_menu li#option1 a:active , #sub_menu li#option1 a.current-link {width:110px; background-position:0px -82px;}
#sub_menu li#option2 a:active , #sub_menu li#option2 a.current-link { width:107px; background-position:-107px -82px; }
#sub_menu li#option3 a:active , #sub_menu li#option3 a.current-link { width:107px; background-position:-214px -82px; }
#sub_menu li#option4 a:active , #sub_menu li#option4 a.current-link { width:107px; background-position:-321px -82px; }
#sub_menu li#option5 a:active , #sub_menu li#option5 a.current-link { width:107px; background-position:-428px -82px; }
#sub_menu li#option6 a:active , #sub_menu li#option6 a.current-link { width:107px; background-position:-535px -82px; }
#sub_menu li#option7 a:active , #sub_menu li#option7 a.current-link { width:110px; background-position:-642px -82px; }
 
#sub_menu li#option1 a:hover {width:110px; background-position:0px -41px;}
#sub_menu li#option2 a:hover { width:107px; background-position:-107px -41px; }
#sub_menu li#option3 a:hover { width:107px; background-position:-214px -41px; }
#sub_menu li#option4 a:hover { width:107px; background-position:-321px -41px; }
#sub_menu li#option5 a:hover { width:107px; background-position:-428px -41px; }
#sub_menu li#option6 a:hover { width:107px; background-position:-535px -41px; }
#sub_menu li#option7 a:hover { width:110px; background-position:-642px -41px; }
/* Sub Menu Header - End */

Open in new window

0
David S.Commented:
But there isn't a <ul> that's a descendant of #sub_menu.  You mean "ul#sub_menu" or just "#sub_menu".
0
scrathcyboyCommented:
You page is totally blank except for a lighter gray box.  You need to put CONTENT in these UL- LI tags before you can see what is happening. Assuming the offset is from the containing DIV, do this in CSS when you add some content --

DIV {   align:left;  margin:0px; padding:0px;  }
UL  {  margin:0px; padding:0px; }
LI  {  margin:0px; padding:0px; }

You can increase from there but you won't see anything until content is in the page, and FF shows ZERO !!
0
PaulEllAuthor Commented:
Hi there,
Thanks for your help.

The problem was a padding issue.

By Adding a padding-left:0; solved the problem.

#sub_menu li a {
float:left;
height:0px;
padding-top:40px;
padding-left:0px;
overflow:hidden;
background-image:url('../images/banner/sub_menu.png');
background-repeat:no-repeat;
display:block;
}

Thanks a lot
Paul
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.