Bizarre list problem

[boylesg]

I have this navigation structure:

<div class="NavigationStyle" id="navigation">	<ul class="ListStyle">		<li id="MenuItem" class="MenuItemBackgroundStyle"><a class="MenuItemLinkStyle" href="index.php">                   Home</a></li>		<li id="MenuItem" class="MenuItemBackgroundStyle"><a class="MenuItemLinkStyle" href="CompanyProfile.php"> Company Profile</a></li>		<li id="MenuItem" class="MenuItemBackgroundStyle"><a class="MenuItemLinkStyle" href="Definitions.php">           Definitions</a></li>		<li id="MenuItem" class="MenuItemBackgroundStyle"><a class="MenuItemLinkStyle" href="">           Services ▸</a>	  		<div id="SubMenu" class="SubmenuStyle">	  			<div id="SubmenuArrow" class="SubMenuArrowStyle"></div>  				<ul class="ListStyle">					<li id="SubMenuItem" class="SubMenuItemBackgroundStyle"><a class="SubMenuItemLinkStyle" href="LocalGovernment.php">Local Government</a></li>					<li id="SubMenuItem" class="SubMenuItemBackgroundStyle"><a class="SubMenuItemLinkStyle" href="StateGovernment.php">State Goverment</a></li>			 		<li id="SubMenuItem" class="SubMenuItemBackgroundStyle"><a class="SubMenuItemLinkStyle" href="UtilityCompanies.php">Utility Companies</a></li>					<li id="SubMenuItem" class="SubMenuItemBackgroundStyle"><a class="SubMenuItemLinkStyle" href="PrivateProperty.php">Private Property</a></li>  				</ul>	  		</div>	  </li>	  <li id="MenuItem" class="MenuItemBackgroundStyle"><a class="MenuItemLinkStyle" href="ContactDetails.php">   Contact Details</a></li>	  <li id="MenuItem" class="MenuItemBackgroundStyle"><a class="MenuItemLinkStyle" href="Database.php">             Database</a></li>	  <li id="MenuItem" class="MenuItemBackgroundStyle"><a class="MenuItemLinkStyle" href="Links.php">                     Links</a></li>	</ul> 					<img src="images/NavigationImage.jpg" />	<p> </p>	<p> </p>	<p><font face="Arial" size="4" color="white" align="center">Unique hits: <b><?php echo getUniqueHitCount(); ?></b></font></p></div>

The problem arises in the first list item inside the 'submenu' div.

 

All the menu items obey my CSS style and their text is aligned to the left as specified by this line of css code: "text-align:left;" below.

 

But the first submenu item simply wont obey this CSS style and the text is aligned to the right. It is always and only the first list item that does this. Check the screen shot below the code snippet.

SubMenuItemBackgroundStyle{    behavior: url(CSSPie/PIE.htc);    display: block;    text-align:left;    position:relative;    width: 204px;    height: 30px;        line-height: 30px;        vertical-align: middle;        position:relative;    margin-left: auto;    margin-right: auto;    border-style:solid;    border-top-color:#5404FB;    border-left-color:#5404FB;    border-bottom-color:#1A014B;    border-right-color:#1A014B;    background-color:#330396;    border-radius:20px;    }

 

Now I have found what is causing this bizarre symptom but I have no idea of why it is causing or how to fix it.

It is the padding attribute below. With this line not commented out I get the results in the above screen shot.

With it commented out I get the results in the screen shot below.

 

As you can see the text in the first list item is now left aligned like all the other list items, as specified in the by my "text-align: left" staement above, but of course there is a whole lot of left padding that I do not want.

 

What the frig has 'padding' got to do with text aignment of list items? And why does it only effect the first item in the list?

.ListStyle{    list-style-type:none;    margin: 0px; /*   padding:0px;*/}

Edited February 20, 2015 by Greg Boyles

[Ingolme]

Leave the padding at 0px. Is there any other CSS being applied to the menu items? I can't tell without seeing the page myself.

 

You have some HTML validation errors which might affect the way the browser renders CSS. Find and fix errors in your code here: http://validator.w3.org/