Why do curved corners disappear when I ad a UL?

[ziycon]

I can get the curved corners to work grand but once I add a UL in they disappear.

This works grand:

<div id="menu_wrapper">
  <div class="bl">
    <div class="br">asd</div>
  </div>
</div>

#menu_wrapper {
	float: left;
	width: 1000px;
	height: 30px;
	clear: left;
}
#menu_wrapper .bl {
	width: 20em;
	background: url('../images/layout/menu_bl.png') 0 100% no-repeat #330000;
}
#menu_wrapper .br {
	background: url('../images/layout/menu_br.png') 100% 100% no-repeat;
}

But once I change th code to this the curved corners disappear and I've tried everything to make them show up but no luck, any ideas?

<div id="menu_wrapper">
  <div class="bl">
    <div class="br">
      <ul>
        <li><a href="index.htm">Home</a></li>
      </ul>
    </div>
  </div>
</div>

#menu_wrapper {
	float: left;
	width: 1000px;
	height: 30px;
	clear: left;
}
#menu_wrapper .bl {
	width: 20em;
	background: url('../images/layout/menu_bl.png') 0 100% no-repeat #330000;
}
#menu_wrapper .br {
	background: url('../images/layout/menu_br.png') 100% 100% no-repeat;
}
#menu_wrapper ul {
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-top: 1px #666666 solid;
	background-color: #330000;
	list-style: none;
	clear: left;
}
#menu_wrapper ul li {
	display: inline;
}
#menu_wrapper ul li a {
	float: left;
	width: 120px;
	height: 24px;
	padding: 6px 0 0 0;
	color: #FFFFFF;
	font-size: 12px;
	text-decoration: none;
	text-align: center;
	display: block;
}
#menu_wrapper ul li a:hover {
	float: left;
	width: 120px;
	height: 24px;
	padding: 6px 0 0 0;
	color: #330000;
	background-color: #FFFFFF;
	font-size: 12px;
	text-decoration: underline;
	display: block;
}

Thanks in advance.

[Death Slaught]

Try removing the margin: 0px; from your ul rule.


Regards, Death

[JKing]

The background-color on your ul is overriding the background images on your div.

Also you need to add a clear after your ul.