Colturi rotunjite fără poziție relativă

I want exact piece of code to get rounded corners for this page http://www.freecsstemplates.org/preview/fotofolium/. When I use PIE.htc file, it's working only when I declare position:relative; everywhere I used it & that's disturbing the layout. Can someone suggest code that works without position attribute for that template.

I didn't give moz & webkit but,it's working in others like safari,chrome. I gave only

border-radius:5px;
behavior: url("PIE.htc");
position: relative;

pentru a face să funcționeze în fiecare browser. Nu funcționează numai în IE dacă am elimina atributul de poziționare chiar și cu PIE.htc.I am folosit moz, webkit pentru cutia de frontieră, poate așa să lucrezi cu FF, Opera etc.

0
adăugat autor Vidul, sursa

2 răspunsuri

Puteți seta declarația CSS pentru colțurile rotunjite pentru toate browserele și utilizați un HTC pentru versiunile anterioare ale Internet Explorer.

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

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 {
    margin: 40px;
    width: 100px;
    line-height: 1.1em;
    float: left;
    vertical-align: middle;    
    cursor: pointer;
    text-align: center;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: pink;
    border: 1px solid red;
}

EXEMPLU HTML

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

Descărcați border-radius.htc și verificați Demonturi și pagini din colțul CSS curbate .


TESTED ON

Windows XP Profisional 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 (dezvoltator Build 130497 Linux)
0
adăugat
Exemplul dvs. funcționează bine (cu excepția faptului că culoarea de fundal este lipsită de negru), dar nu știu de ce nu funcționează când am editat codul așa cum ați dat.
adăugat autor Sai Sasdhar, sursa

Utilizați border-radius

Deoarece IE nu acceptă border-radius , puteți folosi CSS3 PIE . Aici a venit PIE.htc.

0
adăugat