CSS Navigation Menu Image Alignment Issue

[cserrano]

I am having trouble getting my menu images to properly align in IE. The menu initially looked fine in FireFox and Safari, however when I checked its appearance in IE the right edge of the images were being cropped off. The alignment of the menu was also off to the right in IE compared to Firefox and Safari. Here is the code that I believe is relevant.

layout.css:

/* ----------container to center the layout---------- */
#container {
width: 830px;
padding:0px;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
/*-----------content next to menu------------*/
.boxContent {
border-top: 4px solid #CDB5CD;
border-right: 4px solid #CDB5CD;
border-bottom: 4px solid #CDB5CD;
border-left: 4px solid #CDB5CD;
padding: 3px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #474785;
margin-bottom: 5px;
background-color: #F2EBF2;
}
.catboxcontent {
border-top: 4px solid #CDB5CD;
border-right: 4px solid #CDB5CD;
border-bottom: 4px solid #CDB5CD;
border-left: 4px solid #CDB5CD;
background-color: #F2F2F2;
padding-left: 11px;
padding-right: 7px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #474785;
position: relative;
margin-bottom: 5px;
}

/* =-=-=-=-=-=-=-[Menu Six]-=-=-=-=-=-=-=- */

#menu6 {
width: 130px;
margin-left: 17px;
margin-top: 15px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87%;
font-weight: bold;
}

#menu6 ul {
list-style: none;
margin: 0;
padding-top: 10px;
padding: 0;
}

#menu6 li a {
height: 35px;
voice-family: "\"}\"";
voice-family: inherit;
height: 27px;
text-decoration: none;
}

#menu6 li a:link, #menu6 li a:visited {
color: #683A5E;
text-align: left;
display: block;
background: url(http://www.example.com/skins/Killer/styleImages/csstab1.jpg);
padding: 8px 0 0 10px;
}

#menu6 li a:hover, #menu6 li a:active {
color: #6C7250;
background: url(http://www.example.com/skins/Killer/styleImages/csstab2.jpg);
padding: 8px 0 0 10px;
}

index.tpl:

<div id="container" >

<div id="banner" ><a href="http://www.example.com"><img src="http://example.com/skins/Killer/styleImages/backgrounds/topHeader.gif" alt="" width="830" height="100" border="0px" /></a>
<h1>{CATEGORIE}</h1>

</div>

<div id="pageSurround">

<div id="subSurround">

<br>
<table border="0" cellspacing="0" width="830px" cellpadding="0">
<tr valign="top">
<td width="175">
{SHOPPING_CART}
<div id="menu6">
<ul>
<li><a href="http://example.com/index.php" title="Home">Home</a></li>
<li><a href="http://example.com/index.php?act=viewCat&catId=2" title="Necklaces">Necklaces</a></li>
<li><a href="http://example.com/index.php?act=viewCat&catId=3" title="Earrings">Earrings</a></li>
<li><a href="http://example.com/index.php?act=viewCat&catId=4" title="Bracelets">Bracelets</a></li>
<li><a href="http://example.com/index.php?act=viewCat&catId=saleItems" title="Sale Items">Sale Items</a></li>
<li><a href="http://example.com/index.php?act=viewDoc&amp;docId=9" title="Materials">Materials</a></li>
<li><a href="index.php?act=viewDoc&amp;docId=2" title="Contact Us">Contact Us</a></li>
<li><a href="index.php?act=viewDoc&amp;docId=3" title="Policies">Policies</a></li>
<li><a href="index.php?act=viewDoc&amp;docId=4" title="Shipping">Shipping</a></li>
<li><a href="index.php?act=viewDoc&amp;docId=6" title="Links">Links</a></li>

</ul>
</div>

{MAIL_LISTS}
<br>
{SEARCH_FORM}
{CURRENC}
{RANDOM_PROD}
{POPULAR_PRODUCTS}
</td>
<td style="padding: 0px 0px 0px 25px;">{PAGE_CONTENT}</td>

