Autore Topic: bordi arrotondati con IE (Letto 1755 volte)

ophtalmos · « **il:** 11 Nov 2010, 14:38:16 »

Prima di creare un sito provo gli script, ho provato il codice HTML e le regole CSS per creare dei bordi arrotondati; con Firefox tutto ok, con IE 8 le immagini create col bordo arrotondato si situano nei 2 top
e in basso solo nel bottom-left(non nel bottom-right).
Allego il codice e le regole usate:

codice HTML

Codice: [Seleziona]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
<html>
<head>
<title>prove</title>
<link rel="stylesheet" href="template1.css" type="text/css"/>
</head>
<body>
<div class="contenitore">
   <div class="topleft">
     <div class="topright">
       <div class="bottomleft"
         <div class="bottomright">
           <div class="contenuto">
           <p>Qui va il contenuto.</p>
  		   </div>
         </div>
       </div>
     </div>
   </div>
</div>
</body>
</html>

regole CSS

Codice: [Seleziona]

.contenitore {
   width: 30%;
   color: #000;
   background-color: #CC0000;
   height:200px;
}

.topleft { background: url(top_l.gif) no-repeat top left }

.topright { background: url(top_r.gif) no-repeat top right;height:100%; }

.bottomleft { background: url(bottom_l.gif) no-repeat bottom left; height:200px;}

.bottomright { background: url(bottom_r.gif) no-repeat bottom right; height:100%;}

.contenuto { padding: 10px }

Credo che bisogna creare un foglio di style per IE ma se è così quale regola va inserita?
O il problema dipende da altro e in questo caso come va risolto?
Ciao e grazie.

tonicopi · « **Risposta #1 il:** 11 Nov 2010, 14:50:24 »

Problema non risolvibile con il foglio di stile. IE non supporta gli spigoli arrotondati per adesso

ophtalmos · « **Risposta #2 il:** 11 Nov 2010, 14:53:52 »

scusa mi puoi dire con che sistema alternativo posso creare spigoli arrotondati che vadano bene anche a iE?
ciao e grazie

tonicopi · « **Risposta #3 il:** 11 Nov 2010, 14:58:18 »

Sono pseudo spigoli arrotondati realizzati con immagini. Nel rhuk milkyway vedi come realizza i moduli a sinistra con il sufisso _menu... Qui c'è anche una guida:
http://wiki.joomla.it/index.php?title=Approfondimento_sui_moduli#Creare_angoli_arrotondati

ophtalmos · « **Risposta #4 il:** 11 Nov 2010, 15:09:25 »

Ok grazie, conosco qusta guida, solo che io stavo cercando un metodo più semplice
grazie e ciao

tonicopi · « **Risposta #5 il:** 11 Nov 2010, 15:23:40 »

Il metodo più semplice se si deve ridimensionare solo in uno dei due lati (L o H) è di usare solo due div conlo sfondo... O anche uno solo se la dimensione è fissa

L'innominabile programma per templates li realizza con una ventina di div annidati. Prova ad ispezionare con firebug:
http://www.democraticiperdueville.it/
Sembra complicatissimo ma basta copiare codice ed immagini e fare l'override

ophtalmos · « **Risposta #6 il:** 12 Nov 2010, 05:08:42 »

Scusate la mia lentezza ad arrivarci, cmq finalmente ce l'ho fatta a raggiungere lo scopo, in questo modo:
1:ho eliminato la class ".bottomright"

Codice: [Seleziona]

.bottomright { background: url(bottom_r.gif) no-repeat bottom right; height:100%;}] 2: ho cambiato la class ".contenitore"

Codice: [Seleziona]

.contenitore {
   width: 30%;
   color: #000;
   height:200px;
   background: #cc0000 url(bottom_r.gif) no-repeat bottom right; height:100%;
}

Adesso gli angoli appaiono arrotondati con box fluido sia in firefox che in I.E., vorrei un parere sull'adeguatezza della soluzione trovata
grazie e buonanotte

Autore Topic: bordi arrotondati con IE (Letto 1755 volte)

ophtalmos

bordi arrotondati con IE

tonicopi

Re:bordi arrotondati con IE

ophtalmos

Re:bordi arrotondati con IE

tonicopi

Re:bordi arrotondati con IE

ophtalmos

Re:bordi arrotondati con IE

tonicopi

Re:bordi arrotondati con IE

ophtalmos

Re:bordi arrotondati con IE