Note that in the following, this div box code was used. You can fidget with it to fit your preferences. Note that width has to be a certain minimum in order for workaround 1 to work. I have found that width:97.7% or width:855px make the white areas around the div box nice and even. The width:97.7% might allow some adaptation, while width:855px is constant :

 [[div style="float:left; width:97.7%; height:600px; text-align: left; top:100px; overflow:auto; padding: 10px;"]] Insert text, images, tables, etc. here. [[/div]] 

SO FAR I HAVE FOUND 3 WORKAROUNDS:
1. Put symbols or some text after the /div but before the /tab, thus placing the div box within the tab field. HORIZONTAL LINE WILL NOT WORK.

2. Put a space and an underscore _ (WITH NO SPACES AFTER THE UNDERSCORE) to form a new blank line after the /div but before the /tab , BUT this just expands the tab field from the top down, so you have to keep adding blank lines until it matches the size of the div box. Make sure to press Enter/Return after the last underscore or it'll be visible. Kinda simple and crude coding, BUT IT WORKS! Might cause problems when using different-sized div boxes…MAYBE.

3. Put the div box code around the tab code (before and after), as mentioned in the "Re: Width and Div" comment above. Unfortunately, if you have the parameter overflow:auto; in the "div style" parameters, THUS ADDING SCROLL BARS to the div box, the tabs will scroll along with whatever you have in the div box, and thus out of view. Not nice in this case.

In seperate posts, the div id starts at the initial count, "wiki-tabview-0", which is generating an error across several posts. Both posts are were generated and saved seperately, so they can't account for the existance of tabviews that occured in previous posts. I don't know if this is something that could logically be fixed without some extensve coding or rather dynamic naming, though.

This might also be related in part to the fact that placing one tabview inside another doesn't work, but I haven't looked at it regarding that yet.

link here:

The page is dead in Internet Explorer v7. First thought, the tab coding or To Do List coding had an error. Did an archive backup of the wiki and pulled the offending page. Code is clean.

Next thought, was it the browser not meeting standards. Opened the page in Firefox v3 and the page works correctly.

Has anyone had experience with Internet Explorer incompatibilities on wikidot?

Len

I had a foldable list as suggested, but the tabs would be so much better and it more with the way other stuff is arranged in the main pages.

I could not get the indent to show in this version, sorry. I forgot to show the code in the previous post.

Here is the what I did. If you follow the same structure, you should get text that fold under
English. You should also change the page links as your pages may not have the same name as mine, and you can change Français to Spanish, and all the page links that are under that list.

Basically, follow this structure.

Hope this helps, I know it is not tabs in the side-bar, but I think that it will do what you want.

In its most basic terms, each tab is a floating <DIV> that is hidden, UNTIL the user clicks on that tab's label and thus gives it "focus". The .yui-navset CSS for a selected DIV specifies that it is visible, which is why it pops to the front.

Unforunately, you cannot set the focus on a hidden div just following an link to an anchor contained inside. Doing this requires some javascript to "select" the correct tab, which is currently beyond the scope of the current wikidot software, I think.

You will then need to upload your own custom version of the sprite.png file, and then create a custom CSS theme where you redefine all of the relevant .yui-navset classes to point to your own graphic:

Original code snippet from standard wikidot theme:

 .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background:#d8d8d8 url(/common--javascript/yahooui/assets/sprite.png) repeat-x; /* tab background */ border:solid #a3a3a3; border-width:0 1px; color:#000; position:relative; text-decoration:none; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */ .yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */ background:#2647a0 url(/common--javascript/yahooui/assets/sprite.png) repeat-x left -1400px; /* selected tab background */ color:#fff; } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background:#bfdaff url(/common--javascript/yahooui/assets/sprite.png) repeat-x left -1300px; /* selected tab background */ outline:0; } 

Your custom CSS code:

 .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background:#d8d8d8 url(http://mysite.wikidot.com/local--files/home/sprite.png) repeat-x; /* tab background */ } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */ .yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */ background:#2647a0 url(http://mysite.wikidot.com/local--files/home/sprite.png) repeat-x left -1400px; /* selected tab background */ } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background:#bfdaff url(http://mysite.wikidot.com/local--files/home/sprite.png) repeat-x left -1300px; /* selected tab background */ } 

NOTE that you only need to redefine the relevant properties for each class, since it automatically inherits the rest of the properties from the default theme.

I have a tab for reference material and would like my other tabs to have information that link to this reference material sheet.

Also, does this support multiple rows of tabs or will it all be inline?

There's an image at the right, and the tab text respects it. The tab field spreads over it though.

As a stopgap, I've put the whole tab module into its own "div" with a fixed width. The photo frame is also a fixed width, so it would be good to have the width of the tab field adjust according to the width of the browser window.

Am I missing something? How do I get the tab field width to adjust the same way text would?

S.