Browser Compatibility Issues - Help Needed

[elatorre]

Hi -

I developed my site in IE9 and it looks fine there. In IE8, it renders the text very large, which causes the navigation bar to push my search box onto a new line. But the big problems occur when I view the site in compatibility mode, which is the same as IE7, as I understand it. When I do this, the navigation bar jumps up and obscures the middle portion of my header.

In Mozilla, only half the slider shows up, leaving half the slider box blank. The hot-linked ellipsis is missing.

In Chrome, the entire slider appears, but as in Mozilla, the ellipsis is missing.

Basically, the site looks like crap in anything other than IE8 or IE9.

How do I ensure that my site design is compatible with browsers other than IE9?

http://florida-homeschooling.org

Thank you.

[sayontan]

when I view the site in compatibility mode, which is the same as IE7, as I understand it.

They are very different, actually.

When I do this, the navigation bar jumps up and obscures the middle portion of my header.

In the header section set the height of the header to something larger than what you have at present.

In Mozilla, only half the slider shows up, leaving half the slider box blank. The hot-linked ellipsis is missing.

You have set the height of your slider to 100px, so obviously you are losing content.

[elatorre]

You have set the height of your slider to 100px, so obviously you are losing content.

I set it to 100px because, otherwise, it picks up the icons from my "socialable" plugin (Facebook like, Tweet, etc.), which looks weird. It does this even if I associate a fatured image with the post. Is there a way to turn off images in the slider?

As for the compatibilioty view issue, it doesn't matter how tall I set the header for. Clicking on compatibility view makes the navigation bar jump to the middle of the header.

Thanks.

[sayontan]

You can hide Sociable icons using:

Code: Select all

.sliderImage .sociable { display: none; }