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