IE issues with CSS

• 

  ifdc1974 · Member · Apr 22, 2015 at 8:42 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am having trouble with a specific are of this page in IE.

  http://ifdc.org/nitrogen-fertilizer-production-technology-with-ifa/

  If you look at this page and scroll down to where it says Methodology in IE it is correct. But then if you look this page

  https://ifdcorg.wordpress.com/linking-farmers-to-markets/?preview=true&preview_id=5341&preview_nonce=50782963e8

  in IE. The Methodology is trying to wrap. I have tried a bunch of fixes but I can’t seem to get anything to work. Please advise.

  Thank you.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 22, 2015 at 10:01 pm

  • Copy link

  Hi, you currently have a width of 30% in .trainingtxt and that is what is causing your issue. I would suggest increasing that number until the issue goes away, or what would actually be better with a max-width would be to set it in pixels. I would suggest 320px as that is the size of normal smart phones.

• 

  ifdc1974 · Member · Apr 23, 2015 at 2:12 pm

  • Copy link

  Thanks! But I want the width to be wider than 320px on a regular desktop. So how can I accomplish that? I’ve put the width to 320px for now but I really need it at like 600px for all desktop browsers.

• 

  thesacredpath · Member · Apr 27, 2015 at 1:58 am

  • Copy link

  Hi, did you get this sorted out? I’m not seeing the issue anymore on your site.

• 

  ifdc1974 · Member · Apr 27, 2015 at 1:26 pm

  • Copy link

  I changed the max width to pixels but I still want the width to be wider than it is. That is the highest I can go and still make it work for Firefox an IE. If I change it in Firefox to make it wider, it will not reflect the same in IE. Do you have a solution for that?

• 

  thesacredpath · Member · Apr 28, 2015 at 7:11 pm

  • Copy link

  You can set it to 600px if you wish, or even wider. We are setting a maximum width, so it will adjust for narrower screens/windows.

• 

  ifdc1974 · Member · Apr 29, 2015 at 2:26 pm

  • Copy link

  It is still not working correctly when I set to max width: 600 px. I have left it at 600px for you to check on IE. Can you look for me and see what the issue is?

  Thanks.

• 

  thesacredpath · Member · Apr 29, 2015 at 5:22 pm

  • Copy link

  I’m sorry, add also a width declaration at 90% so your rule looks like this:

  .trainingtxt {
      margin: 0 auto;
      max-width: 600px;
      text-align: center;
      width: 90%;
  }

• 

  ifdc1974 · Member · Apr 29, 2015 at 5:38 pm

  • Copy link

  It’s still not working in IE

• 

  thesacredpath · Member · Apr 30, 2015 at 9:05 pm

  • Copy link

  What version if IE are you having issues with?

• 

  ifdc1974 · Member · Apr 30, 2015 at 9:08 pm

  • Copy link

  The latest…IE 11. I put it back to 300 px because our site is live and didn’t want something misaligned. The correct and desired width is 600 px but doesn’t look right in IE.

• 

  thesacredpath · Member · Apr 30, 2015 at 9:26 pm

  • Copy link

  You’ve got two rules going on here. This main rule, which affects things greater than 1200px:

  .trainingtxt {
      margin: 0 auto;
      max-width: 300px;
      text-align: center;
      width: 90%;
  }

  and this rule that uses a Media Query to affect things 1200px and narrower.

  @media screen and (max-width: 1200px) {
  .trainingtxt {
      float: none;
      text-align: center;
      width: 400px;
  }
  }

  Replace those two with this and see if this fixes the issue.

  .trainingtxt {
      margin: 0 auto;
      max-width: 100%;
      text-align: center;
      width: 90%;
  }
  @media screen and (max-width: 1200px) {
  .trainingtxt {
      float: none;
      text-align: center;
      width: 90%;
  }
  }

  I’m having problems with IE11 in my virtual machine right now and can’t inspect elements and make changes to the CSS.

• 

  ifdc1974 · Member · Apr 30, 2015 at 9:37 pm

  • Copy link

  Ok. I tried this and it is pulling the text up and out to the corner making it even with About the Training and my columntwenty div.

  I put it back to how I had it for now. Hopefully we can find a fix for this.

  Oh how I love IE!!!

• 

  thesacredpath · Member · May 5, 2015 at 7:59 pm

  • Copy link

  You need to sort out and combine or delete these two rules in your CSS. There shouldn’t be two rules doing basically the same thing. Remove one of them and then make the changes on the other.

  .trainingtxt {
      margin: 0 auto;
      max-width: 320px;
      text-align: center;
  }
  
  .trainingtxt {
      margin: 0 auto;
      max-width: 300px;
      text-align: center;
      width: 90%;
  }

  You also have the following Media Query that is affecting things. The below rule in your CSS makes the Methodology section 400px wide on 1200px and narrower screens/windows, which overrides the one above below 1200px width. I would remove the following rule and then go with the max-width of 600 and width of 90% in the one above.

  @media screen and (max-width: 1200px) {
  .trainingtxt {
      float: none;
      text-align: center;
      width: 400px;
  }
  }

  I think the above is confusing IE and causing the issues. Also, what version of IE are you seeing the issues on?