Help differenza di layout tra IE e Moz

**cirisiamo** · 27-06-2008, 10:22

Ciao, ho un problema sulla visualizzazione di questo html.
Su IE è quasi ok, su mozilla no. In pratica con mozilla la barra del menu esce fuori dal contenitore e non ha lo sfondo.
Mi date una mano?

la pagina potete visualizzarla qui www.petitto.it/prova

Questo è il codice HTML:

Codice 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" xml:lang="it-it" lang="it-it" dir="ltr">

<head>

    <Title>Prova</Title>

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="riquadro">

        <div id="top">TOP</div>

  <div class="topmenu">

      <div class="itemmenu" >[url="#"]Link1[/url]</div>

        <div class="itemmenu" >[url="#"]Link2[/url]</div>

        <div class="itemmenu" >[url="#"]Link3[/url]</div>

        <div class="itemmenu" >[url="#"]Link4[/url]</div>

        <div class="itemmenu" >[url="#"]Link5[/url]</div>

        <div class="itemmenu" >[url="#"]Link6[/url]</div>

        <div class="itemmenu" >[url="#"]Link7[/url]</div>

        <div class="itemmenu" >[url="#"]Link8[/url]</div>

        <div class="itemmenu itemmenuultimo" >[url="#"]Home[/url]</div>

  </div>

</div>

</body>

</html>

e questo è il foglio di stile

Codice PHP:


html, body         {

            background-color:#FFFFFF; 

            margin:0px; padding:0px; border:0px; 

            font-family:arial,verdana; font-size:11px; color:#000000;

            text-align: left !important;

            text-align /**/: center;

}





#riquadro {

    padding: 10px;

    background: #A9BBD3;

    text-align: left;

    margin: 0 auto;

    width: 760px; 

    border:1px solid;

}        



#top {

    padding: 0px 0px 0px 0px;

    background: #BACAB9;

    width: 744px; 

    height:100px;

    border:1px solid;

    

}        



        

.topmenu{

        border-top :1px solid #A9BBD3;

        border-bottom :2px solid #A9BBD3;

        width:744px;

        background: #B4D9FE;

        text-align: center;

}        

        

div.itemmenu { 

        width:70px;

        float:left;

        padding-left: 5px;

        padding-right: 5px;

        padding-top: 10px;

        padding-bottom: 10px;

        border-right: solid 2px #FFFFFF;        

}





div.itemmenuultimo { 

        border-right: 0;        

}



a.itemmenu { 

        font-weight:bold; 

        text-decoration: none;                  

}

**blekm** · 27-06-2008, 10:28

hai lo stesso problema su Opera e Safari.

Vedi di farlo funzionare su Firefox (e molto probabilmente ti funzionerà anche su Safari e Opera) e poi passa a ottimizzare su IE7 (e non dimentarti il 6, li si che ti diverti

)

**Tux7000** · 27-06-2008, 10:35

E' un problema di clearing dei float. Fai in questo modo:
Nel codice HTML:

codice:

<div class="topmenu">
<div class="itemmenu" >Link1</div>
<div class="itemmenu" >Link2</div>
<div class="itemmenu" >Link3</div>
<div class="itemmenu" >Link4</div>
<div class="itemmenu" >Link5</div>
<div class="itemmenu" >Link6</div>
<div class="itemmenu" >Link7</div>
<div class="itemmenu" >Link8</div>
<div class="itemmenu itemmenuultimo" >Home</div>
<br class="clear" /></div>

Nel CSS aggiungi:

codice:

.clear {clear:both;}

Ciao.

**cirisiamo** · 27-06-2008, 10:48

@Tux7000 Sei un grande!!!!, funziona.

Se posso approfittare ancora un attimo...
il riquadro esterno è definito con un padding di 10px, ma in visualizzazione, sia su IE che su MOZ il padding di destra risulta maggiore e diverso dagli altri 3 lati. sai dirmi il perchè?

**Tux7000** · 27-06-2008, 10:54

il riquadro esterno è definito con un padding di 10px, ma in visualizzazione, sia su IE che su MOZ il padding di destra risulta maggiore e diverso dagli altri 3 lati. sai dirmi il perchè?

Per il semplice motivo che il div#riquadro ha una larghezza di 760px ed il div#top ha una larghezza di 744px, per questo motivo hai più spazio da una parte.

Soluzione:
Elimina la larghezza definita dai div#top e dal div.topmenu

Ciao!

**cirisiamo** · 27-06-2008, 11:28

che incubo, adesso sistemato il padding, si verifica un problema diverso su Explorer.... lo sfondo del menù è a meta.

fra un pò mollo!!!!

Discussione: Help differenza di layout tra IE e Moz

Strumenti discussione

Ricerca discussione

Visualizza

Help differenza di layout tra IE e Moz

Permessi di invio