IE is doing wrong / how to set tabs to 33%

Hello,
I´m searching for the mistake for nearly three weeks, I don´t find it and need your help :/
I have this site: http://www.grizzly-adams.de/index.php?o ... em&id=1566
I use Tabs5 with the minimalist setting. Chrome and FF is doing well (nearly, I still see a small white line between tabs and content, and I can´t get rid of it). Internet Explorer crashes the complete design with having this big gap between tabs and content. Like this: http://www.grizzly-adams.de/tabs_minimalist.jpg. Which css-command the internet explorer can´t interprete?
For any unknown reason I had to do most of my changes with Tabs5 directly into the tabs´ css, not as usual in the override files.
But I can´t find the reason why IE is doing sth different. Surely not because changes are not in the overrides...is there a workaround with css commands IE can understand and end with the same view like in Chrome and FF?

My second problem:
All tabs I use have always three tabs (like those on the players pages and on my frontpage). I always wanted to have them at a size of 33/34/33%, for being stretched over the whole content. Failed with that since I started using this template (some years ago...). No matter what I ´tried, whatever i set to 33%, it always looked a little weird. Now I want to know how it could work.

A little help would be great,
Stephanie

Hi

First the second problem. If You will make one of the tabs bigger than it will show unevenly and with a border on one of the sides. So I would not advice that. If You want to do that to get rid of the missing 1% than I wound make 4 tabs since 25% will have be a closed value. Than hide the last tabs option with css like:

Code: Select all

.itemFullText .gkTabsGK5 .gkTabs-3 {
display: none;
}


Please tell me which IE version and what Windows version are You using. Looks fine in Windows10 and IE11.

With the code you posted I hide the third tab. Had to change .gkTabs-3 to .gkTabs-4, then it works.
But unfortunatly it wasn´t that what i need. The hidden tab still results in a white background, the active third tab doesn´t fit the complete content length. So I returned to a length of 33%, having a small gap on the right side of the third tab, but it seems to be the better choice.

I use IE11, but the gap between tabs and content is gone now. I had to put my site into the "compatibility view" of the IE and delete it there again. Now it looks the same in all browsers. Mysterious thing, I´ve emptied caches several times. Thought it would be enough.

One last question: I changed my tabs on my frontpage to Tabs5 too, because I wanted to make them look like them on the player pages. But I need smaller fonts and tabs for the frontpage.
So I gave the module an own suffix " frontpage" (with an empty space before it). For my needs I changed css to this:

Code: Select all

.gkTabsWrap.vertical ol li, .gkTabsWrap.horizontal ol li {
    height: 28px;
    text-transform: uppercase;
    font-size: 11px;
}

But how does it have to be written in the override.css? When I change the code in the override.css, the changes are for every tabs module on my site.
".frontpage" changes textsize in the tabs content, "frontpage.gkTabsWrap.horizontal ol li " does nothing. Unfortunately I can´t find a documentation for my old template, so I don´t know how to make a change especially for my module with the frontpage-Suffix.

Hi

If You are using module suffix You need a space after this suffix if You want to change tabs names. Something like this:

Code: Select all

.frontpage .gkTabsWrap.vertical ol li,
.frontpage .gkTabsWrap.horizontal ol li {
}