...

View Full Version : Correcting Tab Border using Image



billatl
10-27-2009, 04:41 PM
Hello,

I'm trying to properly display an AJAX based tab row using a sprite. The JS script takes the string name and sets the width based on the text. Using CSS, I set the minimum width of each tab to better align to the layout.

My problem is that for tabs that are less than the largest, the right closing tab isn't aligned to the end - but in the middle. I've tried a few things - but nothing that works in both Firefox and IE (surprise).

The demo site can be found here (http://www.jayjackson.net/travelblog/)(on the middle-right)

Current CSS




div#manchu_tabdiv ul#manchu_tabul li.manchu_activetab a{
background-image: url("../images/bg_tabs1.gif");
background-position:0% 0%;
background-repeat:no-repeat;
border-bottom:1px solid #FFFFFF;
color:#ffffff;
float:left;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:15px;
margin:0px 1px 0 0;
padding:0 0 0 7px;
text-decoration:none;
cursor:pointer !important;
cursor:hand;
min-width:90px;
}
div#manchu_tabdiv ul#manchu_tabul li.manchu_activetab a span{
background-image: url("../images/bg_tabs2.gif");
background-position:100% 0%;
background-repeat:no-repeat;
float:left;
padding:5px 7px 5px 0px;
cursor:pointer !important;
cursor:hand;
display:block;
}

Excavator
10-27-2009, 04:54 PM
Hello billatl,
To start with, your ul is not formed correctly.
Check your site in the validator, it shows the error. (see the links about validating in my sig below)



Your tabs look like the "sliding doors" method. You can google that for lots of examples.

abduraooft
10-27-2009, 04:57 PM
How about using the sliding door technique give at http://www.alistapart.com/articles/slidingdoors/ and there by avoiding the use of <span> inside anchor?

billatl
10-27-2009, 05:29 PM
How about using the sliding door technique give at http://www.alistapart.com/articles/slidingdoors/ and there by avoiding the use of <span> inside anchor?

Thanks, I would if I were building from scratch, but this is a Wordpress plugin I'm editing. The Ajax is just the front end to database calls hooked into W, so it's not so easy to swap out the front-end.

billatl
10-27-2009, 05:35 PM
Hello billatl,
To start with, your ul is not formed correctly.
Check your site in the validator, it shows the error.

Yes, I see the error; however, it doesn't seem to be related to the tab border in particular (I could be wrong). The issue seems to be the min-width element. Adding the min-width expands the tabs as I wish, but places the right border in the middle of the tab. Removing the min with, displays the right border correctly, but the tbs themselves are too narrow. The validation error you point out appears in both scenarios.

I've tried a few things, from floating right, padding the right image, removing the display:block, etc.... Some variations work - but not in both IE and FF.

Thoughts?

abduraooft
10-27-2009, 05:49 PM
Umm.. you may need to remove that min-width and set seperate widths on your anchor tags like

#tab1 a{
width:95px
}
#tab2 a{
width:95px
}
#tab3 a{
width:140pxpx
}. Otherwise the span elements won't expand to touch the boundaries of anchor tags.

billatl
10-27-2009, 06:12 PM
Umm.. you may need to remove that min-width and set seperate widths on your anchor tags like...
Otherwise the span elements won't expand to touch the boundaries of anchor tags.

Makes sense, but doesn't work - perhaps class is overriding it. The WP PHP script is built like this:




...
$manchu_html = '<li id="manchuajaxtab"><div style="clear:both; float:left; width:'.$tabdiv_width.'px;" id="manchu_tabdiv">';
$manchu_html .= "\n".'<ul id="manchu_tabul">';
$manchu_html .= "\n".' <li id="tab1" class="manchu_activetab"><a href="javascript:void(0)" onclick="ManchutabController(\'tab1\');"><span>'.get_option("manchuajaxtab_tabname_recentpost").'</span></a></li>';

...


Adding width="90px" to either the li or a doesn't do anything - which was why I was trying to modify the CSS directly.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum