Curved corner problem

Status
Not open for further replies.

ziycon

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

This works grand:
Code:
<div id="menu_wrapper">
  <div class="bl">
    <div class="br">asd</div>
  </div>
</div>
Code:
#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?
Code:
<div id="menu_wrapper">
  <div class="bl">
    <div class="br">
      <ul>
        <li><a href="index.htm">Home</a></li>
      </ul>
    </div>
  </div>
</div>
Code:
#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.
 

ziycon

New Member
Got it sorted in the end, just gave up and added an image for the background of the UL with curved corners.
 
Status
Not open for further replies.
Award-winning Mac antivirus and Internet security software
Top