SOLVED Block Content particle not rendering in Internet Explorer
-
-
- Tom
- Newbie
- Posts: 15
- Thanks: 0
-
SOLVED.
Solution in this thread:
www.rockettheme.com/forum/wordpress-them...n-doesn-t-work-in-ie
I have created a website using Gantry5 and Protean Theme. I am experiencing a problem rendering the Block Content particle in Internet Explorer.
Every feature seems to work and display properly in every browser I've tried (Firefox, Chrome, Opera) EXCEPT I am having a problem with one page only in Internet Explorer (at least 10 and 11)
The page uses the Block Content particle arranged in two columns and several rows to display images in the left column and corresponding text in right column.
Only in IE, all of the images except one are missing, the text is positioned outside the box and with a single word on each line in a tall narrow column. All the images are the same size and resolution, but only one appears.
I have tried a few changes such as deleting and reformatting content but nothing seems to affect the problem.
This is a bit beyond me now - I'm hoping someone can provide some insight into this for me.
This is how the particle looks in non-IE browsers:
This image is hidden for guests.
Please log in or register to see it.
This is how it looks in IE 11:
This image is hidden for guests.
Please log in or register to see it.
This is the website URL: argusaerialmapping.ca/applications
Thank you - Last Edit: 7 years 11 months ago by Tom.
-
-
-
- Tom
- Newbie
- Posts: 15
- Thanks: 0
-
I determined the cause of the problem that occurs with Internet Explorer:
Using the Block Content particle, the problem occurs with the Equal Height variation applied.
Applying the Equal Height variation appears to force the content outside the block and align it vertically.
This only seems to happen when viewing the page in Internet Explorer.
The page renders fine in every other browser I've tried, so I think this is a problem with IE, not the Particle.
However, there doesn't seem to be another Particle that will give me a similar ability to display an image with text beside it as shown in my original post. The Grid Content particle sounds like it should work, but it doesn't appear to accomodate embedding images.
I can disable the Equal Height variation, but then the boxes are different heights which doesn't look good.
Has anybody else encountered this? I would like to not worry about it since it renders fine everywhere else, except IE is such a common browser that I need to accommodate it.
Are there any known work-arounds to overcome this apparent IE limitation?
Thanks
-
-
-
- Stef Bollaert
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
-
Hi,
I am having exactly the same problem. You posted a link with the solution but it doesn't work anymore.
Can you tell me what the solution is?
Thank you very much!
Stef
-
-
-
- Tom
- Newbie
- Posts: 15
- Thanks: 0
-
Hi Stef,
The link to the orginal thread still works for me.
As an option, I pasted it here:
www.rockettheme.com/forum/wordpress-them...n-doesn-t-work-in-ie
Or, it is about number 9 down the list in this index:
www.rockettheme.com/forum/wordpress-them...otean-solved-threads
To summarize, Matt kindly wrote a few lines of code for me to include in the particle custom CSS.
Turns out there is no easy way to make the side-by-side boxes equal height, but it does does realign the text and looks much better.
If you still can't access the thread, I will repost Matt's solution here for you.
Tom
-
-
-
- Stef Bollaert
- Jr. Rocketeer
- Posts: 33
- Thanks: 0
-
Hey Tom,
Thanks for your response! I cannot access the links because I have no authorisation so I get "403 Forbidden".
Thanks for posting the solution!
Stef
-
-
-
- Tom
- Newbie
- Posts: 15
- Thanks: 0
-
With full credit to Rocketeer Matt, this is what he wrote for me in the original post.
This code realigned the text in the right-hand block but does not force the side-by-side boxes to equal height.
I just put the code in Block Particle CSS file.
I hope that helps.
Tom
Quote from Matt:
try this code in your custom css:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.equal-height {
display: block !important;
}
}
untested... no idea if it'll work
-
Time to create page: 0.076 seconds