problem with IE8 only

Hi,

I wrote this web page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
 <title>TEST</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <script type="text/javascript" src="jquery-1.4.2.js"></script>
 
 <script type="text/javascript"> 
//<![CDATA[ 
 
// gestion du menu
$(document).ready(function(){
 $("div.blocTab > ul.radbut > li > h5 > a").click(function(e){
 e.preventDefault();
 
 var li = $(this).parent().parent();
 var ul = $(li).parent();
 
 if (!$(li).hasClass("menuActive")){
 
 $(ul).children().each(function(i, li2){
 if ($(li2).hasClass("menuActive")){
 $(li2).removeClass("menuActive");
 $(li2).find("div").hide("normal");
 }
 });
 
 $(li).find("div").show("normal"); 
 $(li).addClass("menuActive");
 }
 });
 $("div.blocTab .radbut:eq(0) h5 a").triggerHandler("click");
}); 
//]]> 
 </script>
 
 <style type="text/css">
.spacer { 
clear: both; 
}
 
div.blocTab{
float:left;
margin:0;
padding:0;
background-color:green;
}
 
 
/* inf a IE7 */
/* pour avoir le layout */
* html div.blocTab ul{
/*zoom:1;*/
width:230px; 
}
 
div.blocTab ul{
min-width:230px; 
}
 
div.blocTab p{
margin:2px 2px 4px 2px;
padding:4px 8px;
text-align:center;
background-color:white;
}
 
div.blocTab h4{
margin:2px 20px 0px 6px;
padding:1px 8px 3px 8px;
 
color:black;
background-color:#ffffff;
text-decoration:underline;
 
border-top: 4px solid red;
}
 
 
div.blocTab ul{
list-style:none;
color:black;
background-color:white;
 
margin:0 2px;
padding:0;
}
 
div.blocTab ul li{
margin:0;
padding:0;
}
 
div.blocTab h5{
margin:0;
padding:0;
border-bottom:2px solid blue;
}
 
div.blocTab h5 a{
display:block;
padding:3px 3px 3px 20px;
margin:0;
 
 
text-decoration:none;
font-weight:bold;
 
background-color:yellow;
color:black;
}
 
div.blocTab h5 a:hover{
display:block;
padding:3px 3px 3px 25px;
margin:0;
background-color:purple;
}
 
div.blocTab ul li div{
margin: 5px 10px 0 10px;
padding: 0 0 10px 0;
line-height: 1.5em;
}
 
 
div.blocTab ul.radbut li div{
 display:none;
} 
 </style>
</head>
 
<body style="min-width: 750px;">
 
 <div class="blocTab">
 <h3>AAAAAAA</h3>
 
 <h4>bbbbbbb</h4>
 
 <ul class="radbut"> <!-- gestion menu radio buton -->
 <li>
 <h5><a href="#">cccc</a></h5>
 
 <div>
 <input type="checkbox" id="P0" checked="checked"/> <label for="P0">iiii</label><br/>
 <input type="checkbox" id="P1" checked="checked"/> <label for="P1">jjjjj</label><br/>
 </div>
 </li>
 
 <li>
 <h5><a href="#">dddd</a></h5>
 
 <div>
 <input type="text" value="uuuuuuuu" size="17" maxlength="17"/>
 </div>
 </li>
 
 <li>
 <h5><a href="#">eeeeeee</a></h5>
 
 <div>
 <select>
 <option value="0">toto</option>
 </select>
 </div>
 </li>
 
 <li>
 <h5><a href="#">oooo</a></h5>
 
 <div>
 <select>
 <option value="0">riri</option>
 </select>
 </div>
 </li> 
 </ul>
 
 <p>
 <input type="button" id="yooo" value="yooo"/>
 </p>
 </div>
 <div class="spacer"></div>
 
</body>
</html>

With IE8 the padding-top property isn't always display correctly for "div.blocTab > ul.radbut > li > div" when I use the jquery function .show() with the parameter "normal". If I use this function without parameter, there isn't the problem.

i.e : With IE6 and IE7 there isn't this problem

Do you know where the problem come from ? Can you help me, please ?

Topic Participants
cmarmonier

problem with IE8 only

problem with IE8 only

Topic Participants

cmarmonier