</tr>

</table>

</div>

I have changed my CSS code so that the menu looks halfway decent in IE (most of my visitors use IE), but the edges of the images are still cut off and the menu doesn't display correctly in Firefox and Safari.

layout.css:

/* =-=-=-=-=-=-=-[Menu Six]-=-=-=-=-=-=-=- */

#menu6 {
width: 175px;
margin-left: -7px;
margin-top: 15px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87%;
font-weight: bold;
background-repeat: no-repeat;
}

#menu6 ul {
list-style: none;
margin: 0;
padding-top: 10px;
padding: 0;
}

#menu6 li a {
height: 35px;
voice-family: "\"}\"";
voice-family: inherit;
height: 27px;
text-decoration: none;
}

#menu6 li a:link, #menu6 li a:visited {
color: #683A5E;
text-align: left;
display: block;
background: url(http://www.example.com/skins/Killer/styleImages/csstab1.gif) -15px;
padding: 8px 0 0 10px;
}

#menu6 li a:hover, #menu6 li a:active {
color: #6C7250;
background: url(http://www.example.com/skins/Killer/styleImages/csstab2.gif) -15px;
padding: 8px 0 0 10px;
}

[edited by: encyclo at 2:14 am (utc) on June 20, 2007]
[edit reason] See Guide to Posting Code [webmasterworld.com] [/edit]

[SuzyUK]

Hi cserrano and Welcome to WebmasterWorld!

what are the dimensions of the tab image?
and what Docytype [webmasterworld.com], if any, do you have at the top of your pages?

[cserrano]

Thanks for responding, my index has this doctype: "DOCTYPE HTML PUBLIC". My layout.css file has no doctype at the head of the code, but it is named as a CSS file. The both images have a width of 175px and a height of 35px.

My site is based on CubeCart, and I have made changes to both the appearance and functionality of the site in the past. I'm attempting to change the appearance of my site again. However, alignment troubles have always been an issue with IE when altering the CSS and index.tpl code.

[jbinbpt]

The important part of the doctype is at the end.

Copy the whole line and post it.

[cserrano]

<!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">

[cserrano]

I think I found a temporary fix for my issue. I added conditional comments for IE, so that I can use different margins and padding for different browsers. I'm still frustrated that I can't get IE to do precisely what I want, but at least my site is presentable.

#menu6 {
width: 175px;
margin-left: 0px;
margin-top: 15px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87%;
font-weight: bold;
}

#IEroot #menu6 {
width: 175px;
margin-left: -7px;
margin-top: 15px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87%;
font-weight: bold;
background-repeat: no-repeat;
}

<!--[if IE]>
<div id="IEroot">
<![endif]-->
<div id="menu6">
<ul>
<li><a href="http://example.com/index.php" title="Home">Home</a></li>
<li><a href="http://example.com/index.php?act=viewCat&catId=2" title="Necklaces">Necklaces</a></li>
<li><a href="http://example.com/index.php?act=viewCat&catId=3" title="Earrings">Earrings</a></li>

<li><a href="http://example.com/index.php?act=viewCat&catId=4" title="Bracelets">Bracelets</a></li>
<li><a href="http://example.com/index.php?act=viewCat&catId=saleItems" title="Sale Items">Sale Items</a></li>
<li><a href="http://example.com/index.php?act=viewDoc&amp;docId=9" title="Materials">Materials</a></li>
<li><a href="index.php?act=viewDoc&amp;docId=2" title="Contact Us">Contact Us</a></li>
<li><a href="index.php?act=viewDoc&amp;docId=3" title="Policies">Policies</a></li>
<li><a href="index.php?act=viewDoc&amp;docId=4" title="Shipping">Shipping</a></li>

<li><a href="index.php?act=viewDoc&amp;docId=6" title="Links">Links</a></li>

</ul>
</div>
<!--[if IE]>
</div>
<![endif]-->