problema link con text-align

[pieroseko]

salve
ho un box model e si verifica un problema sull'hover del link incrementado il box solo per internet explorer 6

il body

BODY {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    BACKGROUND: url(/images/sfondo.jpg) #458EC3 repeat-x; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 0px auto 32px; 
    WIDTH: 610px; 
    COLOR: #000; 
    PADDING-TOP: 0px;
    text-align:justify;
} 

la parte del box

div#boxmenu
       {
       float:                right;
       width:                190px;
       margin:               0 0 0 0 ;
       padding:              0 0 0 0 ;
       border:               0px;
       background:           white;
       }


div#boxmenu ul
           {
           border:           10px solid white;
           border-top:       0px;
           border-right:     0px solid white;
           padding:          0 0 0 0 ; 
           margin:           0 0 0 0 ; 
           list-style-type:  none;
   }

div#boxmenu li 
             {
             text-decoration:         none;
             font-family:Verdana, Arial, Helvetica, sans-serif;
             font-size:11px;
             padding: 0 0 0 0;
             margin: 0 0 0 0;
                line-height:           136%;
                height:                136% !important;
                height /**/:           0%;    
                         

             }


div#boxmenu li.vocemadre
             {
                color:           white;
                background:      #0b5f9d;
                font-weight:     bold;
                padding:         0 0.5em 0 0.5em;
                border-bottom:   1px solid #808080;

                border-bottom:         1px dotted #808080;
                font-size:12px;
                margin: 0 0 0 0;
                text-align:left;

             }

div#boxmenu a 
       {
       color:                 #0b5f9d;
       text-decoration:       none;
       background:            #ebebeb;
       font-weight:           normal;
       padding:               0 0.5em 0 0.5em;
       display:               block;    
       border-bottom:         1px dotted #808080;
       font-family:Verdana, Arial, Helvetica, sans-serif;
       font-size:11px;
     text-align:left;
     

     }




div#boxmenu li a:visited 
                        {
 
       
       color:                 #0b5f9d;
       text-decoration:       none;
       background:            #ebebeb;
       font-weight:           normal;
       padding:               0 0.5em 0 0.5em;

       border-bottom:         1px dotted #808080;
       font-family:Verdana, Arial, Helvetica, sans-serif;
       font-size:11px; 
      text-align:left;

       
           }            




               
div#boxmenu li a:hover 
                      {
       color:                 #0b5f9d;
       text-decoration:       none;
       background:            #FFFFFF;
       font-weight:           normal;
       padding:               0 0.5em 0 0.5em;
  
       border-bottom:         1px dotted #808080;
       font-family:Verdana, Arial, Helvetica, sans-serif;
       font-size:11px;  
       text-align:left;

} 

solo sul 6 di ie da problemi ... per gli altri tutto ok

se lveo il text-align:justify; al body il testo non è più allineato e il problema non si verifica ma purtroppo tutto deve essere allineato


la parte in html

                <div id="sinistra-testo-rf">
                        <h5>sub-title</h5>
                        <div class="terminatore"></div>                        
                        <div id="boxmenu">
                            <ul class="listasx">
                              <li class="vocemadre">madre[*][url="#"]figlio 1[/url][*][url="#"]figlio 2[/url][*][url="#"]figlio 3[/url]

                            [/list]
                        </div>                            
                        
                        
                        <div id="main-testo-site">
testo testo testo
</div>
</div> 

il mouse sopra i link figlio mi provoca l'espanzione dell'id boxmenu

[Jarno]

ottimo...ma non ho capito dove sta il problema :master: cos'è che non fa? e cos'è che dovrebbe fare?

[pieroseko]

si ie 6 quando c'è il mouseover sui link il box mi si espande con dimensioni maggiori, nelle altre versioni di browser questo non avviene

solo se levo dal css text-align:justify; allora non si verifica

[Jarno]

l'ho testato su IE6

non fa quello che dici, anzi è tutto ok, quindi c'è altro nella pagina che gli dà noia.

