I am using the following css

#helper{
position:absolute;
bottom:0;
width:100%;
}

#key{
width:950px;
margin:0 auto;
z-index:2;开发者_运维技巧
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}


<-- inside body -->
<div id="helper">
<div id="key">SHould be rounded top corners?</div>
</div>

Yet in Firefox it is not showing after refresh. Any ideas where should I be looking first? Thanks

Specify a background or border for the #key element?

key{

width:950px;
margin:0 auto;
z-index:2;
border:1px solid #000;
background-color:#F00;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}

you should use border or background for this.

Nice Question Harry;

It maybe cause we add two lines. Firefox 14 may likes all four corners in css.

Replace 2 lines
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;

with 4 lines
border-top-left-radius:18px;
border-top-right-radius:18px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

for your example:

key

{
width:290px;
margin:0 auto;
border:4px solid #000;
ackground-color:#EE7621;
border-top-left-radius:18px;
border-top-right-radius:18px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
padding:5px 0 0 15px;
}

jsfiddle example:
http://jsfiddle.net/ccatto/7zAXC/

We could also use the css as a class and id: http://jsfiddle.net/dFTMh/.

Thx;