Unnecessary lines Showing up on right and top.

[Dura_Killer]

Below is the screenie circled with unnecessary lines.

[COLOR=Wheat]#gadget{
clear:both;
}

.gadget-one{
width: 251px;
float: left;
padding:15px 12px 0 32px;
overflow:hidden;
}

.gad-top{
height:11px;
width:251px;
display:block;
overflow:hidden;
background:url(images/gad_top.gif) no-repeat 0 0;
}

.gad-mid{
display:block;
height:1%;

overflow:hidden;

background:url(images/gad_mid.gif) repeat-y 0 0;
}

.gad-mid h2{
color:#000;
text-align:center;
font-size:12px;
font-weight:bold;
clear:both;
}

.gad-mid li{
list-style:none;
display:block;

}

.gad-mid li a{
color:#999;
text-decoration:none;
height:25px;

display:block;
padding:8px 15px 0 5px; /*top = 8px, right = 10px, bottom = 5px, left = 10px. */
overflow:hidden;
border-bottom:1px solid #000;
}

.gad-mid li a:hover{
background:#3f3f3f;
color:#EEE;
}

.gad-bottom{
height:11px;
width:251px;
display:block;
overflow:hidden;
background:url(images/gad_bottom.gif) no-repeat 0 0;
}[/COLOR]

Following is the code.

        <div id="gadget">
            <div class="gadget-one">
                <div class="gad-top"></div>
                        <div class="gad-mid">
                    <h2 class="recent-post-til">Recent Posts</h2>
                        <ul>
                            <?php get_archives('postbypost', 3); ?>
                        </ul>
                </div>
            <div class="gad-bottom"></div>
            </div>
</div>

Yes ofcourse I will give + rep to person help me resolve it.

 

[d60eba]

.gad-mid li a{
color:#999;
text-decoration:none;
height:25px;

display:block;
padding:8px 15px 0 5px; /*top = 8px, right = 10px, bottom = 5px, left = 10px. */
overflow:hidden;
border-bottom:1px solid #000;
}

Remove border-bottom:1px solid #000;

 

[Dura_Killer]

it don't not work.

 

[blackthought286]

I don't know for sure but it could be the li elements displaying a border. try to turn the borders off in the li elements and see what happens. the main stylesheet your working with could be showing either ul elements or the li to have some kind of border.

 

[d60eba]

Install Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843), click Inspect, hover over the offending line and the CSS style causing it will appear in the right-hand firebug window.

Or install the Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60), hit CTRL+SHIFT+Y and again you can inspect each page element's style.