cmq se ti può essere d'aiuto tempo fa ho avuto un problema analogo, e me lo faceva IE6 quando con onmouseover modificavo il padding o border o margin solo da un lato

[pieroseko]

inserisco il css

 
BODY {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    BACKGROUND: url(/images/sfondo.jpg) #458EC3 repeat-x; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 0px auto 32px; 
    WIDTH: 610px; 
    COLOR: #000; 
    PADDING-TOP: 0px;
    text-align:justify;
}


div#c-grigio {
    BACKGROUND: #CCCDCD; 
    WIDTH: 610px; 
    padding-bottom:1px;
    padding-top:0px;
}
div#c-celeste {
    BACKGROUND: #D1E4F3; 
    WIDTH: 608px; 
    margin:0px auto;
    padding-bottom:14px;
}

div#c-bianco {
    BACKGROUND: #FFFFFF; 
    WIDTH: 596px; 
    margin:0px auto;
    padding-bottom:7px;
}
 div#c-bianco-just {
    BACKGROUND: #FFFFFF; 
    WIDTH: 596px; 
    margin:0px auto;
    padding-bottom:7px;

}
 
 
div#tuseiqui
   {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   margin:0px auto;
   line-height:        140%;
    font-size:11px;
   text-align:         left;
   border:             0px;
   border-bottom:      1px dotted #808080;
   border-top:         1px solid #808080;

   color:              #004C99;  
   background-color:   #ebebeb;
   width:583px;
   }
 
 
div#header H1 {
     margin:0px auto;
    BACKGROUND: url(/images/banner.jpg) no-repeat 0px 100%; 
    height:72px;
    width:582px;
}

h5 {
    font-size:16px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#005591;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

h3 {
    font-size:14px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#005591;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

h4 {
    font-size:13px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#005591;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}




div#sinistra-testo-rf {
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    float:left;
    width:auto;
    text-align:inherit;

}




div#sinistra-testo a {
    color:#0b5f9d;
}

div#sinistra-testo img {
    padding: 0px 5px 0px 3px;
}





div#main-testo-site a {
    color:#0b5f9d;
    margin: 0 0 0 0;
    padding: 0 0  0 0;
}


div#tuseiqui a {
    color:#0b5f9d;
}


div#sinistra-testo-rf img {
    padding: 0px 5px 0px 3px;
}

.terminatore {
    clear:both;
}





div#footer {
    WIDTH: 583px; 
    margin:0 auto;
     padding-top:5px;
}



div#boxmenu
       {
       float:                right;
       width:                190px;
       margin:               0 0 0 0 ;
       padding:              0 0 0 0 ;
       border:               0px;
       background:           white;
       }


div#boxmenu ul
           {
           border:           10px solid white;
           border-top:       0px;
           border-right:     0px solid white;
           padding:          0 0 0 0 ; 
           margin:           0 0 0 0 ; 
           list-style-type:  none;
   }

div#boxmenu li 
             {
             text-decoration:         none;
             font-family:Verdana, Arial, Helvetica, sans-serif;
             font-size:11px;
             padding: 0 0 0 0;
             margin: 0 0 0 0;
                line-height:           136%;
                height:                136% !important;
                height /**/:           0%;    
                         

             }


div#boxmenu li.vocemadre
             {
                color:           white;
                background:      #0b5f9d;
                font-weight:     bold;
                padding:         0 0.5em 0 0.5em;
                border-bottom:   1px solid #808080;

                border-bottom:         1px dotted #808080;
                font-size:12px;
                margin: 0 0 0 0;
                text-align:left;

             }

div#boxmenu a 
       {
       color:                 #0b5f9d;
       text-decoration:       none;
       background:            #ebebeb;
       font-weight:           normal;
       padding:               0 0.5em 0 0.5em;
       display:               block;    
       border-bottom:         1px dotted #808080;
       font-family:Verdana, Arial, Helvetica, sans-serif;
       font-size:11px;
     text-align:left;
     

     }




