PDA

View Full Version : CSS


Pro7on
07-12-2006, 10:28
<html>


<style type="text/css">
<!--
/* STILIZZAZIONI DI BASE DELLA PAGINA */

body
{
background-color: #FFFFFF;
}
div
{
font: Normal 10px Verdana;
}
a
{
color: #FFFFFF;
}

/* CONTENITORI DEI BORDI E DEL CONTENUTO DEL BOX */

div.BORDI
{
width: 120px;
}
div.CONTENUTO
{
background-color: #FF6600;
color: #FFFFFF;
width: 120px;
padding: 5px;
}

/* CREAZIONE DEGLI ANGOLI SMUSSATI */

span.TOP, span.BOTTOM
{
display: Block;
background-color: #FFFFFF;
}
span.TOP span, span.BOTTOM span
{
display: Block;
overflow: Hidden;
background-color: #FF6600;
height: 1px;
}
span.RIGA1
{
margin: 0 5px;
}
span.RIGA2
{
margin: 0 3px;
}
span.RIGA3
{
margin: 0 2px;
}
span.TOP span.RIGA4, span.BOTTOM span.RIGA4
{
margin: 0 1px;
height: 2px;
}
-->
</style>

<body>

<div class="BORDI">
<span class="TOP">
<span class="RIGA1"></span>
<span class="RIGA2"></span>
<span class="RIGA3"></span>
<span class="RIGA4"></span>
</span>
</div>
<div class="CONTENUTO">
<b>MRW Corsi</b><br><br>
Corsi professionali per Webmaster, Programmatori,
Grafici e tecnici del comparto IT!!!<br><br>
<a href="http://www.mrwcorsi.it">www.mrwcorsi.it</a>
</div>
<div class="BORDI">
<span class="BOTTOM">
<span class="RIGA4"></span>
<span class="RIGA3"></span>
<span class="RIGA2"></span>
<span class="RIGA1"></span>
</span>
</div>

</body>
</html>


come mai in firefox nn và, o meglio come posso aggiustare la cosa? :muro:

fale
07-12-2006, 10:45
http://jigsaw.w3.org/css-validator/validator?text=body%0D%0A%7B%0D%0Abackground-color%3A+%23FFFFFF%3B%0D%0A%7D%0D%0Adiv%0D%0A%7B%0D%0Afont%3A+Normal+10px+Verdana%3B%0D%0A%7D%0D%0Aa%0D%0A%7B%0D%0Acolor%3A+%23FFFFFF%3B%0D%0A%7D%0D%0A%0D%0A%2F*+CONTENITORI+DEI+BORDI+E+DEL+CONTENUTO+DEL+BOX+*%2F%0D%0A%0D%0Adiv.BORDI%0D%0A%7B%0D%0Awidth%3A+120px%3B%0D%0A%7D%0D%0Adiv.CONTENUTO%0D%0A%7B%0D%0Abackground-color%3A+%23FF6600%3B%0D%0Acolor%3A+%23FFFFFF%3B%0D%0Awidth%3A+120px%3B%0D%0Apadding%3A+5px%3B%0D%0A%7D%0D%0A%0D%0A%2F*+CREAZIONE+DEGLI+ANGOLI+SMUSSATI+*%2F%0D%0A%0D%0Aspan.TOP%2C+span.BOTTOM%0D%0A%7B%0D%0Adisplay%3A+Block%3B%0D%0Abackground-color%3A+%23FFFFFF%3B%0D%0A%7D%0D%0Aspan.TOP+span%2C+span.BOTTOM+span%0D%0A%7B%0D%0Adisplay%3A+Block%3B%0D%0Aoverflow%3A+Hidden%3B%0D%0Abackground-color%3A+%23FF6600%3B%0D%0Aheight%3A+1px%3B%0D%0A%7D%0D%0Aspan.RIGA1%0D%0A%7B%0D%0Amargin%3A+0+5px%3B%0D%0A%7D%0D%0Aspan.RIGA2%0D%0A%7B%0D%0Amargin%3A+0+3px%3B%0D%0A%7D%0D%0Aspan.RIGA3%0D%0A%7B%0D%0Amargin%3A+0+2px%3B%0D%0A%7D%0D%0Aspan.TOP+span.RIGA4%2C+span.BOTTOM+span.RIGA4%0D%0A%7B%0D%0Amargin%3A+0+1px%3B%0D%0Aheight%3A+2px%3B%0D%0A&usermedium=all

