Compatibilità CSS con Browser

[ylio82]

Salve ragazzi,

ho un piccolo problemino. Ho creato il file CSS per le pagine html/php del sito.

Con Chrome si vede benissimo, tutto bene allineato. il problema lo riscontro con altri browser (Mozilla, IE, e browser degli smartphone).

C'e' un sistema o un modo per rendere compatibile la mia pagina web con tutti i browser?

Grazie mille!!

[Prill]

Ciao, il sistema consiste nel costruire bene la propria pagina e il proprio foglio di stile, seguire gli standard e avere codice valido, poi per browser che non supportino determinate proprietà si possono usare degli accorgimenti. Senza vedere il tuo codice non ti si possono dare indicazioni precise e segnalare modifiche

[ylio82]

Ciao,

innanzitutto grazie mille per la risposta.

Posto il codice css e codice della pagina dove richiamo il css.

----------------CSS--------------------------

body
{
behavior: url(csshover.htc);
background: white;
margin: 0 0 0 0;

}


#contenitore
{
width: 100%;
height: 100%;
}


#contenitore_nuovo
{
margin-left: auto;
margin-right: auto;
position: relative;
width: 1000px;
}


#parte_centrale
{
position: relative;
float: left;
width: 100%;
background: green;
height: auto;
margin-left: auto;
margin-right: auto;
}




#banner
{
position: relative;
width: auto;
height: 120px;
background: #f1c200;
}


#logo
{
position: relative;
width: 435px;
height: 110px;
background: url('../images/logo_el_tipico_italiano.jpg');
z-index: 1;
float: left;
}


#cont_prod
{
position: relative;
width: 700px;
height: 750px;
z-index: 1;
float: left;
}


#sin_prod
{


margin-left: auto;
margin-right: auto;
position: relative;
width: 100px;
height: 400px;
float: left;
}


#des_prod
{
margin-left: auto;
margin-right: auto;
position: relative;
width: 200px;
height: auto;
float: left;
}
#rig_prod
{
position: relative;
width: auto;
z-index: 1;
float: left;
}


#prodotto
{
position: relative;
width: 150px;
z-index: 1;
float: left;
margin-right: 5px;
}


#tabella
{
border-left-color: red;
border-left-style: solid;
border-left-width: 1px;

border-right-color: red;
border-right-style: solid;
border-right-width: 1px;

border-top-color: red;
border-top-style: solid;
border-top-width: 1px;

border-bottom-color: red;
border-bottom-style: solid;
border-bottom-width: 1px;

height: 210px;
}


.testo_desc
{
color: white;
font-family: arial;
font-size: 10pt;
text-align: center;
}


#menu
{
font-size: 10pt;
background: #fbe792;
color: black;
font-family: arial;
height: 50px;
vertical-align: middle;
}


#menu .coll:visited
{
color: black;
}


#menu .coll
{
color: black;
text-decoration: none;
}


#menu .coll:hover
{
color: red;
}


#banner_bottom
{
position: relative;
width: 100%;
height: 80px;
background: #f1c200;
float: left;
z-index: 1;
}


.titolo_box{ margin-left:20px;}
.testo-box{ margin:15px;}


.apri{ font-size:18px; font-family:Verdana, Geneva, sans-serif; margin-right:50px; text-align: center}
.apri:hover{ font-size:22px; font-family:Verdana, Geneva, sans-serif; cursorointer;}
.chiudi{ font-size:18px; color:#000; font-weight:bold; position:absolute; right:2%; top:0%; cursorointer;}






.overlay{
background:#000;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursorointer;
/*Trasperenza cross browser*/
opacity: .7; filter: alpha(opacity=70);
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=70)";

}




#box{ width:600px; height:400px; background-color:#FFF; display:none; z-index:+300; position:absolute; left:30%; top:20%; -moz-border-radius: 15px; -webkit-border-radius: 15px;
border-radius: 15px;}


#sin_prod .voce_categoria
{
font-size: 10pt;
font-family: arial;
text-decoration: none;
color: black;
}


#sin_prod .voce_categoria:hover
{
color: red;
}


#sin_prod .voce_categoria:visited
{
color: black;
}


#menu_top
{
position: relative;
float: left;
height: 110px;
margin-top: 3px;
width: 200px;

margin-left: 20px;

border-left-color: #647a77;
border-left-style: solid;
border-left-width: 1px;

border-right-color: #647a77;
border-right-style: solid;
border-right-width: 1px;

border-top-color: #647a77;
border-top-style: solid;
border-top-width: 1px;

border-bottom-color: #647a77;
border-bottom-style: solid;
border-bottom-width: 1px;
}


#identificacion_cliente
{
position: relative;
float: left;
height: 110px;
margin-top: 3px;
width: 250px;


margin-left: 300px;

border-left-color: #647a77;
border-left-style: solid;
border-left-width: 1px;

border-right-color: #647a77;
border-right-style: solid;
border-right-width: 1px;

border-top-color: #647a77;
border-top-style: solid;
border-top-width: 1px;

border-bottom-color: #647a77;
border-bottom-style: solid;
border-bottom-width: 1px;
}


.area_distribuidor
{
color: black;
text-decoration: none;
}


.area_distribuidor:hover
{
color: red;
}


.area_distribuidor: visited
{
color: black;
}


#titolo_prodotti
{
text-align: center;
font-size: 12pt;
font-family: arial;
margin-top: 3px;
}


#menu_cli
{
font-size: 9pt;
font-family: arial;
}


#menu_cli ul
{
margin-top: 10px;
list-style-type:none;
margin-left: -10px;
}


#menu_cli ul li
{
margin-bottom: 3px;
}




#nuovo_utente table
{
margin-top: 10px;
font-family: arial;
font-size: 10pt;
/*border-left-color: #647a77;
border-left-style: solid;
border-left-width: 1px;

border-right-color: #647a77;
border-right-style: solid;
border-right-width: 1px;

border-top-color: #647a77;
border-top-style: solid;
border-top-width: 1px;

border-bottom-color: #647a77;
border-bottom-style: solid;
border-bottom-width: 1px;*/

background: url('../images/sfondo_formulario.png') no-repeat;
}


.link_reg
{
color: black;
text-decoration: none
}


.link_reg:hover
{
color: red;
}


.link_reg:visited
{
color: black;
}


.tab_anteprima
{
margin-top: 0px;
font-family: arial;
font-size: 10pt;
/*border-left-color: #647a77;
}

#tab_final
{
margin-top: 0px;
font-family: arial;
font-size: 10pt;
/*border-left-color: black;
border-left-style: solid;
border-left-width: 1px;

border-right-color: black;
border-right-style: solid;
border-right-width: 1px;

border-top-color: black;
border-top-style: solid;
border-top-width: 1px;

border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;*/
}

.forma_pago
{
margin-top: 0px;
margin-bottom: 10px;
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;

border-right-color: black;
border-right-style: solid;
border-right-width: 1px;

border-top-color: black;
border-top-style: solid;
border-top-width: 1px;

border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: 1px;
}


.titolo_box{ margin-left:20px;}
.testo-box{ margin:15px;}


.apri2{ font-size:10pt; font-family:arial; margin-right:0px; text-align: center; text-decoration: none}
.apri2:hover{ font-size:10pt; font-family:arial; cursorointer;}
.chiudi2{ font-size:18px; color:#000; font-weight:bold; position:absolute; right:2%; top:0%; cursorointer;}






.overlay2{
background:#000;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursorointer;
/*Trasperenza cross browser*/
opacity: .7; filter: alpha(opacity=70);
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=70)";

}
#box2{ width:600px; height:400px; background-color:#FFF; display:none; z-index:+300; position:absolute; left:30%; top:20%; -moz-border-radius: 15px; -webkit-border-radius: 15px;
border-radius: 15px; overflow: Auto;}

--------------HTML/PHP---------------
<head>
<link href="css/stile.css" rel="stylesheet" type="text/css" />
</head>
<?
include 'conf/connect.php';
?>


<body>
<div>
<?
include 'top.php';?>
</div>
<div>
<?
include 'menu.php';
?>
</div>

</body>

se hai bisogno anche dei contenuti delle pagine php fammelo sapere così lo posto.

Grazie mille!!!

[ylio82]

Ciao, il sistema consiste nel costruire bene la propria pagina e il proprio foglio di stile, seguire gli standard e avere codice valido, poi per browser che non supportino determinate proprietà si possono usare degli accorgimenti. Senza vedere il tuo codice non ti si possono dare indicazioni precise e segnalare modifiche

Il problema più grande lo riscontro utilizzando i browser degli smarthphone (Iphone, Samsung Galaxy S3, ecc.).

[Prill]

Per inserire il codice puoi usare l'iconcina col cancelletto.
Non serve il codice php ma l'html risultante (visualizza sorgente della pagina dal browser), che puoi postare ridotto all'essenziale (non inserire eventuali dati personali, email ecc contenuti nella pagina).

