[vs2005] remove extra v-space inside div and fix display
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>
http://img210.imageshack.us/img210/5850/panel1.gif
Re: [vs2005] remove extra v-space inside div and fix display
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>
Re: [vs2005] remove extra v-space inside div and fix display
hi coothead, neat code. learning from it.
most appreciated.
Re: [vs2005] remove extra v-space inside div and fix display
No problem, you're very welcome. ;)
