Archived

This topic is now archived and is closed to further replies.

  • 0

Browser Specific Css Plugin Not Working?


Question

Posted · Report post

Hi there

 

I'm using the Browser Specific CSS plugin to fix a whole range of issues in IE7.

 

The first issue I want to fix is the width. It's a responsive site, but the maximum width doesn't work in IE7 so everything becomes stretched. I want to add a fixed width to the site for IE7 users, so I've added:

 

body.ie7{width:924px}

It works for a split second, then jumps back to full width.

 

I've tried adding !important, but it just does the same.

 

I've tried different CSS like changing text alignment and, again, it changes briefly, but jumps back as if something else is overwriting the CSS.

 

I'm using a child theme and adding the CSS into the style.css, rather than custom code.

 

http://ultragraphics.skitti.sh

 

Thanks in advance

 

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

I'm unsure how to explain this, but I don't think you can mix responsive and non-responsive elements in the same site, particularly with global things like body width.

 

I'd suggest making the px width a percentage. Of course, that's not fixed, but if that's the problem, at least testing it will determine if I'm wrong or right.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob - you say "you can mix responsive and non-responsive elements in the same site", but in the site options, you can have a responsive site with a pixel width - that's what I have in all browsers from IE8 upwards.

 

I've tried changing the pixel width to a percentage and it made no difference to how the site appears in IE7.

 

I've tried changing the site to a fixed width layout under site options, but it doesn't fix the width in IE7.

 

I've checked the Google compatibility script checkbox too, but that did nothing.

 

I tried a separate stylesheet with conditional comments for IE7, but that didn't work either.

 

I've run out of ideas now.

 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I do have access to Internet Explorer but can you try this please.

body.ie7 .content {
max-width: 800px;
}

 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny,

 

Thanks for your reply.

 

Tried it, and it's pretty much the same, it'll set the width to 800px for a split second then jump back out. There's obviously something overriding it later in the code/css.

Share this post


Link to post
Share on other sites

Posted · Report post

Can you try disabling all non-PageLines plugins and see if this resolves the issue.

 

If this doesn't can you use Jing (free application) and record the issue please.

Share this post


Link to post
Share on other sites

Posted · Report post

HI Danny

 

I only have the browser specific CSS plugin installed. If I switch this off, it obviously looses the 'ie7' class so the style doesn't work at all.

 

I've taken a screencast of what happens with the plugin, but can't upload video files here, so it's on my website as a .avi file http://skitti.sh/wp-content/uploads/2012/12/IE7-screen.avi

 

It starts as IE9 - how the website should look - then changes to compatibility view when it looses its background colour. You should see the width jump from 800 wide to full width

 

I've checked its definitely IE7 and not just the compatibility view version on an old machine I have - the same result.

Share this post


Link to post
Share on other sites