IE Only - Design Breaks in Modx | MODX Community Forums

10 Posts

redball Reply #1, 14 years, 9 months ago

We have just finished creating a basic template for a company:
http://globalpmcorp.com/tmp/testing/testing.html (It looks identical in IE & FF)

We installed Modx & created a template with the exact same HTML (I've recreated it multiple times just to be certain) http://training.globalpmcorp.com/index.php?id=7

It looks exactly the same in FF but why would IE render the page differently? Its the exact same code.

Any help would be greatly appreciated. [ed. note: redball last edited this post 14 years, 9 months ago.]

156 Posts

smooth-graphics Reply #2, 14 years, 9 months ago

Please use the HTML base href tag to get a proper output from MODX.

10 Posts

redball Reply #3, 14 years, 9 months ago

I have added the base href
http://training.globalpmcorp.com/ - Still the same output in IE

387 Posts

whistlemaker Reply #4, 14 years, 9 months ago

Edit:
I tried including the code but for some reason it put anchor tags around the url in the base tag!

My observation was that your doc is xhtml strict and your base tag ends

.com">

it should end

.com" />

My browser is also showing a <base immediately following the base tag

And both pages look identical in Safari 5 on Mac OS10.7

Old:
I see in the head:

Your doc is xhtml strict so you need:

[ed. note: whistlemaker last edited this post 14 years, 9 months ago.]

10 Posts

redball Reply #5, 14 years, 9 months ago

I've updated the code. Unfortunately no changes in IE.

701 Posts

bennyb Reply #6, 14 years, 9 months ago

Seems to only be a problem with IE9, so I suspect it's to do with the behaviour property within the css for the rounded corners. I'm guessing whats happening is IE9 is rounding the corners with css and then the behaviour script is being applied so it's doubling up.

10 Posts

redball Reply #7, 14 years, 9 months ago

Can you explain why this is only happening when using Modx? The HTML files are online here:
http://globalpmcorp.com/tmp/testing/testing.html IE9 Looks perfect.

This problem is only happening in IE9 when the template is put into Modx.

Thanks again for all of your suggestions!

701 Posts

bennyb Reply #8, 14 years, 9 months ago

it's as i suspected, your HTC file isn't working on your flat page example. So it's not getting applied again in IE9.

If you view your flat pages in IE8 or IE7 no rounded corner. View the modx version and you have the rounded corners which are then double for IE9

156 Posts

smooth-graphics Reply #9, 14 years, 9 months ago

I'm not sure why MODX should have anything to do with that but you should add a htaccess rule then to get htc working:

AddType text/x-component                    htc

# Force the latest IE version, in various cases when it may fall back to IE7 mode
#  github.com/rails/rails/commit/123eb25#commitcomment-118920
# Use ChromeFrame if it's installed for a better experience for the poor IE folk

<IfModule mod_headers.c>
  Header set X-UA-Compatible "IE=Edge,chrome=1"
  # mod_headers can't match by content-type, but we don't want to send this header on *everything*...
  <FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
    Header unset X-UA-Compatible
  </FilesMatch>
</IfModule>