We are using revolution slider for the slideshow on the home page. The links to buy tickets works in firefox, but the links are not clickable in chrome.
https://havenac.com
I turned off all plugins and turned them on one by one to test for a plugin conflict. As far as I can tell there is not a plugin conflict.
I created a blank page template here and hard coded the wp-head.php to test for css or javascript conflicts by removing each script one by one. What I found is that when I remove the style.css for the theme, that the links in the slider begin to work. So I am assuming there is something in that file conflicting with the revolution slider code. Here is that test page:
https://havenac.com/dj-battle/
I cannot tell what part of the css is causing the conflict. I am thinking maybe it is z levels or fancybox css. Or maybe chrome is rendering the css differently somehow.
Here is the line of code I am removing from the wp-head.php that is making it work.
<link rel='stylesheet' id='base-style-css' href='https://havenac.com/wp-content/themes/havennightclubgo/style.css' type='text/css' media='all' />
Anyone have any ideas/suggestions?
One of the many div layers under .tp-parallax-wrap, specifically .tp-caption slidelink has an inline style of max-height: 1px. I believe this is what causes the problem. I added a test class in the browser inspector with a max-height: 100% !important which fixed the issue.
I wouldn't use the !important style that I used. But the div that causes your problem has 1px height, which gives the inner a tag a 1px height as well. Try this out and see if this fixes your issue!
Related
I built this e-commerce site for a client using ReactJS and deploying via Netlify automatic github deploys. I'm getting very strange results in Firefox and Safari (Big Sur and before). This error appears in the Safari console:
Did not parse stylesheet at 'https://panthercityleather.com/src/index.css' because non CSS MIME types are not allowed in strict mode.
I'm assuming this is what is causing the layout issues? I tried to add type=text/css to all links and style tags but the command npm run build seems to remove these attributes from the tags.
I then locally ran npm run build (as opposed to letting Netlify automatically build), edited the build css to contain the correct MIME types, added autoprefixing to all of the css, and manually deployed this build folder to Netlify. Then I got a different error in regard to the index.css file:
Failed to load resource: the server responded with a status of 404 ()
I am completely lost at this point and would really appreciate any help. The layout issues only seem to arise on desktop Safari and Firefox and the issues are different in each browser. Here is an example from the home page:
Featured items on Chrome. Everything looks correct.
Featured items on Firefox. Note that the spacing between the headings and the images is too tight but the images are cropped correctly.
Featured items on Safari. Note how the images are now cropped wrong but the spacing is correct.
Maybe try adding type="text/css" to every link or style tag.
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style type="text/css" > ... </style>
Turns out I had 2 issues:
I was linking index.css inside of index.html but with a React app this is not necessary. I simply need to import each css file into the react file that references it. This solved the error that I initially posted the question about but did not fix the weird styling behavior on other browsers.
My main issue was that my css was simply not supported on older browser versions. Specifically, aspect-ratio and gap did not have good support. I used the padding-top hack to provide a fallback for aspect-ratio. I simply removed all gap in my css because on Safari v14, the browser apparently supports gap but none of the styles were being applied. I've spent all day scouring the internet so I simply replaced all gap with something like this:
& > * + * {
margin-left: 1rem;
}
This applies a 1rem margin on all but the first element in a flex row. Change to margin-top for a flex column.
As my site http://newwebsite.outfit24.com.au (still being built) is heavily image-based, I want the header text colour to change so that it stands out from the background (both dark and light images). I have used Elementor for the bulk building of my site and I’m using the "Custom CSS and JS" plugin to write my CSS and change the header colour. In elementor, I set the header CSS class to “custom-header”.
I have tried using “mixed-blend-mode: difference;” but mixed-blend-mode is highlighted red and doesn’t seem to be working. Here is a screenshot of mix-blend-mode not working: https://ibb.co/MNbf84z
.custom-header a{
color:#fff!important;
}
.custom-header {
mix-blend-mode:difference!important;
}
I expect for the CSS to work, changing the colour of the header allowing it to be visible whether it's in front of #fff, #000, and any image on the site but for some reason, mix-blend-mode is highlighted red and isn't working. Does anyone know why this is happening?
Thanks for your help:)
Blend mode does not work when you have any z-index value for the section or its parent section.
For anyone who might still need that. I tried using mix-blend-mode in wordpress for a while, being hit by that "unknown property mix-blend-mode" error. As far as I noticed, the css editors provided by wordpress have that error, but if I make my own html section (as many themes support, I guess all of them) and make a <style>.blahblah {mix-blend-mode: difference;}</style>, that makes it work. Worth trying.
Conclusion: Don't use wordpress css editors. Use an html section and write styles in it.
Stewartside helped me use JQuery to create a specific function for my main navigation on my website (thanks again!). I created a child theme to add the changes to my header.php file and it has started to cause a weird layout change. My homepage should have 20px padding, which is NOT a special CSS modification, but the child theme automatically removes it. This doesn't happen with other pages on my site, just the homepage. I have also added/removed the jquery code to make sure that wasn't the problem; the style.css file for the child theme only has the "child theme" coding, no modified CSS.
Homepage: http://bostonirishclothing.com
About Us: http://bostonirishclothing.com/about-us
Is there anything that would cause this?
Get the Firebug add on for your browser (available on Chrome and Firefox). Then right click the section that is causing the issue and you can see the coding and all the relevant CSS functions including the files they are in (to the chosen section). It will also show which CSS function is being prioritised compared to the other. Then you can modify the functions or add new ones to make it work.
A dirty way to do things is to use !important however this should only be used sparingly as it can screw with other pages. An easy way to avoid that is to make the CSS function for example .entry-content { color:#fff; } becomes .post-x .entry-content { color:fff!important; }
Test things out. Firebug is amazing help when editing CSS. You can even do some of the tests in firebug itself.
Since IE8 doesn't handle PNG 24 transparencies very well, I decided to nix the background image of my PNG's container div so that the background matches the background of my PNG.
Basically, I want to get rid of the background image for #myDiv in IE8 or earlier browsers.
In the header of my page I use:
<!--[if lte IE 8 ]> <style>
#myDiv{margin-top:20px;}
#myDiv{background-image: none;}
</style> <![endif]-->
Changing the margin-top works fine (along with all other adjustments that I made for IE8). Yet the background image still appears, no matter what I try! Short of getting rid of it in my external style sheet, I can't seem to make it not appear.
In fact, when the page loads, it looks like the code initially gets rid of it, but it comes back. I thought that inline styles always trump the external style sheet. Am I wrong?
I checked my css #media stuff, and there's nothing in there that might bring it back. I cleared my browser cache and refreshed. Still there.
Anyone have any clue why #myDiv's background image keeps coming back?
EDIT: I'm working in the header.php template of a wordpress site. (That's where I inserted the code above.) So maybe the external style sheet does indeed trump inline styles in this case?? I don't see why it should, but could that be the answer?
I know it's not a perfect solution, but would adding the background image as a media query work (as IE8 does not support media queries)?
#media (min-width: 1px) {#myDiv{background-image:url(/etc/etc/etc.png);}}
Try using this code:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also make sure your background image is at least 4px x 4px
Here is a related post:
PNG background image not showing in IE 8< using html5?
I am working on a site (www.eticket24.at) and have to create an external CSS for both the header and footer.
If I view the header, for example, seperately in FireFox by going to www.eticket24.at/header.php, it looks fine — the CSS is all there, and it's styled the way it should be. However, in IE8, if I do the same, the style is gone compeletely. It works on the index page, but not when I view it alone.
I am using link rel="stylesheet" href="http://www.eticket24.at/et24_header.css to include the CSS at the top of my header.php page. Same goes for my footer.php page.
So, what's the problem with Internet Explorer this time? Why won't it behave?
Thanks.
header.php doesn’t return a full HTML page, so maybe Internet Explorer is borking on that. Even though Firefox renders it, I don’t think you can necessarily expect all browsers to do so.
As ifaour mentioned, you might want to move your <link> tags into the <head> tag, as they’re not meant to go in <body>.
Your link is inside the body of the page... try putting it inside the <head /> section. Also add type="text/css" to the <rel /> tag.
It's because when you're vewing the header on its own, Firefox will correct the incomplete markup and make the page a valid html document with the <html><body>...</body></html> tags.
IE will not do this, so the styles will not be applied as it doesn't know to do this on an invalid page.
This is also why the page looks correct on the live site.
I included all the css inside the .php files themselves instead of linking them and changed some div names (from to , and to . This helped because css styling of the divs before were being overridden by the other companys css styling, so I had to create my own unique div names, instead of the standard HTML5 ones