Reputation: 1
I have a problem with the following: I want my div's to become visible or disappear using jquery "slideToggle" (I'm using jquery-1.2.6.min.js). This works! However, I have a problem with css "IE 8". Sometimes my "title divs (things with black background)" stick together. But not always they stick together
my example http://www.enfin-kortrijk.be/V5/
Is there anybody who can help me? or can anybody tell what is different in IE8 then in other IE browsers?
this is my jquery code:
$(document).ready(function(){
$("div.tekst1").toggle();
$("div.tekst2").toggle();
$("div.tekst3").toggle();
$("div#titel1").click(function(event){
$("div.tekst1").slideToggle('slow');
if ( $("div.tekst2").is(':visible') ) {
$("div.tekst2").slideToggle('1500');
}
if ( $("div.tekst3").is(':visible') ) {
$("div.tekst3").slideToggle('1500');
}
});
$("div#titel2").click(function(event){
$("div.tekst2").slideToggle('slow');
if ( $("div.tekst1").is(':visible') ) {
$("div.tekst1").slideToggle('1500');
}
if ( $("div.tekst3").is(':visible') ) {
$("div.tekst3").slideToggle('1500');
}
});
$("div#titel3").click(function(event){
$("div.tekst3").slideToggle('slow');
if ( $("div.tekst1").is(':visible') ) {
$("div.tekst1").slideToggle('1500');
}
if ( $("div.tekst2").is(':visible') ) {
$("div.tekst2").slideToggle('1500');
}
});
});
this is my css:
.item{
width:200px;
font-size:12px;
font-family:arial;
margin-bottom:10px;
}
#titel1, #titel2, #titel3{
background-color:#000;
text-transform:uppercase;
color:#fff;
cursor:pointer;
margin-bottom:5px;
margin-top:5px;
}
.titel1{
margin-top:0px;
}
.tekst1, .tekst2, .tekst3{
margin:0px;
}
Upvotes: 0
Views: 2434
Reputation: 1670
I guess you are talking about the problem as mentioned here : slideToggle causes margin to disappear in IE8
just giving overflow:hidden to the divs where margin is disappearing would solve it. please check..
Upvotes: 2