List Item Alignment problem in Chrome

[aparnesh]

I am trying to create a drop down menu using UL and LI elements. Each LI is an image (of same size) and there are no Bullets in the List. In IE, the list Items are left-aligned as I want them. In Chrome the list Items are right aligned with a lot of space on the left.

The CSS Code is

.menuBar
{
    background:url('./images/SideMenu/MenuTable_Bg.jpg');
    margin-left:0;
    padding-left:0;
    text-align:left;    
}

.menubar UL
{
    list-style-type: none;
    text-align:left;        
}

.menuBar LI
{   
    padding-top:5px;
    padding-bottom:5px; 
    cursor: hand;
    padding-left:0;
    margin-left:0;
    text-align:left;    
}

How do I get the images to left-align in Chrome ?

I have included 2 images to show the menu - left aligned in IE and right-aligned in chrome.

[dcdruck]

What about adding margin-left:0; to the .menubar UL style? Could you also provide the HTML?

[aparnesh]

Hi dcdruck
Here's the HTML code you asked for :

<div class="menubar">
<ul id="mnuStudent">
    <li><a href="Students.asp"><img src="../images/SideMenu/MB_Students.jpg" WIDTH="120" HEIGHT="40"></a></li>
    <li><a href="Search.asp"><img src="../images/SideMenu/MB_Search.jpg" WIDTH="120" HEIGHT="40"></a></li>
    <li><a href="NewAdmin.asp"><img src="../images/SideMenu/MB_NewAdmission.jpg" WIDTH="120" HEIGHT="40"></a></li>
    <li><a href="AddExisting.asp"><img src="../images/SideMenu/MB_AddExisting.jpg" WIDTH="120" HEIGHT="40"></a></li>
    <li><a href="Withdrawal.asp"><img src="../images/SideMenu/MB_Withdrawal.jpg" WIDTH="120" HEIGHT="40"></a></li>
    <li><a href="PastStudents.asp"><img src="../images/SideMenu/MB_PastStudents.jpg" WIDTH="120" HEIGHT="40"></a></li>
</ul>
</div>

[JorgeM]

The first thing you need to correct before continuing to troubleshoot is to fix your CSS. Classes and ids are case sensitive. So in your HTML code, you have a div with a class assigned as "menubar". In your CSS, you references to .menubar and .menuBar.

[dcdruck]

Yes, as JorgeM states, make sure you correct the class names in your css so that "menubar" is lowercase everywhere ("menubar" does not equal "menuBar").

Once you do that, add padding-left:0; to the styles for .menubar UL and that should do it. I originally thought margin-left:0; would do it but it turns out it's the padding.

[aparnesh]

Thanks JorgeM and dcdruck. I corrected the case-sensitive problem and added the padding-left style and everything is working fine now.