Home/ Questions/Q 7996371
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T14:41:36+00:00

I am trying to create some div (that should be buttons) that have rounded

  • 0

I am trying to create some div (that should be buttons) that have rounded corner. I can get that to work using border-radius.htc or PIE.htc.

I position them using margin-top. The part of the button that flows over to the other div below is not visible, which it should be. Check screenshot:

enter image description here

.menu_buttons{
       margin-top:45px;
       overflow: visible;
       margin-left: 10px;
       width: 85px;
       height: 3em;
       vertical-align: middle; 
       float:left;
       cursor: pointer;
       text-align: center;
       font: 0.9em Arial, Helvetica, sans-serif;

       border-radius: 10px;
       behavior: url(PIE.htc);

}

.diagonal:

.diagonal{

    background-image: linear-gradient(left top, #CFD993 30%, #8DA900 68%);
    background-image: linear-gradient(-45deg, #CFD993 30%, #8DA900 68%);
    background-image: -o-linear-gradient(left top, #CFD993 30%, #8DA900 68%);
    background-image: -moz-linear-gradient(-45deg left top, #CFD993 30%, #8DA900 68%);
    background-image: -webkit-linear-gradient(135deg, #CFD993 30%, #8DA900 68%);
    background-image: -ms-linear-gradient(left top, #CFD993 30%, #8DA900 68%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CFD993', endColorstr='#8DA900', GradientType=1); 
    /*background: #CFD993;*/


    background-image: -webkit-gradient(
            linear,
            left top,
            right bottom,
            color-stop(0.3, #CFD993),
            color-stop(0.68, #8DA900)
    );

}

Part of my html: 

<div class="diagonal" id="section1">
        <img alt="SMIC Service Management In the Cloud" src="/images/smic_small.png" id="smic">        
        <div class="link_menu">
            <button class="menu_buttons ui-corner-all smic_green" id="overview">Overview</button>
            <!--Some more <div....-->
            <button class="menu_buttons ui-corner-all smic_green" id="usage_benchmark">SMICloud<br>usage<br>benchmark</button>            
            <a class="menu_items" id="get_smic">Get SMICloud</a>
            <!--Some more <a....-->
            <a class="menu_items" id="contact">Contact</a>
         </div>  

    </div>

Adding following to .diagonal changes the look according to below screenshot:

position: relative;
z-index: -1;

enter image description here

When trying to add z-index -10 to the div below #section1, nothing happens.

I am totally stuck. How can I do this, creating a div with rounded corner that overflow to another div?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should separate you definitions, to prevent odd behaviors and save debugging time.

    Without the remaining CSS for the elements you’ve provided, you can see a working example, fully tested across all mentioned browsers, using your definitions for the div.menu_buttons:

    See this Working Example!

    CSS

    .curved {
  -moz-border-radius:10px;        /* Firefox */
  -webkit-border-radius:10px;     /* Safari and chrome */
  -khtml-border-radius:10px;      /* Linux browsers */
  border-radius:10px;             /* CSS3 */
  behavior:url(border-radius.htc) /* Internet Explorer */
}

.menu_buttons {
  position:relative;
  top: 20px;
  margin-left: 10px;
  width: 85px;
  height: 60px;
  float:left;
  vertical-align: middle;    
  cursor: pointer;
  text-align: center;
  font: 0.9em Arial, Helvetica, sans-serif;
}

    EXAMPLE HTML

    <div class="menu_buttons curved">.menu_buttons element</div>

    Download the border-radius.htc, and check out the CSS curved corner Demos and Page .

    TESTED ON

    Windows XP Profissional versão 2002 Service Pack 3

    • Internet Explorer 8.0.6001.18702
    • Opera 11.62
    • Firefox 3.6.16
    • Safari 5.1.2
    • Google Chrome 18.0.1025.168 m
    • K-Meleon 1.5.4

    Windows 7 Home Edition Service Pack 1

    • Internet Explorer 9.0.8112.164211C
    • Opera 11.62
    • Firefox 12.0
    • Safari 5.1.4
    • Google Chrome 18.0.1025.168 m

    Linux Ubuntu 12.04

    • Firefox 12.0
    • Chromium 18.0.1025.151 (Developer Build 130497 Linux)

    EDITED

    Related to OPs comment regarding the mandatory appliance of CSS position.

    Working example for the div with rounded corners with no position set!

    EDITED

    The Final Fix after some chatting was the proper declaration of CSS position for the elements wrapper and the elements then selves.

    The Fiddle Example with the correct CSS declarations!

    • 0