tabLinks width confusion

[Trombones13]

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?

Thanks as always!

 

[Jake Bunce]

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



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:

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

 

[Trombones13]

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

 

[Vilandra]

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

 

[skhms]

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

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

.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]

Worked for me - thanks sk!