problemi layout pagina

**ermes07** · 25-08-2007, 16:41

Salve a tutti,
premetto che sono un neofita nel campo dei css e dell'html ma armato di buona volontà sto cercando di creare il mio primo sito web.
Per impostare il layout delle pagine ho fatto ricorso alla creazione di un foglio css tuttavia il layout della pagina appare in maniera diversa a secondo che apra la pagina con i browser firefox 2.0, explorer 7 ed opera 9.21.
In firefox la scritta “il mio web site” appare più in basso di come l'ho impostata, tutto bene invece in explorer e opera.
Per quanto riguarda i bordi dei pulsanti tutto bene in firefox, mentre in explorer il bordo del pulsante “home” è nero invece di grigio come impostato ed in opera scompare il bordo blu dei pulsanti “curriculum vitae” “pubblicazioni” “links”.
È possibile correggere tale inconveniente e impostare il layout in maniera univoca per tutti browser ? E se si come fare?
Vi sarei molto grato se poteste aiutarmi.
Ciao.

**Myaku** · 26-08-2007, 09:42

senza codice non possiamo darti una mano. Nel frattempo, quello che ti posso suggerire è innanzitutto di validare il tuo codice (il fatto che FF e Opera vedano il layout in maniera diversa mi fa pensare che potrebbero esserci degli errori sull'html o il css). Quindi, verifica che il layout funzioni bene sui browser "standard", e poi correggi i bug di Explorer tramite i commenti condizionali (ti sconsiglio però di usare l'espressione "if IE 6")

Cyà

**ermes07** · 26-08-2007, 13:11

vi posto il foglio html e il css.
------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>default</title><meta content="ermes07" name="author">
<link rel="stylesheet" type="text/css" href="style/style.css">

</head>

<body style="direction: ltr;">

[img]img/button1.gif[/img]

<a href="it/curriculum_it.htm">
[img]img/button2.gif[/img]
</a>

<a href="it/pubblicazioni_it.htm">
[img]img/button3.gif[/img]
</a>

<a href="it/pubblicazioni_it.htm">
[img]img/button4.gif[/img]
</a>

[img]img/flag_italy.png[/img]

[img]img/flag_great_britain.png[/img]

[img]img/flag_france.png[/img]

<p id="heading"> il mio web site </p>

</body></html>

------------------------------------------------------------------------------------------

body {background: #99c3f8 url('../img/logo.gif') no-repeat fixed top left;}

h1 {font-family: arial, verdana, sans-serif;font-weight: bold;font-size: 20px;text-decoration: underline;}
h2 {font-family: arial, verdana, sans-serif;font-weight: bold;font-size: 18px;}
h3 {font-family: arial, verdana, sans-serif;font-weight: bold;font-size: 16px;}
h4 {font-family: arial, verdana, sans-serif;font-weight: bold;font-size: 14px;}
p {font-family: arial, verdana, sans-serif;}

#button1 {
position:absolute;
border-width: 20px;
top: 312px;
left: 58px;}
#button2 {
position:absolute;
border-width: 7px;
top: 369px;
left: 58px;}
#button3 {
position:absolute;
border-width: 7px;
top: 426px;
left: 58px;}
#button4 {
position:absolute;
border-width: 7px;
top: 483px;
left: 58px;}
#flag1 {
position:absolute;
top: 16px;
left: 696px;}
#flag2 {
position:absolute;
top: 16px;
left: 741px;}
#flag3 {
position:absolute;
top: 16px;
left: 786px;}

#heading {position: absolute; left: 423px; top: 100px; font-family: French Script MT; font-size: 100px;}

a:link {color: blue;}

a:visited {color: red;}

Discussione: problemi layout pagina

Strumenti discussione

Ricerca discussione

Visualizza

problemi layout pagina

Permessi di invio