Shade Image Tabs Menu Displayed Different in IE

[mrhoops515]

1) Script Title: Shade Image Tabs Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/

3) Describe problem:

It looks fine in Firefox but the menu is displayed in a different position in IE. Also, the last tab does not respond to being a link.

http://kevinsite.freehostia.com/tests/tabs.html

Thanks for any help.

Note: I will remove the link's background-image once it aligns correctly.

[jscheuer1]

For your tabs, make them position:relative (move it from the active selector to the li a selector) and adjust the background in IE to line up:


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.shadetabs{
border-bottom: 0px solid gray;
/* width: 90%; width of menu. Uncomment to change to a specific width */
margin-bottom: 0em;
}

.shadetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 0px;
margin-bottom: 0;
font: 12px Arial;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 12px 10px 13px 10px;
margin-right: 3px;
border-left:1px solid white;
border-right:1px solid white;
border-top:1px solid white;
color: white;
background: white url(../nav.png);
background-position: 0 0!important;
background-position: 0 4px;
position: relative;
}

.shadetabs li a:visited{
color: white;
}

.shadetabs li a:hover{
text-decoration: underline;
color: white;
}

.shadetabs li.selected{ /*position relative moved from here*/
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-color:#a0a0a0;
background-image:none;
border-bottom-color: #a0a0a0;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
background-image:none;
}

</style>

Using the position relative seems to overcome masking from some other relative or absolute positioned item or merely something that has been adjusted position-wise using margin. This also unmasks the link.

For the big white thing in the middle, it is a table, change its containing cell to:


<tr><td align="center">

from:


<tr><td align="center" valign="top" height="100%" width="968">

That way it will center at larger screen widths in IE. If you don't want that black line in IE, get rid of the right border (red):


<td height="100%" bgcolor="white" style="padding-left:16px; padding-right:16px;border-right:1px solid black" valign="top" background="../whitemain.png">

[mrhoops515]

Thank you very much. Your help was excellent and worked great!