Intanto, se quello è il css completo, manca un

html, body {margin:0;padding:0; height:100%}

e saranno inutili margini destro e sinistro settati su auto in presenza di div larghi il 100% o con un float

e se quello l'html, manca un doctype

[ylio82]

Per inserire il codice puoi usare l'iconcina col cancelletto.
Non serve il codice php ma l'html risultante (visualizza sorgente della pagina dal browser), che puoi postare ridotto all'essenziale (non inserire eventuali dati personali, email ecc contenuti nella pagina).

Intanto, se quello è il css completo, manca un

html, body {margin:0;padding:0; height:100%}

e saranno inutili margini destro e sinistro settati su auto in presenza di div larghi il 100% o con un float

e se quello l'html, manca un doctype

Ho inserito il codice che mi hai detto. Ma sugli smartphone ancora niente.

Ti posto l'html della pagina index.php

<!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">
	<head>
	<link href="css/stile.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div>
	<div id="banner">
	<div id="logo"> </div>
	<div id="identificacion_cliente">
	<head>
	<meta http-equiv="Content-Language" content="es">
	</head>
	<table border="0" width="250" id="table1" cellspacing="1" style="border-collapse: collapse; margin-top: 0px" cellpadding="0">
	<tr>
	<td colspan="2" bgcolor="#647a77">
	<p align="center">
	<font face="Arial" style="font-size: 9pt" color="#FFFFFF">Mi cuenta de cliente</font></td>
	</tr>
	<tr>
	<tr>
	<td>
	<div id="menu_cli">
	<ul>
	<li><a href="mis_pedidos.php">Pedidos realizados</a></li>
	<li>Modificar cuenta</li>
	<li><a href="logout.php">salir</a></li>
	</ul>
	</div>
	</td>
	</tr>
	</table>
	</div>
	<div id="menu_top">
	<table border="0" width="200" id="table1" cellspacing="1" style="border-collapse: collapse; margin-top: 0px" cellpadding="0">
	<tr>
	<td colspan="2" bgcolor="#647a77">
	<p align="center">
	<font face="Arial" style="font-size: 9pt" color="#FFFFFF">Area vendedor</font></td>
	</tr>
	<tr>
	<td>
	<p align="left" style="margin-top: 5px; margin-left: 3px">
	<font face="Arial" style="font-size: 9pt" color="#000000">- Se Distribuidor</font></p>
	<p align="left" style="margin-left: 3px">
	<font face="Arial" style="font-size: 9pt" color="#000000">- <a href="tienda/autentifica.php" class="area_distribuidor">Area Distribuidor</a></font></p></td>
	</tr>
	</table></div>
	</div> </div>
	<div>
	<head>
	<link href="css/stile.css" rel="stylesheet" type="text/css" />
	</head>
	<div id="menu">
	<div style="position: relative; top: 30%; bottom: 70%; width: auto; ">
	<a style="margin-left: 50px; font-weight:700" href="index.php" class="coll">
	Inicio</a> |
	<b><a href="#" class="coll">Misión</a></b> | <b>
	<a href="productos.php" class="coll">Productos</a></b> |
	<b><a href="#" class="coll">Contactos</a></b></div></div> </div>
	<div id="contenitore_nuovo">
	</div>
	<div id="banner_bottom">
	<div>sdasdasdasdasdasdads</div></div>
	</body>

[Prill]

Un po' di problemi nel tuo codice:
1. manca il tag title;
2. hai diversi tag head (presenti nei file che includi che invece devono contenere solo la parte di codice html che devi apparire nel punto di inserimento);
3. le due tabelle in alto possono essere eliminate ed avere semplicemente dei div flottanti;
4. quei tag font sono da eliminare, il carattere invece di essere ripetuto ogni volta può essere impostato nel css su body (font-family:Arial, Helvetica, sans-serif; ) aggiungendo anche altri caratteri che saranno mostrati in assenza del primo; anche il colore può andare lì. Usi per il font una dimensione in punti, ottimale per la stampa, per il video è preferibile quella in pixel;
5. tutte le formattazioni interne andrebbero portate nel foglio di stile.

Semplificazioni:

border-left-color: red;
     border-left-style: solid;
     border-left-width: 1px;
     
     border-right-color: red;
     border-right-style: solid;
     border-right-width: 1px;
     
     border-top-color: red;
     border-top-style: solid;
     border-top-width: 1px;
     
     border-bottom-color: red;
     border-bottom-style: solid;
     border-bottom-width: 1px;

