Position relative center screen and round corners

Question

I have this css :

#content_search
{
position:relative;
top:50px;
width:650px;
border:5px solid #111;
-moz-border-radius: 5px 5px;
 border-radius: 5px 5px / 5px 5px;

}

In all navigators as firefox , chrome , etc see fine , perfect ! but in explorer 9 see bad and in all versions of explorer , no can put center in the screen always go to the left or in other cases if i change something to the right

It´s possible center the div and no use div align=center

By other side it´s possible works in explorer this :

-moz-border-radius: 5px 5px;
 border-radius: 5px 5px / 5px 5px;

For round corners into explorer

Thank´s regards

Do you have the [right header](http://stackoverflow.com/questions/10305631/ie9-float-with-overflowhidden-and-table-width-100-not-displaying-properly/10305733#10305733) ? — Denys Séguret, Mar 11 '13 at 18:34
I may be wrong, but I don't think `border-radius: 5px 5px / 5px 5px;` is valid. What would that `/` be? — Linus Caldwell, Mar 11 '13 at 18:42

score 0 · Answer 1 · answered Mar 11 '13 at 20:35

If you're looking to set border-radius for all corners to be the same unit, you don't need to specify positions. Just border-radius: 5px; works fine.

If you want to center a container element within it's parent div, use margin: 0 auto;. In theory, you can also set the parent div to text-align: center; and the child div to display: inline-block;, but I've found the margin method to be less buggy across browsers.

score 0 · Answer 2 · answered Mar 12 '13 at 16:26

CSS

#content_search
{
  position:relative;
  top:50px;
  width:650px;
  border:5px solid #111;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-left: auto;
  margin-right: auto;
}

HTML

<div id="container">
    <div id="content_search">
        <span>My Content</span>
    </div>
</div>

score -1 · Answer 3 · answered Mar 12 '13 at 18:26

-1

Use margin: 50px auto; to center your div (the 50px in the shorthand margin would replace the top:50px;). Remember that when using the both left and right margin's to auto, you must set a width on your div

http://jsfiddle.net/galenw/LWQfA/

answered Mar 12 '13 at 18:26

Galen

150
13

Position relative center screen and round corners

3 Answers3