Errors
URI : file://localhost/TextArea

* Line: 57 Context : span.TOP span.RIGA4, span.BOTTOM span.RIGA4

Parse Error - [empty string]

Warnings
URI : file://localhost/TextArea

* Line : 3 (Level : 1) You have no color with your background-color : body
* Line : 7 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 7 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : div
* Line : 11 (Level : 1) Same colors for color and background-color in two contexts body and a
* Line : 11 (Level : 1) You have no background-color with your color : a
* Line : 11 (Level : 1) Same colors for color and background-color in two contexts span.BOTTOM and a
* Line : 11 (Level : 1) Same colors for color and background-color in two contexts span.BOTTOM and a
* Line : 33 (Level : 1) You have no color with your background-color : span.BOTTOM
* Line : 33 (Level : 1) You have no color with your background-color : span.BOTTOM
* Line : 39 (Level : 1) You have no color with your background-color : span.BOTTOM span
* Line : 39 (Level : 1) You have no color with your background-color : span.BOTTOM span

Valid CSS information

* body {
o background-color : #ffffff;
}
* div {
o font : normal 10px Verdana;
}
* a {
o color : #ffffff;
}
* div.BORDI {
o width : 120px;
}
* div.CONTENUTO {
o background-color : #ff6600;
o color : #ffffff;
o width : 120px;
o padding : 5px;
}
* span.TOP, span.BOTTOM {
o display : block;
o background-color : #ffffff;
}
* span.TOP span, span.BOTTOM span {
o display : block;
o overflow : hidden;
o background-color : #ff6600;
o height : 1px;
}
* span.RIGA1 {
o margin : 0 5px;
}
* span.RIGA2 {
o margin : 0 3px;
}
* span.RIGA3 {
o margin : 0 2px;
}

questo è quello che dice al link sopra (non so se funziona) il validatore del w3c

Pro7on
07-12-2006, 11:37
ma quindi, explorer nn segue le regole standart???

kk3z
07-12-2006, 14:56
Non c'è nessun errore nel codice css, è solo che uno lo interpreta così e l'altro cosà. Puoi usare il commento condizionale (o come cavolo si chiama) che specifica un valore diverso di width per il box CONTENUTO con IE:
<html>

<head>
<style type="text/css">
/* STILIZZAZIONI DI BASE DELLA PAGINA */

body {
background-color: #FFFFFF;
}
div{
font: normal 10px Verdana;
}
a {
color: #FFFFFF;
}

/* CONTENITORI DEI BORDI E DEL CONTENUTO DEL BOX */

div.BORDI {
width: 120px;
}
div.CONTENUTO {
background-color: #FF6600;
color: #FFFFFF;
width: 110px;
padding: 5px;
}

/* CREAZIONE DEGLI ANGOLI SMUSSATI */

span.TOP, span.BOTTOM {
display: block;
background-color: #FFFFFF;
}
span.TOP span, span.BOTTOM span {
display: block;
overflow: hidden;
background-color: #FF6600;
height: 1px;
}
span.RIGA1 {
margin: 0 5px;
}
span.RIGA2 {
margin: 0 3px;
}
span.RIGA3 {

}
span.TOP span.RIGA4, span.BOTTOM span.RIGA4 {
margin: 0 1px;
height: 2px;
}
</style>

<!--[if gt IE 5.5]>
<style type="text/css">
div.CONTENUTO {
width: 120px;
}
</style>
<![endif]-->

</head>

<body>

