Curved corner problem

Discussion in 'Coding Help' started by ziycon, Oct 27, 2010.

Tags:
  1. ziycon

    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.
     
  2. ziycon

    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.
     

Share This Page