CODEWITHSUNDEEP
htmlcss
Rahul Shah
Rahul Shah

Reputation: 1407

How to remove empty space between 2 <ul>'s

I am trying to create css tabs.Initially i tried coding at jsfiddle and it is working fine.

http://jsfiddle.net/McZV9/1/

http://img.ctrlv.in.s3.amazonaws.com/img/5198a15694cbb.jpg

When i copy paste the same thing in my blog

I get an empty space between the tabs and content. http://img.ctrlv.in.s3.amazonaws.com/img/5198a1ba0ba44.jpg

i assumed there might be some similar css causing the empty space.But there was no css which have could have casued that empty space.Ignoring that,I added !important eveywhere.But still there's an empty space.Google chromes inspect element is also not giving any hints.can anyone help me please

Here is the basic code

<!DOCTYPE html>




                            <ul class="tabs clearfix">
                                <li><a href="#html" class="active">HTML</a></li>
                                <li><a href="#javascript">JavaScript</a></li>
                                <li><a href="#css">CSS</a></li>
                            </ul>
                            <ul class="tabs-content">
                                <li class="active" id="html">
                                    grtgrtgrtg
                                </li>
                                <li id="javascript">
                                    erfefr

                                </li>
                                <li id="css">
                                    <p>Similar to the  the CSS is used to style the tooltip, or info box.</p>

                                </li>
                            </ul>

CSS

.clearfix:before, .clearfix:after, .row:before, .row:after {
    content:'\0020';
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0
}
.row:after, .clearfix:after {
    clear:both
}
.row, .clearfix {
    zoom:1
}



.tabs {
    display:block;
    border-bottom:solid 1px #ddd;
    zoom:1;
    margin:24px 0 0 0;
    padding:0
}
.tabs li {
    display:block;
    width:auto;
    height:30px;
    float:left;
    margin:0;
    padding:0;
    text-indent:0;
    list-style:none
}
.tabs li a {
    display:block;
    text-decoration:none;
    width:auto;
    height:29px;
    line-height:30px;
    border:solid 1px #ddd;
    background:#f5f5f5;
    font-size:13px;
    -webkit-transition:color 1s ease;
    -moz-transition:color 1s ease;
    -o-transition:color 1s ease;
    transition:color 1s ease;
    border-width:1px 1px 0 0;
    margin:0;
    padding:0 20px
}
.tabs li a:hover {
    background:#f0f0f0;
    color:#111;
    -webkit-transition:color .3s ease;
    -moz-transition:color .3s ease;
    -o-transition:color .3s ease;
    transition:color .3s ease
}
.tabs li a.active {
    background:#f8f8f8;
    height:30px;
    position:relative;
    top:-4px;
    padding-top:4px;
    border-left-width:1px;
    color:#111;
    -webkit-border-radius:3px 3px 0 0;
    -moz-border-radius:3px 3px 0 0;
    border-radius:3px 3px 0 0;
    margin:0 0 0 -1px
}
.tabs li:first-child a {
    -moz-border-radius-topleft:3px;
    -webkit-border-top-left-radius:3px;
    border-top-left-radius:3px;
    border-width:1px 1px 0
}
.tabs li:last-child a {
    -moz-border-radius-topright:3px;
    -webkit-border-top-right-radius:3px;
    border-top-right-radius:3px
}
.tabs-content {
    background:#f8f8f8;
    color:#4c4c4c;
    display:block;
    border:solid 1px #ddd;
    -webkit-border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    border-radius:0 0 3px 3px;
    border-width:0 1px 1px;
    margin:0 0 24px -1px;
    padding:20px 30px 10px 30px
}
.tabs-content li {
    margin:0;
    padding:0;
    text-indent:0;
    list-style:none
}

Upvotes: 0

Views: 742

Answers (2)

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

Problem is not the space between the two ul. It's the height of your .tabs li a

Set these to:

.tabs li a { height: 30px; }
.tabs li a.active { height: 34px; }

tested that on your website and it looked like this:

enter image description here

Upvotes: 1

PSR
PSR

Reputation: 40318

Because of the class tabs-content the space is coming.I see it in firebug

Upvotes: 0

Related Questions