Problem with nav button not aligning?

HTML & CSS
1

Hi,

i have a problem with positioning my nav button 'home' correctly in that right now it is position slighly away from the edge from the left showing a white gap. Ideally it should be flushed to the edge. The button was developed in illustrator cs3(web page design) and then copied into photoshop to be saved into a gif file. When i add the css code to place it in my div, navigation, it does not display how i want it. I made a clear print screen of it which can be seen here, http://img4.imageshack.us/f/navbuttonhomenotflush.jpg/, with the actual button in a psd file here given the download link, http://www.fileswap.com/dl/iSggYy2T/Home_Button.psd.html and for the illustrator file it can be downloaded here, http://www.fileswap.com/dl/ByAOsOol/Homepage.ai.html.

I 'm not sure if it is to do with my code OR how i have saved it into photoshop which is giving this affect, i’m not sure.

Here is my css code


#navigation
{         
    border: 1px solid black;            
    overflow: hidden;
    background: white;       
    /** width: 900px; **/
    height: 50px;
}
#navigation ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navigation li
{
    font-weight: bold;
    float: left;
    zoom: 1;
    /** background-image: url(./images/button.jpg); **/
    background-repeat: repeat-x;
    height: 44px;
    width: 112px;
    margin-right: 2px;
    margin-left: 2px;
    font-size: 16px;  
    padding: 2px;
     
}

#navigation li a
{
    display: block;
    float: left;
}

#navigation li a span
{
    display:none;
}

#navigation li a:hover
{
    text-decoration:none;
}

#navigation li a.home
{
    background: url(./images/Home-Button.gif) no-repeat;
    width:146px;
    height: 50px;
    float: right;
      
}
#navigation li a:hover.home
{
    background: url(./images/Home-Button.gif) no-repeat;
}

#navigation li a.homecurrent, #navigation li a:hover.homecurrent
{
                    background:url(images/Home-Button.gif) no-repeat;
                    width:146px;
                    height:50px;
}

UPDATE: When i copied the nav button from illustrator into photoshop i as Smart Object.
Can somebody tell me why this occurs and how to rectify this?
Thanks

2

Hi,

The first thing I notice is that you have a left margin of 2px applied to the list.


[COLOR=#cc00cc]#navigation[/COLOR] li

[COLOR=#66cc66]{[/COLOR]

    [COLOR=#000066]font-weight[/COLOR]: [COLOR=#993333]bold[/COLOR];

    [COLOR=#000066]float[/COLOR]: [COLOR=#000066]left[/COLOR];

    zoom: [COLOR=#993333]1[/COLOR];

    [COLOR=#808080][I]/** background-image: url(./images/button.jpg); **/[/I][/COLOR]

    [COLOR=#000066]background-repeat[/COLOR]: [COLOR=#993333]repeat-x[/COLOR];

    [COLOR=#000066]height[/COLOR]: [COLOR=#993333]44px[/COLOR];

    [COLOR=#000066]width[/COLOR]: [COLOR=#993333]112px[/COLOR];

    [COLOR=#000066]margin-right[/COLOR]: [COLOR=#993333]2px[/COLOR];

 [B]   [COLOR=#000066]margin-left[/COLOR]: [COLOR=#993333]2px[/COLOR];[/B]

    [COLOR=#000066]font-size[/COLOR]: [COLOR=#993333]16px[/COLOR];  

    [COLOR=#000066]padding[/COLOR]: [COLOR=#993333]2px[/COLOR];

     

[COLOR=#66cc66]}[/COLOR]

Are you talking abut that 2px gap or is there a bigger gap than that? If it’s the margin-left then just remove it.

3

hi, i removed the margin-left but it did not work and then i realised that i had to remove or comment the following code

/*margin-right: 2px; */
/*margin-left: 2px; */
/*font-size: 16px; */
/*padding: 2px; */

so that it would be flushed to the edge. I should have lookedd at the code more carefully, thanks.