Vai al contenuto

css cross-browser

Nemesis19_italy

Messaggi raccomandati

Nemesis19_italy

Nemesis19_italy

Inviato
Inviato

Un precedente post di qualche tempo fa mi ha messo la pulce all'orecchio. Purtroppo se non vedo nella pratica, non riesco bene a focalizzare la cosa, quindi posto qui un css, chiedendovi dove dovrei mettere le mani per farlo diventare cross-browser ed usare un css selector (nel mio caso in php).

Sbuzzatelo quanto volete! Ve ne prego! Tenete presente che allo stato attuale questo css necessita di alcuni piccoli ritocchi in margini e padding per renderlo ottimale per IE7 ed altri ritocchini per IE6.

Sostanzialmente quello che interessa a me, sono quegli accorgimenti ricorrenti che permettono di fare questo lavoro, ho sentito parlare di hack, ma non è che sia riuscito a trovare tra i 1000 articoli di html.it quello che cercavo.

Grazie a tutti!

html,body {
margin: 0;
padding: 0;
}

body {
background-color: #FFFFFF;
}

div#header {
width: 750px;
height: 100px;
margin: 0px auto 5px auto;
}
div#logo {
float: left;
width: 169px;
margin: 0 auto;
}
div#space {
width: 581px;
height: 100px;
margin: 0px 0px 0px 169px;
text-align: right;
}

div#container {
width: 750px;
margin: 0 auto;
text-align: center;
}

div#top_web {
float: left;
margin: 0px 0px;
width: 183px;
height: 195px;
background-image: url("/imgs/top_web_ref.jpg");
background-position: bottom;
background-repeat: no-repeat;
z-index: 1;
}

div#top_technical {
margin: 0px 0px 0px 189px;
width: 183px;
height: 195px;
background-image: url("/imgs/top_technical_ref.jpg");
background-position: bottom;
background-repeat: no-repeat;
}

div#top_dx {
float: right;
margin: 0px 0px 0px 6px;
width: 372px;
height: 120px;
}

div#top_graphics {
float: left;
margin: 0px 0px;
width: 183px;
height: 195px;
background-image: url("/imgs/top_graphics_ref.jpg");
background-position: bottom;
background-repeat: no-repeat;
}

div#top_records {
margin: 0px 0px 0px 189px;
width: 183px;
height: 195px;
background-image: url("/imgs/top_records_ref.jpg");
background-position: bottom;
background-repeat: no-repeat;

}

div#extra {
margin: 0px 0px;
width: 750px;
position: relative;
}

div#navigation {
width: 750px;
margin: 0px 0px;
text-align: center;
}

div#content {
margin: 0 auto;
width: 750px;
padding: 5px;
}

div#footer {
clear: both;
width: 750px;
margin: 10px 0px 15px 0px;
text-align: center;
}

div#box1 {
position: absolute;
top: 10px;
left: 550px;
width: 100px;
z-index: 5;
}
div#box2 {
position: absolute;
top: 110px;
left: 600px;
width: 100px;
z-index: 5;
}

.titolo {
font-family: Verdana;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.testo {
font-family: Verdana;
font-size: 11px;
font-weight: normal;
color: #000000;
text-align: justify;
}
.center {
font-family: Verdana;
font-size: 11px;
font-weight: normal;
color: #000000;
margin-top: 3px;
margin-bottom: 20px;
}
.published {
width: 250px;
text-align: center;
}

a.web:link, a.web:active, a.web:visited {
text-decoration: none;
color: #0080FF;
}
a.web:hover {
text-decoration: line-through;
}
a.technical:link, a.technical:active, a.technical:visited {
text-decoration: none;
color: #008000;
}
a.technical:hover {
text-decoration: line-through;
}
a.graphics:link, a.graphics:active, a.graphics:visited {
text-decoration: none;
color: #800000;
}
a.graphics:hover {
text-decoration: line-through;
}
a.records:link, a.records:active, a.records:visited {
text-decoration: none;
color: #804000;
}
a.records:hover {
text-decoration: line-through;
}

Spero la cosa vi possa stuzzicare!

Fabrizio

Link al commento
Condividi su altri siti
grigio60

grigio60

Inviato
Inviato

non serve alcun hack se hai l'accortezza, all'inizio di ogni file html, di inserire la corretta dichiarazione DTD.

io ormai da tempo uso un'unico file di css, senza hack e senza istruzioni condizionali, per tutti i browser.

Serve aiuto? Posso darti una mano in

Webmasters - Aiuto Software - Da Windows a Mac

Mappa Utenti ItaliaMac

[[miao]]

Link al commento
Condividi su altri siti
Nemesis19_italy

Nemesis19_italy

Inviato
  • Autore
Inviato

eppure io uso sempre questo dtd e relativi meta:

<!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" xml:lang="it">
<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

o all'occorrenza charset utf-8, eppure la millimetria dei pixel non è letta uguale in tutti i browser, ff, safari, opera leggono uguale, ie7 ha una lettura sua e ie6 pure.

ma mi viene un dubbio, usi un css interno o esterno?

Fabrizio

Link al commento
Condividi su altri siti
grigio60

grigio60

Inviato
Inviato

css esterno, sempre: in questo modo modificando un solo file modifico in un colpo solo tutto il sito. la codifica del carattere (latin o utf) è ininfluente.

a proposito della millimetria dei pixel: vai a vedere questo sito

www.swimforlife-italia.org

ha un unico file di css, è calibrato su box al pixel e il rendering è identico su tutti i browser, senza hack di alcun tipo :confused:

Serve aiuto? Posso darti una mano in

Webmasters - Aiuto Software - Da Windows a Mac

Mappa Utenti ItaliaMac

[[miao]]

Link al commento
Condividi su altri siti
Nemesis19_italy

Nemesis19_italy

Inviato
  • Autore
Inviato

si ok ma il mio dtd è giusto allora?

cmq prova a vedere questo sito:

http://nemesisstyle.altervista.org

qui benché il css di base fosse giusto (almeno credo visto che è quello che ho postato in cima), mi è toccato cambiare alcuni pixel nei css per ie7 e ie6.

io non capisco dove faccio l'errore!!!

uffa :fiorellino:

Fabrizio

Link al commento
Condividi su altri siti
grigio60

grigio60

Inviato
Inviato

il dtd è quello giusto, sì, ma non ho capito se adesso su ie7/ie6 lo rende in modo diverso o lo rende correttamente?

se la risposta è sì allora non hai commesso alcun errore, è normale che si debba scendere a piccoli compromessi sul singolo pixel se l'utente finale comunque non percepisce nessuna differenza di resa

Serve aiuto? Posso darti una mano in

Webmasters - Aiuto Software - Da Windows a Mac

Mappa Utenti ItaliaMac

[[miao]]

Link al commento
Condividi su altri siti
Nemesis19_italy

Nemesis19_italy

Inviato
  • Autore
Inviato

al momento c'è il css selector in php. cmq anche se quel sito potrebbe scendere a compromessi, ce ne sono altri in cui non posso quindi ho la necessità della millimetria in ogni browser...

allora vedi che avevo ragione che anche se è giusto, per i pixel devo pur sempre cambiare qualcosa...

grazie mille cmq!

ma a mettere in xhtml strict?

Fabrizio

Link al commento
Condividi su altri siti
grigio60

grigio60

Inviato
Inviato

ah no allora, se mi metti un css selector non posso aiutarti a dirti dove c'è il problema perché non vedo quali sono le differenze che hai introdotto tra un browser e l'altro :shock:

temo di essermi spiegato male io: nel sito che ti ho mandato come esempio io ho una UNICA css, senza selector di alcun tipo, dove i valori dei pixel usati sono esattamente gli stessi per qualsiasi browser, ossia non cambio un bel nulla tra ie6, ie7, firefox ecc. il "compromesso" di cui parlo consiste nell'identificare il valore corretto che va bene per tutti i browser per ottenere un rendering uniforme.

xhtml strict non ha effetto sull'interpretazione delle css, ha effetto solo sull'interpretazione dei tag (x)html.

Serve aiuto? Posso darti una mano in

Webmasters - Aiuto Software - Da Windows a Mac

Mappa Utenti ItaliaMac

[[miao]]

Link al commento
Condividi su altri siti
grigio60

grigio60

Inviato
Inviato

allora: ho dato un'occhiata al tuo stile per firefox e a quello per ie7 (style_ie7.css).

l'unica differenza che ho visto è solo nella definizione di div#footer, che in un caso (firefox) non ha alcuna definizione di padding mentre per ie7 definisce un padding-top di 20px.

francamente non mi sembra una differenza tale da giustificare un selector e un file di css dedicato per ie7, anche perché, non essendoci di mezzo la definizione dello stile height, non mi aspetto alcuna differenza di rendering se si inserisce un padding-top: 20px anche nel file di stile per firefox e buona notte.

Serve aiuto? Posso darti una mano in

Webmasters - Aiuto Software - Da Windows a Mac

Mappa Utenti ItaliaMac

[[miao]]

Link al commento
Condividi su altri siti
grigio60

grigio60

Inviato
Inviato

ho visto anche le css per ie6, secondo me quel che ti frega è l'uso eccessivo di position:absolute mescolato con position:relative, ti stai complicando la vita...

Serve aiuto? Posso darti una mano in

Webmasters - Aiuto Software - Da Windows a Mac

Mappa Utenti ItaliaMac

[[miao]]

Link al commento
Condividi su altri siti
grigio60

grigio60

Inviato
Inviato
allora vedi avevo ragione? il selector per fare le cose millimetriche serve

no, non serve: anche nel mio caso ho una div#footer definita proprio come la tua e non ho alcun bisogno di un selettore e di un padding-top aggiuntivo per avere lo stesso rendering millimetrico

Serve aiuto? Posso darti una mano in

Webmasters - Aiuto Software - Da Windows a Mac

Mappa Utenti ItaliaMac

[[miao]]

Link al commento
Condividi su altri siti
Nemesis19_italy

Nemesis19_italy

Inviato
  • Autore
Inviato

sono stato costretto a metterli perché l'uso dei float mi dava problemi.

vedi, prima quei 4 blocchi li avrei messi in una tabella, ma adesso che mi sfrorzo ad scrivere l'html in modo corretto, so che non posso usarli.

guarda:

<div id="container">
<div id="top_web">
	<!-- SERVIZI WEB -->
<a onmouseover="ChangeOverBottom(0)" onmouseout="ChangeOutBottom(0)" href="web.php"><img src="/imgs/top_web.jpg" border="0" name="button0" id="button0" alt="" /></a>
</div>
<div id="top_dx">
<div id="top_graphics">
	<!-- GRAFICA PUBBLICITARIA -->
<a onmouseover="ChangeOverBottom(4)" onmouseout="ChangeOutBottom(4)" href="graphics.php"><img src="/imgs/top_graphics.jpg" border="0" name="button4" id="button4" alt="" /></a>
</div>
<div id="top_records">
	<!-- RECORDS -->
<a onmouseover="ChangeOverBottom(6)" onmouseout="ChangeOutBottom(6)" href="records.php"><img src="/imgs/top_records.jpg" border="0" name="button6" id="button6" alt="" /></a>
</div>	
</div>
<div id="top_technical">
	<!-- TECHNICAL -->
<a onmouseover="ChangeOverBottom(2)" onmouseout="ChangeOutBottom(2)" href="technical.php"><img src="/imgs/top_technical.jpg" border="0" name="button2" id="button2" alt="" /></a>
</div>
</div>

questo è il codice html dei 4 blocchi e dal css desumi come è stato strutturato, ho dovuto intrecciare tutti i div con vari float per raggiungere quel risultato e che fatica!

sul sito di html.it insegnava a fare i layout a 3 colonne ma in quel caso me ne servono 4!

per i position absolute, mi pare di averli usati solo per le immagini tipo gimp,skedit,macbook ecc...

Fabrizio

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

Vai alla lista discussioni
×
×
  • Crea Nuovo...