[vs2005] remove extra v-space inside div and fix display

**jlbantang** · Dec 11th, 2010, 03:42 AM

hi team, could someone please tell me how to remove extra list item vertical space inside div.

are there any hacks required to display it properly in firefox?

Code:

<div id="panel_wrapper" style="background-color:white; width:252px;">
            <div style="background-image: url(images/block_header_bg.jpg); background-repeat: no-repeat;
                width: 250px; height: 30px;">
                Block 1
            </div>
            
            <div style=" padding: 0px 0px 0px 0px; background-color: white; height: 79px; width: 250px;">
                <ol style="margin-left: 15px; list-style: none; background-color: #a5c102; width: 211px;
                    border: black solid 1px; height: 99px; display:inline-table">
                    <li>Welcome</li>
                    <li>Hits</li>
                    <li>My Recipe</li>
                </ol>
            </div>
            
             <div style="background-image: url(images/block_header_bg.jpg); background-repeat: no-repeat;
                width: 250px; height: 30px;">
                Block 2
            </div>
            
            <div style=" padding: 0px 0px 0px 0px; background-color: white; height: 79px; width: 250px;">
                <ol style="margin-left: 15px; list-style: none; background-color: #a5c102; width: 211px;
                    border: black solid 1px; height: 99px; display:inline-table">
                    <li>Welcome</li>
                    <li>Hits</li>
                    <li>My Recipe</li>
                </ol>
            </div>
            
        </div>

**coothead** · Dec 11th, 2010, 11:07 AM

Hi there jlbantang,

Firefox definitely does not require any hacks to display code correctly.
Good coding will invariably work well in the majority of browsers.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>untitled document</title>

<style type="text/css">
#panel-wrapper {
    width:250px;
    background-color:#fff; 
 }
.block {
    clear:both;
    width:240px; 
    line-height:30px;
    padding-left:10px;
    margin-bottom:1px;
    background-color:#a5c102;  /* this is for testing purposes only and should be removed */
    background-image:url(images/block_header_bg.jpg); 
    background-repeat:no-repeat;
 }
.uls {
    float:right;
    width:211px;
    border:1px solid #000;
    padding:0 0 10px;
    margin:0 0 1px;
    list-style:none; 
    background-color:#a5c102;
 }
.uls li {
    margin:10px 0 0 10px;
 }
</style>

</head>
<body>

<div id="panel-wrapper">

<div class="block">Block 1</div>
            
<ul class="uls">
 <li>Welcome</li>
 <li>Hits</li>
 <li>My Recipe</li>
</ul>
           
<div class="block">Block 2</div>
            
<ul class="uls">
 <li>Welcome</li>
 <li>Hits</li>
 <li>My Recipe</li>
</ul>
            
</div><!-- end #panel-wrapper -->

</body>
</html>

**jlbantang** · Dec 12th, 2010, 02:04 AM

hi coothead, neat code. learning from it.

most appreciated.

**coothead** · Dec 12th, 2010, 04:03 AM

No problem, you're very welcome.

Thread: [vs2005] remove extra v-space inside div and fix display

Thread Tools

Display

[vs2005] remove extra v-space inside div and fix display

Re: [vs2005] remove extra v-space inside div and fix display

Re: [vs2005] remove extra v-space inside div and fix display

Re: [vs2005] remove extra v-space inside div and fix display

Posting Permissions