<div class="BORDI">
<span class="TOP">
<span class="RIGA1"></span>
<span class="RIGA2"></span>
<span class="RIGA3"></span>
<span class="RIGA4"></span>
</span>
</div>
<div class="CONTENUTO">
<b>MRW Corsi</b><br><br>
Corsi professionali per Webmaster, Programmatori,
Grafici e tecnici del comparto IT!!!<br><br>
<a href="http://www.mrwcorsi.it">www.mrwcorsi.it</a>
</div>
<div class="BORDI">
<span class="BOTTOM">
<span class="RIGA4"></span>
<span class="RIGA3"></span>
<span class="RIGA2"></span>
<span class="RIGA1"></span>
</span>
</div>

</body>
</html>

Così è ok in tutt'e due i browser (e pure in opera).

fale
07-12-2006, 15:01
no explorer va a muzzo


@kk3z

l'errore c'è:
* Line: 57 Context : span.TOP span.RIGA4, span.BOTTOM span.RIGA4

kk3z
07-12-2006, 15:04
no explorer va a muzzo
Eh? L'ho appena provato su tre browser ed è ok su tutti...

l'errore c'è:
* Line: 57 Context : span.TOP span.RIGA4, span.BOTTOM span.RIGA4
L'errore non c'è (http://jigsaw.w3.org/css-validator/validator?text=%2F*+STILIZZAZIONI+DI+BASE+DELLA+PAGINA+*%2F%0D%0A%0D%0Abody+%7B%0D%0A++background-color%3A+%23FFFFFF%3B%0D%0A%7D%0D%0Adiv%7B%0D%0A++font%3A+normal+10px+Verdana%3B%0D%0A%7D%0D%0Aa+%7B%0D%0A++color%3A+%23FFFFFF%3B%0D%0A%7D%0D%0A%0D%0A%2F*+CONTENITORI+DEI+BORDI+E+DEL+CONTENUTO+DEL+BOX+*%2F%0D%0A%0D%0Adiv.BORDI+%7B%0D%0A++width%3A+120px%3B%0D%0A%7D%0D%0Adiv.CONTENUTO+%7B%0D%0A++background-color%3A+%23FF6600%3B%0D%0A++color%3A+%23FFFFFF%3B%0D%0A++width%3A+110px%3B%0D%0A++padding%3A+5px%3B%0D%0A%7D%0D%0A%0D%0A%2F*+CREAZIONE+DEGLI+ANGOLI+SMUSSATI+*%2F%0D%0A%0D%0Aspan.TOP%2C+span.BOTTOM+%7B%0D%0A++display%3A+block%3B%0D%0A++background-color%3A+%23FFFFFF%3B%0D%0A%7D%0D%0Aspan.TOP+span%2C+span.BOTTOM+span+%7B%0D%0A++display%3A+block%3B%0D%0A++overflow%3A+hidden%3B%0D%0A++background-color%3A+%23FF6600%3B%0D%0A++height%3A+1px%3B%0D%0A%7D%0D%0Aspan.RIGA1+%7B%0D%0A++margin%3A+0+5px%3B%0D%0A%7D%0D%0Aspan.RIGA2+%7B%0D%0A++margin%3A+0+3px%3B%0D%0A%7D%0D%0Aspan.RIGA3+%7B%0D%0A++%0D%0A%7D%0D%0Aspan.TOP+span.RIGA4%2C+span.BOTTOM+span.RIGA4+%7B%0D%0A++margin%3A+0+1px%3B%0D%0A++height%3A+2px%3B%0D%0A%7D&usermedium=all).

lucan1
24-12-2006, 18:05
io darei un'occhiata all'indirizzo http://www.webreference.com/html/doctype/ si spiega come i browser abbiano due modalità di analisi della pagina: una standard che utilizzano quando trovano questa dichiarazione che garantisce che nella pagina sono state seguite le specifiche W3C, e una detta “quirks” in cui non essendo garantita la standardizzazione cercano di simulare il comportamento di vecchie versioni del browser.
Nel caso della tua pagina non c'è il tag di tipo DOCTYPE che serve per dire al browser come analizzare la pagina e quindi potrebbe da lì esserci un errore in alcuni browser ma non in altri.