Question

I am building a website and have a content area with boxes in to display company services. In my nav bar I have a button called “Contact”. Once Contacted has been clicked the content area is hidden and the contact div is shown. This works in Chrome and FF, but IE it’s a big mess up. Below is some code.

HTML code for the Contact area:

<div class="contact"> 
                    <h2>Contact Us</h2> 
                    <p>For emergencies or to arrange a quote, call <span style="font-weight:bold; color:red;">999</span>. Or use the form below and we'll get back to you shortly.</p> 
                    <form class="tab"> 
                    <label for="move">Your Name:</label> 
                    <input type="text" name="move"  class="move" /><br /> 
                    <label for="locate">Your Email:</label> 
                    <input type="text" name="locate" class="locate" /><br /> >  
                    <label for="contact">&nbsp;</label> 
                    <a href='#contact' class='contact-submit'>Send!</a><a href="#" class="prepend-1 contact-close">Cancel</a><br /> 
                    </form> 
                </div>

HTML Code for the Content area:

<div class="content"> 
                <div class="span-24 last"> 
                <p></p> 
                </div> 
                <div class="span-6 append-1"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra malesuada orci et lacinia. Ut ac augue diam. Fusce vitae felis velit, vitae vulputate libero. Pellentesque in nibh est, tincidunt ullamcorper dolor. Etiam condimentum semper sem a mollis. Cras faucibus, neque vitae egestas imperdiet, tellus lorem rutrum massa, eget ultrices libero purus quis mi. Aliquam erat volutpat. Donec non metus id sapien pulvinar consequat. Praesent ut lectus massa, id viverra orci. In hac habitasse platea dictumst.</p> 
                </div> <!-- END span-6 DIV --> 
                <div class="span-15 append-2 last prepend-bottom box2" style="overflow:hidden;"> 
                    <p>Cras viverra placerat luctus. Cras eu elit sit amet lectus pretium egestas id a est. Mauris pretium lacus non eros dapibus at tempus leo condimentum. Quisque a elit non massa mattis pretium vitae eu est. Curabitur vulputate iaculis tellus tincidunt bibendum. Aliquam erat volutpat. Aenean nec viverra augue. Duis ultrices velit sed sapien suscipit eget dictum dolor feugiat. Aliquam erat volutpat. Nulla cursus dolor ut turpis congue sollicitudin. In hac habitasse platea dictumst. Duis facilisis malesuada magna, sed porttitor tortor posuere sed.</p> 
                </div> <!-- END span-6 DIV --> 

                <div class="prepend-3 boxes prepend-top"> 

                    <div class="clearfix row"> 

                        <div class="module compact clearfix"> 
                          <h4><a href="electrical/">Electrical</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/electrical-image1.jpg" alt="" > 

                            <p>We also offer electrical installations and maintenance for both commercial and domestic.</p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 
                        <div class="module compact clearfix"> 
                          <h4><a href="plumbing/">Plumbing</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/plumbing-image1.jpg" alt="Property Maintenance and Refurbishment" > 

                            <p>We offer plumbing for the commercial industry, no matter if it's big or a small job.<br /></p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 

                        <div class="module compact clearfix"> 
                          <h4><a href="security/">Security</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/security-image1.jpg" alt="Security" > 

                            <p>Security is key, that's why we are experts in the security field.</p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 
                    </div><!-- END clearfix row --> 
                </div><!-- END prepend-3 DIV --> 
            </div><!-- END content DIV --> 

jQuery Code:

$('a.contact-close').click(function(){//If cancel has been clicked, show original content.

    $('div.contact').hide('slow', function(){


            $('div.content').show('slow', function(){
                $('div.boxes').show('slow').delay(700);
            });//END div.content show-slow

        });
    });

        //Below is the contact script
        $('div.contact').hide();//Hide div

        $('div.nav a.contact').click(function(){//If Contact has been clicked show Contact div
            $('div.boxes').hide('slow', function(){
                $('div.content').hide('slow', function(){
                    $('div.contact').show('slow');

                });
            });//END Boxes hide
        });

And the CSS for this is on jsFiddle:
http://jsfiddle.net/hart1994/Nh9tP/

In Internet Explorer it jumps the boxes about whilst in the hiding process. Then when re-shown, it misplaces them in rows of two not three. See website link below for full demonstration.

You may need to rebuild this as it may not show in jsFiddle.

Or you can take a look at:
http://molossi.psm2.co.uk/

I have already tried changing the jQuery to slideDown/Up and fadeOut/In.

Thanks in advance!

Answer 1

The jQuery hide() and show() methods “animate the width, height, and opacity of the matched elements simultaneously” so as the height and width change, the browser is re-flowing the document. Browsers do re-flow very differently and in IE this is making the boxes jump. You may want to use a custom jQuery animate() – perhaps just the height? It is the decreasing width that is causing the floated elements to re-flow.

The broken layout after selecting the “Cancel” link is caused by jQuery leaving style on the <div class="boxes"> after the animation. This is causing the boxes div to not clear the paragraph on the left correctly and therefore have less width and therefore cannot fit 3 child elements on a row. You can remove these extra styles jQuery leaves by hooking into the callback on the final show() method like so:

$('div.boxes').show('slow', function() {
    $(this).attr('style', '');
}).delay(700);    

Just to note also, that it probably doesn’t help that IE will be running in quirks mode. Your page does not have a doctype which in my experience can lead to unwanted and unexpected rendering issues (particularly in IE). Apart from the missing doctype there are a couple of other minor issues that are causing you page to not validate.

Hope this is useful 🙂