soliti problemi con IE

[nickmadison]

ho realizzato un sito molto semplice in xhtml strict:
http://www.3zone.it/site_bitrevi/
testato su firefox.

controllandolo con quello pseudo-browser di IE rilevo che :
- tra la testata ed il corpo pagina è presente un equivalente spazio bianco (che nei browser seri non appare).
- il rollover sul menu non funziona (per realizzare il menu ho seguito per filo e segno la guida di htmlpro.it).
- il bordo delle miniature su "prodotti" non appare.

consigli su come risolvere questi problemi?

[jesus]

Allora

intanto ti ho risolto il punto 1 che mi sembrava il più grave. Basta aggiungere overflow:hidden al div #header:

#header {
  position: relative;
  width: 650px;
  height: 147px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

Per gli altri ci sto lavorando.

[jesus]

Ho risolto anche il punto 3, quello del bordo dei prodotti.

Per cominciare, nel CSS, agli elementi .i1, .i2, .i3, .i4 sostituisci display: block con display: inline (per ovviare ad un problema di posizionamento con IE).

Poi sostituisci le definizioni di products a e products a:hover con questo:

.products a {
  float: left;
  border-bottom: 2px solid #999;
  width: 105px;
  height: 105px;
  padding-bottom: 3px;
}
.products a:hover {
  border-bottom: 2px solid #036;
  width: 105px;
  height: 105px;
}

Mi manca solo il secondo punto che sto ancora studiando.

Ciao.

[nickmadison]

grazie per l' aiuto, è più di qualche mese vhe non facevo un sito in xhtml e alcune cose le ho scordate
ho aggiornato il css.

[jesus]

Scusami per aiutarti sul menu mi servirebbe avere il link della pagina di pro.html della guida che hai utilizzato.

Ciao.

[nickmadison]

ho utilizzato questa tecnica:
http://pro.html.it/articoli/id_453/i...pag_1/pag.html
tra l' altro è la prima volta che la metto in pratica, per siti precedenti ho sempre usato il "background che slitta".
grazie ancora.

[pugia]

prova a togliere il transparent da qui:

li#n1 {
	background: url("../images/n_enterprise_h.gif") no-repeat 0 0;
}
li#n2 {
	background: url("../images/n_products_h.gif") no-repeat 0 0;
}
li#n3 {
	background: url("../images/n_details_h.gif") no-repeat 0 0;
}
li#n4 {
	background: url("../images/n_contacts_h.gif") no-repeat 0 0;
}

[nickmadison]

non funziona ancora
aspetto un po poi riconverto il menu con la tecnica dello sfondo che scorre (anche se preferirei non usarlo per la questione delle eventuali immagini disabilitate).

mi sono appena accorto poi che su IE x Mac il menu e la scritta sotto non appare proprio , forse dovrei rifare il posizionamento dei 2 div che li contengono, oppure sarebbe meglio una bella scrita mirata: "cambiate quel cesso di IE!"

[jesus]

Originariamente inviato da nickmadison
non funziona ancora
aspetto un po poi riconverto il menu con la tecnica dello sfondo che scorre (anche se preferirei non usarlo per la questione delle eventuali immagini disabilitate).

Questa cosa è davvero strana... ora sto studiando passo passo il tuo css confrontandolo con quello dell'articolo... ti faccio sapere cosa scopro.

Ciao.

[jesus]

Ho trovato la soluzione. Devi togliere line-height: 1px dai selettori #navigation li e #navigation a e lasciarlo solo su #navigation a:hover.

Ciao.