For some reason I can't get the image I created for the left side of both my normal and active tabs to show. The right side image shows just fine. The left side images give a nice round corner on the upper left corner and a border on the left end. As you can see in the screen clipping below the left side of each tab is just cut off. Does anybody have any ideas? Thanks in advance...
Here is my custom CSS styled tab strip:
Here is the CSS:
.ajax_tab_top.ajax__tab_header
{
font-family:verdana;
font-size:10px;
font-weight:bold;
padding-left:5px;
height:18px;
vertical-align:middle;
}
.ajax_tab_top.ajax__tab_outer
{
background-position-x:left;
background-image:url(Images/TabLeft.jpg);
background-repeat:no-repeat;
margin-left:1px;
}
.ajax_tab_top.ajax__tab_inner
{
background-position-x:right;
background-image:url(Images/TabRight.jpg);
background-repeat:no-repeat;
}
.ajax_tab_top.ajax__tab_tab
{
color:#21334b;
height:18px;
background-image:url(Images/TabBG.jpg);
background-repeat:repeat-x;
padding-top:1px;
padding-left:5px;
padding-right:5px;
text-align:center;
}
.ajax_tab_top.ajax__tab_hover.ajax__tab_outer
{
background-position-x:left;
background-image:url(Images/TabLeft.jpg);
background-repeat:no-repeat;
}
.ajax_tab_top.ajax__tab_hover.ajax__tab_inner
{
background-position-x:right;
background-image:url(Images/TabRight.jpg);
background-repeat:no-repeat;
}
.ajax_tab_top.ajax__tab_hover.ajax__tab_tab
{
color:orange;
height:18px;
background-image:url(Images/TabBG.jpg);
background-repeat:repeat-x;
padding-top:1px;
padding-left:5px;
padding-right:5px;
text-align:center;
}
.ajax_tab_top.ajax__tab_active.ajax__tab_outer
{
background-position-x:left;
background-image:url(Images/TabSelectedL.jpg);
background-repeat:no-repeat;
}
.ajax_tab_top.ajax__tab_active.ajax__tab_inner
{
background-position-x:right;
background-image:url(Images/TabSelectedR.jpg);
background-repeat:no-repeat;
}
.ajax_tab_top.ajax__tab_active.ajax__tab_tab
{
color:#ffffff;
height:18px;
background-image:url(Images/TabSelectedBG.jpg);
background-repeat:repeat-x;
padding-top:1px;
padding-left:5px;
padding-right:5px;
text-align:center;
}
.ajax_tab_top.ajax__tab_body
{
width:1000px;
height:27px;
background-image:url(Images/MenuBarBG.jpg);
background-repeat:repeat-x;
}
I stumbled upon the fix for this shortly after I submitted the post. I had to increase the margin-left property of the _tab_tab styles to match the width of the image to be shown on the left side of the tab.
Isn't it funny how the fixes for these things seem so obvious in retrospect?
