Front page widget spacing with IE9

To give you an example using the first of the 4 images on the demo site, this is the code you can use then just replace the content part with your own:

<div class="post-thumbnail" style="margin-top:10px; padding:6px;"><img class="center" src="full-path-to-image.jpg" alt="responsive"></div><h3>Fully Responsive</h3><p>Celestial is a fully responsive WordPress theme for you to enjoy viewing your website in your favourite mobile device. I've incorporated the popular Twitter Bootstrap framework to give you more flexibility whether you are on a desktop or an iPhone.</p>

Viewing your front page though in Chrome, your slider is overlapping the content in the page and offset. I’m thinking there’s a piece of code or something that might be breaking the layout somewhere. The hard part is to know where.

Before anything, disable your slider and test the 4 image boxes you have in ie9 and see what happens.

Thank you for your prompt reply. I used the code you provided and simply changed the content. The slider images are 1920 x 350 and the widget images are 260px wide as suggested. I’ve also tried disabling the slider and it did not help. I’m using a child theme and added the following to the css:-
/* social group */
#st-socialbar-wrapper {
height: 0px;
/* Note height was 40px */
}

#st-banner0-wrapper {
height: 220px;
/* Note this section added to set a top margin before front page text*/
}

This achieved what I wanted but, as a beginner, I’m not sure if it’s valid. However, removing the code does not fix the issue and I’ve now run out of ideas.

Sorry for late reply…. I just looked at the demo site for Celestial lite with the 4 columns on the front page and switched the IE11 to ie9 mode and they are still positioned correctly. However, on your site they don’t. There must be something different somewhere with your site or page that these exist on because when I view it in ie9, sure enough they go all over and noticed even the footer bottom area looks broken. But again, the live demo site is fine.

I also noticed though that the rest of your site pages look fine in ie9. It’s your front page that is breaking in IE9 viewing.

You said you disabled the slider, but that little CRM that I see over the slider, is that a separate plugin? Disable that and see what happens.

Solved!! It looks like it was my clumsy attempt to add hyperlinks to the four advanced text widgets. I sorted it out by removing the hyperlinks and adding buttons after the text. Why it only breaks in IE 9 will have to remain a mystery!
Thanks again for your first class support and help in pointing me in the right direction.

That is awesome to hear….as for ie9, this is Internet Explorer, the evil of web designers, haha. I can say though with the recent IE11, they’ve made much better improvements for their browser.