Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    51
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Correcting Tab Border using Image

    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 (on the middle-right)

    Current CSS

    Code:
    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;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Oct 2009
    Posts
    51
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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.

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    51
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Umm.. you may need to remove that min-width and set seperate widths on your anchor tags like
    Code:
    #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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    51
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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:


    Code:
    ...
    	$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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •