CSS issue with JQuery UI Tabs

Question

I'm trying to get the tabs in this code snippet to highlight just the top of the active tab and the tab that is being hovered over. You'll notice though, that the current code has a bug where there is a sliver of color appearing underneath the tab. I can't seem to figure out how to get rid of it. I'm using the JQuery UI tab system and it seems like the anchor tags are what is jutting out beneath the li tags. Any suggestions on how to get rid of this bug and close up the gap between the li's and the content?

Here's a fiddle: http://jsfiddle.net/nmbCu/

It's yellow tabs that I'm talking about. I know the image isn't loading but you can see how there's a sliver underneath the image that is lighting up. I want that gone. Any suggestions on how to get rid of it AND the dark grey line beneath that? I basically want the yellow tab system sitting right on top of the light gray background.

Here's some of the relevant bits of code:

Html

<section>
        <div class="tabs">
            <ul>
                <li><a href="#TVHE"><img alt="TV & Home Entertainment" src="images/thumb_TV_normal.png" /></a></li>
                <li><a href="#Headphones"><img alt="Headphones" src="images/thumb_Headphones_normal.png" /></a></li>
                <li><a href="#VAIO"><img alt="VAIO" src="images/thumb_Vaio_normal.png" /></a></li>
                <li><a href="#Tablet"><img alt="Tablet" src="images/thumb_Tablet_normal.png" /></a></li>
                <li><a href="#Reader"><img alt="Reader" src="images/thumb_Reader_normal.png" /></a></li>
                <li><a href="#PortElec"><img alt="MP3" src="images/thumb_MP3_normal.png" /></a></li>
                <li><a href="#Camera"><img alt="Cameras" src="images/thumb_Cameras_normal.png" /></a></li>
            </ul>

And here's some of the relevant bits of CSS:

section {
    background: rgb(187, 187, 187);
    width: 900px;
    padding-bottom: 50px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

section p{
    color: rgb(102, 102, 102);
    font-family: Arial, sans-serif;
    line-height: 18px;
    font-size: 14px;
    margin-right: 20px;
}

section .tabs {
    background: rgb(187, 187, 187);
    width: 900px;
}

section .tabs ul{
    padding: 0;
}

section .tabs ul li{
    list-style-type: none;
    display: inline-block;
    margin-right: -3px;
    text-decoration: none;
}

section .tabs ul li a {
    text-decoration: none;
}

section .tabs ul li:hover{
    background: #FFF773;
}

section .tabs ul li.ui-tabs-active {
    background: #FFF100;
}

section div.tabs div.tabContent {
    width: 895px;
    background: #dddddd;
    text-align: center;
    margin-top: -20px;
    padding-bottom: 50px;
}

div.innerBox {
    background: #dddddd;
    margin: 25px 30px 50px;
    padding: 10px 10px 0;
    width: 800px;
}

Luca · Accepted Answer · 2014-04-04 14:39:32Z

3

update your style like this:

section div.tabs div.tabContent {
    /* other css properties */
    margin-top: -25px;
}

fiddle: http://jsfiddle.net/nmbCu/1/

EDIT to address your comment, see the updated fiddle.

http://jsfiddle.net/nmbCu/2/

I've made a few changes so you might want to compare the old and new CSS. I've removed the negative margin too - basically you were using it to compensate a positive margin applied to the child div, so it is much easier to remove the margin from it.

edited Apr 4, 2014 at 14:39

answered Apr 4, 2014 at 14:08

Luca

9,8155 gold badges48 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rambo8000 Over a year ago

Thanks for your response. That fixed the gray sliver under the li's which was part of the problem. Is there a way to get rid of the little yellow sliver underneath as well? The yellow sliver is most likely part of the anchor tag (that's what my debugging revealed anyway) but I just want the image to touch the gray. Also, may I ask why it's a bad idea to use negative margins? I'm still pretty new at this and I'd like to understand the best practices better.

Collectives™ on Stack Overflow

CSS issue with JQuery UI Tabs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related