MS Edge wrong display a slideshow and a content below - css

I'm creating a simple site here: http://dev.bajan.sk/poplar/en/ubytovna-poplar
The problem is only in MS Edge, there is a slideshow above the page content. In each other browser, which I tried, the content is below the slider, but in Edge it seems, like the slideshow would by position:absolute, or fixed. I checked a custom CSS, but there's nothing to repair.
My problem is, that I use win7, so it's impossible to install the Edge. I was using only browserstack.com account, but the free halfhour passed away and it's also very very slowly. If someone could help, I would be thankful.

I solved the problem.
This site was not created by me from scratch. I only took a job after a graphic designer, who played on coder. He didn't upgrade the plugins, which means, the very old version of bootstrap (from year 2014) was linked to site. The Edge browser has a problem. Two clicks to update the plugins and everything work fine now.

Related

Elementor ruins page layout

I use Astra (latest version) and Elementor 3.64, tried to switch off every plugin, clear cache, restore CSS and change CSS setting to external file, nothing helps.
I have some products in my catalog, and those product posts that I have created previously seem to have no problem with CSS.
But when I create a new product, the page has no margins or paddings whatsoever. The most interesting thing is that when I start editing previous product posts, the margins and paddings also disappear there. That's why I try not to change other "healthy" posts with Elementor, because it ruins them.
I tried looking at the CSS code through F12, it shows that CSS codes for ast-separate-container and ast-woocommerce-container simply disappear and I have no clue why that happens. Other pages that I haven't opened with Elementor have these code lines with all margins and paddings. Somebody help?
Normal page: https://atomycatalog.kz/product/atomi-centella-nabor/
Ruined page:
https://atomycatalog.kz/product/atomi-dorozhnyj-nabor-6-dlya-ochishcheniya/
Have you tried updating Elementor to version 3.7.0 before?
I've got news from some friends that there is a bug in version 3.7.0 which makes some layouts messy, they say downgrading still doesn't change anything.
The only way they fix the messy layouts problem is with restore the database if you have any backup for the version on date where you feel everything is still fine.
Elementor developer team will work hard to fix this bugs in the next update. I am sure of it
If this doesn't help you, come back and ask again:)

Chrome 77 LayoutNG breaks my float layout

I have a website that I designed based on the "Holy Grail" layout described in this A List Apart post. A recent Chrome update broke it. You can see the results on the example page for the article (I also made it into a fiddle). Open it in Firefox to see what it should like and in Chrome to see what's happening now.
I realize that this technique is super dated, and I have plans in place to redesign it with Flexbox. But, that will take time, and I was hoping to get it working again quickly in the meantime while I work on a redesign. You can read more about LayoutNG on this page.
Does anyone know any tips and tricks to fix this? Is there a Chrome bug already open that I can follow?
Update: I decided to test it in Canary (v79), and the layout works perfectly there. It's still broken in Beta though (v78). So, I could wait until the current Canary gets released, but that won't be until December according to current estimates. So, I would still like to find a quick fix between now and then if one is available.
Here's some code to make SO happy:
SO won't let me post a link to jsFiddle without code...smart
It turned out to not be that hard to reimplement the layout with Flexbox. So, I just did some good old fashioned user agent sniffing to detect broken Chrome versions and load a small CSS snippet to override the appropriate styles.

H5P timeline alignment

I have a running website that has a H5P timeline that works really well in chrome but in Firefox its outside the canvas and off to the side. The website is here:
http://www.tunapanda.org
If you scroll down a little bit you will see the timeline developed in H5P. This timeline should show under the heading "Our History". It does this in Chrome, but in Firefox it appears to the right of the heading, to a large part outside the window.
Any help would be greatly appreciated!
I can't find your content, it seems you have removed it from the page.
If you're still looking to solve the problem I would suggest updating your H5P timeline or grabbing it directly from github by getting the wrapper and the external timelinejs library.
If you still experience problems after this I suggest trying to isolate the problem and put up a code snippet, link to a jsfiddle or an off-prod site that we can check out to help you further.

How to fix formatting issue when loading page in different tab?

I'm having an issue with my website http://www.ben-drury.co.uk/ (I know the content sounds dumb, but it's my first attempt at a portfolio and it's not finished) where the formatting of the text is very peculiar under a specific set of circumstances.
When loading any post or page in Google Chrome, if I remain in the tab for the duration of the loading it looks like the image below, which is perfect and exactly what I want.
However if I start loading the webpage in a new tab and don't instantly navigate to that new tab, or indeed if I refresh the page and navigate away from the tab, when I come back it looks like the image below.
Interestingly it seems to work absolutely fine in Internet Explorer and Firefox, so initially I thought that it might be an issue with my installation of Google Chrome. However testing it on other computers resulted in the same thing happening, and a variety of different ways of phrasing the issue has turned up very little.
So essentially, how do I fix it for Google Chrome users?
(For those that cannot see the images, the text in the post placed as an example runs outside of the box it should be displayed in and often lines appear over the top of each other around hyper links.)
Update:
I've managed to fix the issue for pages by removing the justified alignment of the text. However I have made said change to the posts as well yet the problem persists for them.
So after a little more delving into the issue, I came to the conclusion that not only was the idea of web safe fonts actually a load of miss-represented nonsense, but that Google fonts might be the way to go. After installing a plugin for Google fonts onto WordPress and making all my posts use one by default, my problem has been entirely resolved and I can even have justified text on my posts and pages.

jQuery colorbox not working in IE8 (But works in IE7?)

I'm working on a clients website and for some reason the jQuery colorbox plugin isn't working correctly in IE8 on this site, it's opening the colorbox and has no width. The gallery is running NextGEN gallery.
http://bwosoyoos.lexcorp.ca/photo-gallery/
The main reason I don't understand this is because I've got the exact same thing running on another site and it works fine (also using the same theme/css for the colorbox)
If anyone can shine some light onto this I'd be beyond grateful.
I haven't been able to figure out a direct cause, and I'd also tried switching to Lightbox Plus instead of jQuery Colorbox.. but it's still the same issue.
I've added a warning message that pops up when people view that page on IE 8 or lower expressing that it won't function correctly and providing a link to update IE, or download another browser via BrowseHappy.com .. that's the best I can do for now. :/

Resources