Pieter Heyman
Pieter Heyman

Reputation: 1

Jquery slideToggle IE8 css problem

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

Answers (1)

whyAto8
whyAto8

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

Related Questions