I display an accordion as a line of horizontal tabs and I have noticed that the final tab on the line is always slightly wider than the others. This only becomes a problem if the tabs spread to a second line. In this case, the final tab can extend beyond the width of the web page.
You can see this at http://waibopscd.org.nz/?page_id=2226
if you display the page full-width so that 'Tauranga' is the final entry on the first line, the tab extends beyond the page header.
Is it possible to ensure the final tab does not have the extra padding on the right?
Regards
Andy
Hi
One more thought. If I change the CSS as below, removing the left/right padding and adding a width, then all the tabs have the same width and fit exactly into the space available. No extension of the final tab on the line.Of course, if I reduce the size of the window, then there is usually some white space to the left. It also looks a lot neater as the tabs are lined up vertically
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: 0.5em 0em;
text-decoration: none;
width: 165px;
}
Are there any reasons why I should avoid this solution?
Regards
Andy
Hi
I have done some more experiments with firebug on my test site with the padding below:
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding-bottom: 0.5em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.5em;
text-decoration-color: -moz-use-text-color;
text-decoration-line: none;
text-decoration-style: solid;
}
If I disable both left and right padding, all the tabs are reduced to their minimum width with no padding on either side.
If I then re-enable left padding, all the tabs include left padding and zero right padding except for the final tab in the line which gets additional padding on the right (which is what I am trying to avoid).
Any ideas?
Regards
Andy
I don't like playing around with things I don't understand so would really appreciate your comments on this (and any other advice you have).
Thanks for your quick response and I can see that you have displayed the tabs exactly as I would like. That is, the last tab on the line does extend beyond the page boundary.
To answer your question about the CSS, (width 800px; margin 0 auto) was left in by mistake after trying to resolve it myself. It has been removed, but I still get the same result at http://waibopscd.org.nz/?page_id=2226.
I am now testing it on my test site where I am using the basic coraline theme (so no customisations at all). It obviously looks a bit different,
but you can see that the problem is still there at http://test.pat.gen.nz/tabs/
Regards
Andy
Sorry to say i can’t access http://test.pat.gen.nz/tabs/ its need password ,
Although i can still see the CSS i mentioned please see the screenshot http://i.imgur.com/to9unw2.png
i have debug with firebug when i turned off “width: 100%;” its working fine. http://i.imgur.com/Mt3tYjT.png
Regards
Welcome to our forum,
I have checked your page, i can see the reason for that, you are using custom CSS following in your theme CSS
.accordions-tabs .ui-tabs-nav li a {
width: 100%;
}
When i turned it off all working fine , please see the screenshot
http://i.imgur.com/jillAC3.png
Can you please explain why you are using that ? might solve another way.
Regards
Sorry about the password.
I am now running test.pat.gen.nz with all other plugins deactivated. It is also running the Coraline theme (rather than the child), so it is now down to the bare minimum.
You no longer need a password to access test.pat.gen.nz which has two menu items.
TABS illustrates the problem with the ‘Rotorua’ tab extending beyond the content box.
I included ACCORDIONS because I specify #accordions-358{width: 800px; margin: 0 auto} so that it appears with less width in the centre of the page (is there a better way?)
Thanks for taking the trouble to help sort this out.
Andy