Ask your WordPress questions! Pay money and get answers fast! (more info)

Troubleshooting in IE 9/10 WordPress

Hello!

I'm working on a site that displays fine in FF and Safari, but not in IE 9/10 -- according to Adobe Browser Labs.

http://www.distinctiveproperty.net

In IE, the address is in the header is misaligned, the slider is cut off on the right, and the third blue box drops to the next line.

I'm working on Genesis. Can anyone help troubleshoot in IE?

Thanks!

Answers (2)

2013-03-12

Jamie answers:

I don't see any problems. You will have to post an image or something.

2013-03-12

WisdmLabs answers:

Hello ohlivia13,

The problem doesn't only exist with IE 9/10, this will also appear in Chrome or FF, if tested in Adobe BrowserLab or on a desktop browser, with browser window re-sized to smaller width.

This is essentially happening because of the Media Queries used in style.css for "Theme Name: Ruby Red for Distinctive Properties".
You could check different media queries written on line 1265 of the above mentioned style.css

INFO: The theme is using responsive nature (widths calculated in percentages), to be visible on different viewports (desktop, mobile, tablet). Therefore it adjusts its view according to the screen size (browser width).
Some of your elements are using the classes defined in above mentioned style.css, while others are not.

Your Problem:
1. The header address is misaligned
<strong>Sol: </strong> #header .widget-area has width in percentage, try keeping it in pixels, if you don't require it to be responsive or set its width in different viewports to different percentage, to make it visible on all viewports.

2. The slider is cut off on right
<strong>Sol:</strong> As described earlier, some of your elements use the classes from style.css which have responsive nature, while some don't. Your slider is one of them. Either write a different css, using media queries or give it fixed pixels, if you don't want it to be responsive.

3. Third blue box drops on next line
<strong>Sol:</strong> This is because of the #wrap, which is set to different width on smaller viewports (mobile and table). You could check line "@media only screen and (max-width: 768px)", which is setting #wrap to 100%. Try giving it a fixed width in pixels if you don't want it to be responsive, or adjust in percentage on different viewports.

If you are unable to edit or need help for the above solution, you need to PM me access details of your website.


ohlivia13 comments:

Okay! I think this makes sense. I'm going to go try that and see if it helps.

Thank you!