Jump to content
Jason

Slashup layout incorrect in IE

Recommended Posts

Jason

Hi.

A previous thread mentioned problems with Splashup in IE.

 

I am having these same issues. Everything is fine in firefox and chrome but IE displays only half the splash up section overlayed across the other content. See screen shots below.

How it should look is Fire fox Splashup

How it looks in IE is IE Splashup.

Site is www.catholiccol.org.nz/live-preview-09-2016

 

I have also attached shots of Inspect of each browser. As soon as I click on the ::after and ::before elements in IE the page displays correctly.

I have tried Splashup on other sites and a local install with no custom css and all other plugins disabled but I still get the same problem.

 

Any ideas?

 

Firefox Splashup.jpg

IE splasup.jpg

Chrome normal.jpg

ie11 error.jpg

Share this post


Link to post
Share on other sites
Simon

what happens when you resize the window slightly? just wondering if it needs the resize event triggered.

Some versions of IE do not handle flex very well.

Share this post


Link to post
Share on other sites
Jason

Hi Simon.

Thanks for the response.

Resize doesn't fix anything for splashup in IE. All other sections resize correctly (Boxes, splashup Nav) but same issue exists fo Splashup no matter what size the window is.

Share this post


Link to post
Share on other sites
pehja

Anything new on this or should we just except that fact that it isn´t working in explorer. How embarrassing it was to find out from a client. 


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
Aires

Is there a link maybe I can get you some CSS till an update is ready.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
pehja

Thanks Aires I had to remove it from the clients site to get it ready. How ever I use it on my own site as well.. https//pehjaproduction.se. i will figure it out but if you want to help, it will be appreciated.  


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
mtsurgery

As of today, Splashup is not compatible with IE.  Whether this is due to an internal Pagelines coding incompatibility error with IE or due to incompatibility form other plugins is beyond my scope.  Unfortunately, I learned the hard way when I accidentally stumbled upon my site on a Windows desktop running IE only to find out the Splashup content was not displaying correctly.  Despite making a few adjustments, the only work around was to completely delete Splashup from the Page Editor and use Hero Kit instead.  After a few Hero Kit adjustments and CSS I was basically able to make the content appear very similar to Splashup.  

Another compatibility problem I discovered using Pagelines with IE is that IE will over-adjusts the max-height of Gallery and PostGrid beyond what is seen on Mac Chrome or other non-IE.  Meaning, the max-height of the wrap of the Gallery and PostGrid is over-expressed and improperly calculated with IE.  

The work around fix was to add the following CSS.  It will determine an IE browser and adjust the max heights of the wraps of the Gallery and PostGrid to a normal range.  I discovered that 260 to 300px was about what I needed but others may need less or more.  Now, my site is properly displayed on all web browsers.  

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
  {.mygallery-wrp {max-height: 260px} .pl-postgrid-posts-wrap {max-height: 260px}}

Hope this helps others.

 

MT

Share this post


Link to post
Share on other sites
pehja

Thanks! @mtsurgery

@Andrew it might be a good idea to tell what browsers are compatible with the extensions provide in the extended section. I know, no one likes IE but that does not matter when so many people still uses it.


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      we have noticed that the Elements section is displaying incorrectly under IE11 on Windows 10. See xiting.us. The 3 sections above the footer are Elements sections and they have way too much spacing.
      Is this a known issue?
      Thanks
      Michael
    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • BlueSkyCreative
      By BlueSkyCreative+
      Hi there,
      Just using Navpro for the first time and the submenu is falling behind my splashup video. Must need a z-index adjust....
      I will find it in my css and pull it forward but thought it might need a fix
      Paul
    • arno
      By arno+
      Site that looks great on other browser, are is rendered wrong on IE: http://foodfunded.us/
      We got multiple complaints.
      The height of sections is way too high. Not sure which section is causing the problem, as they are in containers.
      Or is the size of the images?

      While most of us probably don't use IE, it might prevent professionals from getting client engagements with the PL5 tool, if the browsers don't have coverage.

    • claudedagenais
      By claudedagenais+
      I'm testing SplashUp today for a project and I'm having two issues when using it on mobile. 
      1- The two top menus when I click on the hamburger  appears side by side so if the items in the menus are a little long they overlap. Could I only show 1 (ie the left one) or manage the font size for the mobiles only?
      2- If I put a background image it is not bounded by the screen size so it is way to big.
      tx again.
      hamburger (https://youtu.be/iUCDhvbQFmU)
×