div#boxmenu li a:visited 
                        {
 
       
       color:                 #0b5f9d;
       text-decoration:       none;
       background:            #ebebeb;
       font-weight:           normal;
       padding:               0 0.5em 0 0.5em;

       border-bottom:         1px dotted #808080;
       font-family:Verdana, Arial, Helvetica, sans-serif;
       font-size:11px; 
      text-align:left;

       
           }            




               
div#boxmenu li a:hover 
                      {
       color:                 #0b5f9d;
       text-decoration:       none;
       background:            #FFFFFF;
       font-weight:           normal;
       padding:               0 0.5em 0 0.5em;
  
       border-bottom:         1px dotted #808080;
       font-family:Verdana, Arial, Helvetica, sans-serif;
       font-size:11px;  
       text-align:left;

}  
                      
          
            
div#main-testo-site {
    color:#484848;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;    
    text-align:inherit;
}
    
    
div#main-testo-site img
         {
         float:          left;
         padding:        0px;
         border:         0px solid #dddddd;
         margin-top:     0.5em;
         margin-right:   0.5em;
         margin-bottom:  0.5em;
         } 

div#main-testo-site img.destra
         {
         float:          right;
         padding:        0px;
         border:         0px solid #dddddd;
         margin-top:     0.5em;
         margin-left:    0.5em;
         margin-right:   0em;
         margin-bottom:  0.5em;
         } 


div#boxfascia img 
           {
           float:                none;
           margin:               0em;
           padding:              0px;
           border:               0px;
           }    
           
           
table
     { 
     text-align:    left; 
     margin-top:    1em; 
     margin-left:   auto;
     margin-right:  auto;
     margin-bottom: 0.6em;
     border:        1px dotted #808080;
     width:500px;
     }

 
table.avvolta
             { 
             float:        left;
             margin-right: 0.6em;
             }

td
   {
   text-align:        left; 
   font-size:         80% !important;
   font-size /**/:    60%;
   color:             #484848;
   background-color:  #EAF5FF;
   border:            0px;
   padding:           0.3em;
   }
 
 
 th
   {
   text-align:         left;
   font-size:          80% !important;
   font-size /**/:     60%;
   color:              #004C99;
   background-color:   #ebebeb;
   padding:            0.3em;
   } 

[Jarno]

anche questo su IE6 è ok

[pieroseko]

ti passo il listato html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
    <title>Michele</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <link rel="icon" type="image/x-icon" href="/images/icon.ico">
    <link href="/css/michele.css" rel="stylesheet" type="text/css">

    
</head>
<body>


    <div id="c-grigio">
        <div id="c-celeste">
            <div id="c-bianco-just">
                <div id="header" align="center">[url="/index.htm"][img]/images/banner.jpg[/img][/url]</div>
                <div id="tuseiqui">ti trovi in: [url="/"]Michele[/url] » Michele fu</div>
                <div class="terminatore"></div>        
                <div id="sinistra-testo-rf">
                        <div class="terminatore"></div>    

<div id="boxmenu">

<ul class="listasx">
  <li class="vocemadre">prova uno group sub 1[*][url="#"]link 1[/url][*][url="#"]link 2[/url][*][url="#"]link 3[/url]

  <li class="vocemadre">prova uno group sub 2[*][url="#"]link 1[/url][*][url="#"]link 2[/url][*][url="#"]link 3[/url]
[/list]
</div>

            


                        <div id="main-testo-site">

                          <h5>sub-title bla bla bla</h5>
                          

bla bla blabla bla blabla bla blabla 
bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla 
bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla 
bla blabla bla blabla bla blabla 
bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla 
bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla 
bla blabla bla blabla bla blabla 
bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla 
bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla 
bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla 
blabla bla blabla bla blabla bla blabla bla bla</p>

</div>
                        
                        <div class="terminatore"></div>
              </div>
                <div id="footer">[img]/images/footer.jpg[/img]</div>
                <div class="terminatore"></div>
            </div>
        </div>
    </div>
</body>
</html> 

[Jarno]

WinXp + IE6 e FF2

funziona alla perfezione