nelle sue varie occorrenze può diventare

border:1px solid red

o col valore esadecimale #f00.

Nel tuo css vedo poi regole che non sono applicate a nessun elemento della pagina.
Più tardi comunque la guardo meglio e ti posto il codice rivisto (semplicando ulteriormente)

[ylio82]

Ok,

grazie mille per i consigli. Ma per i css in linea da mettere nel foglio di stile, vanno messi in questo modo:

#identificacion_cliente input
{
width: 100px;
height: 35px;
font-size: 10pt;
font-family: arial
}

va bene?

[Prill]

è inutile impostare l'Arial su tutti gli elementi, puoi metterlo su body:

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#fff;
color:#000;
}

ho tolto behavior: url(csshover.htc); che hai sul body, indicazione per il solo Explorer, essendo l'hover su tutti gli elementi supportato a partire da E7 (a condizione di avere un Doctype valido, con IE7 però è necessario un Doctype Strict), se ti preoccupano le versioni più vecchie potrai inserire il css solo per Explorer così:

<!--[if lte IE 7]>
<style type="text/css">
body {
behavior: url(csshover.htc);
}
</style>
<![endif]-->

[Prill]

Copia e incolla in una pagina nuova e prova

<!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="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
* {
    margin:0;
    padding:0; /* azzeriamo tutti i margini e i padding per non avere problemi col float, e perché di default i diversi browser possono comportarsi diversamente  */
    border:0; /* azzeriamo tutti i bordi, tornerà utile per immagini che fanno da link */
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#fff;
color:#000;
}

#contenitore{
width: 1000px;
margin:0 auto;
}

#banner{
height: 120px;
background: #f1c200;
overflow:hidden; /* interrompiamo il float */
}

#logo{
width: 435px;
height: 110px;
float: left;
background: url('../images/logo_el_tipico_italiano.jpg');
}
#id_cliente{
width: 250px;
height: 110px;
float: left;
margin-left:20px;
margin-top: 3px;
border:1px solid #647a77;
}
#menu_top{
float: left;
width: 200px;
height: 110px;
margin-top: 3px;
margin-left: 20px;
border:1px solid #647a77;
}
#menu_top p{
padding-left:5px; /* per distanziare il testo dal bordo del div */
}
.firstLine{
/* impostiamo il primo paragrafo del div con sfondo colorato */
text-align:center;
color:#fff;
background-color:#647a77;
padding:10px 0;
margin-bottom:5px; 
}
.area_distribuidor{
color: black;
text-decoration: none;
}

.area_distribuidor:hover{
color: red;
}

.area_distribuidor: visited{
color: black;
}

#menu_cli {
list-style-type:none;
padding-left:5px; /* per distanziare il testo dal bordo del div */
}

#menu_cli li{
margin-bottom: 3px;
}
#menu{
font-size: 14px;
background: #fbe792;
height: 50px;
line-height:50px; /* centriamo il testo verticalmente */
padding-left:50px;
}

#menu a{
color: black;
text-decoration: none;
font-weight:bold;
}
#menu a:visited{
color: black;
}
#menu a:hover{
color: red;
}

#banner_bottom{
height: 80px;
background: #f1c200;
}
-->
</style>
</head>

<body>
<div id="contenitore">
    <div id="banner">

     <div id="logo"> </div>
        
     <div id="id_cliente">
      <p class="firstLine">Mi cuenta de cliente</p>
      <ul id="menu_cli">
       <li><a href="mis_pedidos.php">Pedidos realizados</a></li>
       <li>Modificar cuenta</li>
       <li><a href="logout.php">salir</a></li>
      </ul>
     </div>
    
    <div id="menu_top">
     <p class="firstLine">Area vendedor</p>
        <p> - Se Distribuidor</p>
        <p> - <a href="tienda/autentifica.php" class="area_distribuidor">Area Distribuidor</a></p>
    </div>
    
    </div>
    <div>
       
    <div id="menu">
     <a href="index.php">Inicio</a> |
     <a href="#">Misión</a> | <a href="productos.php">Productos</a> |
     <a href="#">Contactos</a>
    </div>
    </div>

    <div id="banner_bottom">
     <div>sdasdasdasdasdasdads</div>
    </div>
    </div>
</body>
</html>

ci sarebbero da rivedere ancora i tuoi menu, ma ho lasciato i tuoi paragrafi