Tabs on top of each other in EasyTabs

[jf13000]

Hello,

I love EasyTabs, but I'm running into some problems on one of my projects: the tabs are displayed on top of each other instead of next to each other, as shown on following screenshot:

Here is the HTML code:

<div id="tab-container" class="tab-container">
                <ul class='etabs'>
                    <li class='tab'><a href="#tabs1-js"><img src="/bioseb/templates/default/images/bioseb-mail-25.png" style="vertical-align:middle;"> E-mail me!</a></li>
                    <li class='tab'><a href="#tabs1-callback"><img src="/bioseb/templates/default/images/bioseb-phone-25.png" style="vertical-align:middle;"> Call me back!</a></li>   
                </ul>
                <div class='panel-container' align="left">
                    <div id="tabs1-js">
                        <div align="center"><I>Just specify a subject and leave a comment:<BR><B>Bioseb will e-mail you as soon as possible!</B></I></div>
                        <BR>
                        <B>Subject:</B>
                        <select name="mail_subject">
                            <option value="tech">Technical inquiry</option> 
                            <option value="sales" selected>Commercial inquiry</option>
                            <option value="support">Support</option>
                            <option value="quote" selected>Quote request</option>
                            <option value="order">Direct order</option>
                        </select>
                        <BR><BR>
                        <B>Comments:</B><BR>
                        <textarea name="mail_comment" rows="5" cols="65"></textarea>
                        <BR><BR>
                        <div align="right">
                            <input type="submit" name="submit_email" value="Submit">
                        </div>
                    </div>
                    <div id="tabs1-callback">
                        <div align="center"><I>Just specify a subject and leave a comment:<BR><B>Bioseb will call you back as soon as possible!</B></I></div>
                        <BR>
                        <B>Subject:</B>
                        <select name="callback_subject">
                            <option value="tech">Technical inquiry</option> 
                            <option value="sales" selected>Commercial inquiry</option>
                            <option value="support">Support</option>
                        </select>
                        <BR><BR>
                        <B>Comments:</B><BR>
                        <textarea name="callback_comment" rows="5" cols="65"></textarea>
                        <BR><BR>
                        <div align="right">
                            <input type="submit" name="submit_callback" value="Submit">
                        </div>
                    </div>
                </div>
            </div>

And here is the CSS:

.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 12px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration:none; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
.panel-container { margin-bottom: 10px; }

Does anybody have an idea about this?

Thanks a lot in advance,

Julien

[CableGuy67]

Perhaps some other css is stomping on it? It seems to work just fine from what you posted. Granted, there was a bit of guesswork on just what you are using but I copied over the code you posted here and tried it out. http://ipreferpi.eu/test/top-tabs.html Do you have a public facing page to look at?

[jf13000]

Thanks for your help, CableGuy67!

I had a look, and I have, indeed, another CSS that might play a role. But even when I disable the second CSS, I get the same problem, as soon as the width of my tabs gets over a certain threshold, which seems to be around 130 px. One more precision, though: I display my document in a FancyBox. Should not be an issue, but who knows...

I'll try to put up a public facing page this week-end for you to have a look at... Thanks again!

[CableGuy67]

Yeah, second set of eyes and all. If I see any activity on this thread I'll go take a peek. Who knows, by that time you might have sorted the whole thing out. :)

[jf13000]

Hope so :) A bit weird, though, that it only happens above a certain width for the tabs... Will sleep on it and then see. Cheers again, and will let you know!

[jf13000]

Hello Mark,

Sorry for the long silence, but I finally found what was happening: it was actually the

that was "too high", therefore overlapping into the top of the area set aside for the tabs, reducing its width, and forcing the tabs to be displayed on top of each others...

Silly thing! Thanks for your help, though :)

Julien

---

De : Mark notifications@github.com À : JangoSteve/jQuery-EasyTabs jQuery-EasyTabs@noreply.github.com Cc : jf13000 webmaster@bioseb.com Envoyé le : Samedi 15 mars 2014 21h39 Objet : Re: [jQuery-EasyTabs] Tabs on top of each other in EasyTabs (#167)

Yeah, second set of eyes and all. If I see any activity on this thread I'll go take a peek. Who knows, by that time you might have sorted the whole thing out. :) — Reply to this email directly or view it on GitHub.

[CableGuy67]

No problem, glad it wasn't a EasyTabs problem. I just figured you fixed it and moved on. Thanks fro popping in to describe what the problem actually was, I know I didn't have any guesses. :)