CSS3 problem

scriptType

Zdravim. Mne na mojom monitore 1440x900 sa radiusi zobrazia normalne klasicky. No na kamaratovom monitore 1920x1080 sa nezobrazia na dolnom objekte (#wrapper) vobec.
CSS (styl.css):

Kód: Vybrať všetko

body { 
        text-align: center;
	margin:0 auto;padding:0;
}
#hlavicka {
	margin-bottom: 20px;
	width: 900px;
	height: 100px;
	background-color: #fde61e;
	background-image: url('../obrazky/odtien.png');
	-moz-border-radius: 0px 0px 22px 22px;  
    -webkit-border-radius: 0px 0px 22px 22px;  
}
#wrapper {
	width: 900px;
	height: 500px;
	background-color: #fde61e;
	border-top-left-radius: 80px 120px;
	border-top-right-radius: 60px 250px;
	border-bottom-left-radius: 22px;
	border-bottom-right-radius: 22px;
}

HTML:

Kód: Vybrať všetko

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MegaMind</title>
<link href="styl.css" rel="stylesheet" type="text/css" />
</head>
<body>	
	<div id="telo">
		<div id="hlavicka">
		</div>		
		<div id="wrapper">		
		</div>
	</div>
</body>
</html>

Viete niekto kde moze byt chyba? Mne sa to zobrazi v pohode. No jemu sa zobrazi dobre len hlavicka a jej radiusi. Wrapper je uz len stvorec.

nie je to rozlíšením, ale prehliadačmi.

scriptType

Kuuurnik. Mas pravdu. Pouzivam chrome. V mozzile to zobrazi zle. Ako vidim budem to musiet riesit obrazkami

Stym bude zas otrava.

//autoeditácia príspevku (24 Máj 2011, 22:16)
Tak spravil som screen. Fakt "uzasna" optimalizacia.

PhYs0c

nechapem preco je tu

Kód: Vybrať všetko

   border-top-left-radius: 80px 120px;
   border-top-right-radius: 60px 250px;
   border-bottom-left-radius: 22px;
   border-bottom-right-radius: 22px;

pri hornom okraji urcene zaoblenie dvakrat ale tak keby si to skusil aj pri dolnom, pri ktorom tvrdis ze to nezobrazuje?

Preetro

a prečo nepoužiješ

Kód: Vybrať všetko

border-radius: 0 25px 0 25px; 
-webkit-border-radius: 0 25px 0 25px;
-moz-border-radius: 0 25px 0 25px;

a kto používa staršie prehliadače internetu explorera, tak má smolu a bude mať ostré rohy, ja by som sa s tým až tak netrápil

harrison314

V novsich IE oble rohy idu ?
Ja som nato videl nejake strasne risienie z .htc suborom, vie mi dakdo vyvstlit o co ide?

A idu tam aj priehladne PNG bez filtra v CSS ?

htc nie je strašné riešenie, to isté ti viem spraviť aj cez klasický javascript. HTC (html components) je klasický súbor, v ktorom je definovaný javascript a komponent. Je to totálne zbytočná vychytávka IE. Microsoft vždy vymýšla a vždy chce niečo svoje, a toto je jedna z tých vecí. V zásade je to ale iba klasický javascript s pár tagmi ktoré hovoria na čo má byť aplikovaný

Preetro

do IE9 zaoblene rohy neboli podporovane, v IE9 uz su podporovane a IE10 je na tom s podporou standardov na dobrej ceste. Čo sa týka priehladnosti PNG bez filtra, tak to neviem:) treba pogoogliť.. o tých zaoblených rohoch viem, že v nových prehliadačoch idú všade, tak som to spomenul, ale je na každom, či bude navyše robiť extra vzhľad pre prehliadače, ktoré zaoblené rohy nepodporujú

sorien

W3C Specification
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Mozilla Implementation <3.5-4.0)
-moz-border-radius
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

Kód: Vybrať všetko

https://developer.mozilla.org/en/CSS/border-top-left-radius

CSS3 problem

CSS3 problem

Re: CSS3 problem

Re: CSS3 problem

Re: CSS3 problem

Re: CSS3 problem

Re: CSS3 problem

Re: CSS3 problem

Re: CSS3 problem

Re: CSS3 problem