1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

tabLinks width confusion

Discussion in 'Troubleshooting and Problems' started by Trombones13, Feb 6, 2011.

  1. Trombones13

    Trombones13 Well-Known Member

    XF Navbar Width.png
    Is the tabLinks portion of the navbar two pixels too wide? Adding a border shows it poking it out beyond the end of the page container and the navbar on the right side, and I don't want that, lol. Whether that's by design or not, how can I make a border that doesn't hang over like that? :confused:

    Thanks as always! :D
     
    Vilandra likes this.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The border is throwing off the width. I played with this for a while and came up with a solution.

    Set a fixed width for the forum:

    Admin CP -> Appearance -> Style Properties -> General -> Page Width Controller

    Screen shot 2011-02-06 at 9.30.50 AM.png

    Then edit this template:

    Admin CP -> Appearance -> Templates -> navigation.css

    I have modified the width and border in this code. Notice how you can use xen:calc to subtract double the border size from the page width:

    Code:
    .navTabs .navTab.selected .tabLinks
    {
    	@property "navTabSelected.background";
    	background: @primaryLightish url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x top;
    	@property "/navTabSelected.background";
    	
    	width: {xen:calc '@pageWidth.width - 4'}px;	
    	padding: 0;
    	border: 2px solid;
    	overflow: hidden; zoom: 1;	
    	position: absolute;
    	left: 0px;	
    	top: {xen:calc '@headerTabHeight + 2'}px;
    	height: @headerTabHeight;
    	background-position: 0px -@headerTabHeight;
    	*clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
    }
    
    This fixed the problem in my testing:

    Screen shot 2011-02-06 at 9.38.55 AM.png
     
    Vilandra likes this.
  3. Trombones13

    Trombones13 Well-Known Member

    That works; thanks, Jake! :) I decided I just needed a border-bottom in this case, but this is good to know for later. :D
     
  4. Vilandra

    Vilandra Active Member

    If anyone solves this for a liquid style, I'd be very grateful - it's driving me mad! :D
     
  5. skhms

    skhms Active Member

    Hi Vil, I think this something that you haven't solved yet. I checked a few styles on AD. ;)

    Don't know much about CSS so I hope this is okay. I use it on my site and I haven't noticed any problems anyway.

    In the template navigation.css
    Code:
    .navTabs .navTab.selected .tabLinks
    {
        @property "navTabSelected.background";
        background: @primaryLightish url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x top;
        @property "/navTabSelected.background";
    
    /*    width: 100%;    */          /* Skip width */
        right: 0px;                  /* Add right */
        padding: 0;
    /*    border: none;  */          /* Skip old border */
        border: 1px solid #FF0000;  /* New border */
        overflow: hidden; zoom: 1;
        position: absolute;
        left: 0px;
        top: {xen:calc '@headerTabHeight + 2'}px;
        height: @headerTabHeight;
        background-position: 0px -@headerTabHeight;
        *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
    }
     
    Vilandra likes this.
  6. Vilandra

    Vilandra Active Member

    Worked for me - thanks sk! :)
     

Share This Page