...

View Full Version : ul ignores the margins of first li and last li?



mehere8
07-11-2011, 02:14 PM
ul will not extend to include the top margin of the first li or the bottom margin of the last li.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
background-color: yellow;
width: 100px;
}
ul li {
background-color: #9F0;
margin: 15px 10px;
padding: 0px;
}
</style>
</head>

<body>
<ul>
<li>haha</li>
<li>hehe</li>
</ul>
</body>
</html>


the yellow background of the ul should stretch by 15px upward and downward, which is the margin of the li, but it doesn't ~~~

P.S. if I add ul { padding-top: 1px }, the 6px(=5+1) 'margin' will show up ~~~

why is there such a strange behaviour of ul? anyone can help?

abduraooft
07-11-2011, 03:13 PM
P.S. if I add ul { padding-top: 1px }, the 6px(=5+1) 'margin' will show up ~~~
Set overflow:auto; to <ul> to overcome collapsing of margins (http://complexspiral.com/publications/uncollapsing-margins/).

vikram1vicky
07-11-2011, 03:15 PM
Use following code. It will solve your problem:


ul {
list-style-type: none;
background-color: yellow;
width: 100px;
padding: 5px 10px;
}
ul li {
background-color: #9F0;
}


Cheers :)

mehere8
07-11-2011, 05:00 PM
Set overflow:auto; to <ul> to overcome collapsing of margins (http://complexspiral.com/publications/uncollapsing-margins/).

That works! Thx very much. I went through the link you gave but didn't find similar solution to yours. Anyway could I know why your method works?


Use following code. It will solve your problem:


ul {
list-style-type: none;
background-color: yellow;
width: 100px;
padding: 5px 10px;
}
ul li {
background-color: #9F0;
}


Cheers :)

Ya, you changed the behaviour of my list items. No separation between them~~

alykins
07-11-2011, 06:46 PM
the reason Abduraooft's method worked is because of the link he provided... check it out- useful stuff in there :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum