differenza explorer e firefox

**i_am_antipop** · 27-05-2005, 17:23

scusate la lunghezza, ma sono i primi esperimenti xhtml + css...

questo codice viene visualizzato come vorrei da Explorer, ma non da Firefox...

nell'immagine vedete le differenze.

Cosa sbaglio?

grazie

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

body {
text-align:center;
}

h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }

#contenitore {
text-align:left;
width: 80%;
margin:0 auto;
}
#sx {
float:left;
width: 30%;
height: 100px;
background: #ccffcc;
}
#dx {
margin-left: 30%;
background: #00ccff;
}

#sx2 {
float:left;
width: 30%;
height: 100px;
background: #ccffcc;
}

#dx2 {
margin-left: 30%;
background: #00ccff;
}

#testo {
text-align:left;
width: 100%;
height: 100px;
margin:0 auto;
background: #666fcc;
}

div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}

div#navigation{background: #666fcc;}
div#navigation{padding-top: 00px}
div#navigation ul{list-style-type: none;margin: 0;padding: 0}
div#navigation li{float: left;margin: 0;padding:0}
div#navigation a{display:block}
div#navigation a:hover{line-height: 1px; /*serve per IE*/}
div#navigation a:hover img{visibility: hidden}
div#navigation a#current:hover img{visibility: visible}
li#one{background: url("homehover.jpg") no-repeat top left}
li#two{background: url("graficahover.jpg") no-repeat top left}
li#three{background: url("webdesignhover.jpg") no-repeat top left}
li#four{background: url("phphover.jpg") no-repeat top left}

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="contenitore">
<div id="sx">
<h1>LOGO</h1>
</div>
<div id="dx"> <h1>menu</h1>
<div id="navigation">
<ul>
<li id="one">[img]home.jpg[/img]
<li id="two">[img]graficaattivo.jpg[/img]
<li id="three">[img]webdesign.jpg[/img]
<li id="four">[img]php.jpg[/img]
[/list]
</div>
</div>

<div id="sx2">

</div>
<div id="dx2">
<div id="testo" class="scroll"> <h1>testo</h1>
ciaoooo ooa ooa o... etc..
</div>
</div>

</div>
</body>
</html>

**pierofix** · 27-05-2005, 17:34

Adesso io sono troppo stanco per mettermi ad analizzare il codice, quindi non arrabbiarti ma spero ci sia qualcuno più volenteroso, comunque è arrivata l'ora che tu conosca la verità...

E' Firefox quello che visualizza giusto, non IE. Una delle cose più fastidiose che IE abbia portato è la scorretta interpretazione del box model: per parecchi anni i progettisti hanno creato le impaginazioni seguendo il box model errato, e oggi questo è motivo di grossa confusione.

Inoltre, dal position al float, dal clear a che so io, IE gestisce tutto in maniera rincog*ionita.

Inoltre non supporta molti degli utilissimi selettori di css, come ad esempio questo, in grado di selezionare tutti i tag input che siano di tipo text, senza usare classi o altri appesantimenti:

codice:

input[type="text"] {
   /* proprieta' */
}

**i_am_antipop** · 30-05-2005, 08:59

grazie del chiarimento, quindi è il solito explorer del piffer
o...

ora posso chiederti però cosa devo sistemare nel mio codice per ottenere correttamente la struttura che vedo con explorer?

grazie

PS: cos'è il box model?

Discussione: differenza explorer e firefox

Strumenti discussione

Ricerca discussione

Visualizza

differenza explorer e firefox

Permessi di invio