I'm working on a website where a section of the homepage is appearing differently in Safari to Chrome.
On Chrome I can see that the code is using before & after pseudo-elements for styling, using the following code:
.home-about:before {
content: "";
background: #efebe8;
height: 100%;
position: absolute;
left: 0;
width: 50%;
top: 0;
}
.home-about:after {
content: "";
background: rgb(255 255 255 / 70%);
height: 100%;
position: absolute;
right: 0;
width: 50%;
top: 0;
z-index: 0;
}
This works fine on Chrome, but not on Safari. Unfortunately, I'm on a Windows and can't seem to find any option to download Safari to work it out myself. Does anyone know what might be causing the code not to run in Safari?
Any advice would be greatly appreciated!
Related
On some devices screens (laptop), I noticed on Chrome and Microsoft Edge browsers, there is line above my backgroungd svg image, on my top menu.
It looks fine if i resize the window, for example it looks good on mobile size screen. If i change the backround height seems to be solved but it will occur on other screen sizes.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-position-y: 2px;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
I add a printscreen of the error here
On firefox, it seems to be fine.
I wonder if the top line is not a part of the svg image. Unfortunatelly I am not a svg expert.
Thank you for help.
Try removing background-position-y from your css. So that the new CSS looks like this.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
As you can see there are some problems with the rendering in chrome. And only on some of the list items.
Can someone give me some suggestions on whats happening.
&:after {
transition: 0.5s;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: url('');
color: transparent;
background: $blue;
height: 1px;
}
I think you should have put Html file, too.
By the way check if the parent of this element contains "position: relative" or not?
And you don't need to set a margin value for it
I created a custom header for a pre-made responsive theme. It looks great in chrome, but both firefox and ie aren't showing all of the menu items and are positioning a logo::after shadow in a weird spot.
I already verified that there are no errors in my code and tried implementing normalize.css, but nothing has worked to fix the problem.
This is the code I'm using:
.logo::after {
content: "";
background: transparent url("/wp-content/themes/porto/images/shadow.png") repeat scroll 0% 0%;
width: 247px;
height: 14px;
position: absolute;
top: 64px;
right: 30px;
min-height: 0px;
}
#main-menu {
position: relative;
margin-right: 15%;
margin-bottom: 2%;
}
What am I doing wrong here? Thanks for the help!
in my website wordpress i'm using the plugin "Advanced Responsive Video Embedder" to incorporate vídeos.
It's cool but i'm having a little problem since i added to the site an ad page that appears when a visitor enters the site.
It happens that in firefox and opera the ad is in front of the video embed by the plugin so it's cool.
However, in chrome, safari and internet explorer the video embed appears on the front of the ad.
Anyone knows how can i solve this? Is this a problem of the plugin css?
.arve-thumbsize {
width: <?php echo $thumb_width_px; ?>;
height: <?php echo $thumb_height_px; ?>;
}
.arve-embed-container {
margin-left: -5px;
margin-top: 10px;
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
margin-bottom: 10px;
}
* html .arve-embed-container {
margin-bottom: 45px;
margin-bot\tom: 0;
}
.arce-embed-container div,
.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 97%;
height: 98%;
}
.arve-thumb-wrapper {
position: relative;
z-index: 10;
margin-bottom: 20px;
}
.arve-nothumb-link {
display: block;
z-index: 20;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.arve-thumb-thumb {
z-index: 15;
}
.arve-thumb-play {
position: absolute;
z-index: 20;
opacity: 0.7;
filter: alpha(opacity=70);
width: 40px;
height: 37px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -19px;
}
.arve-hidden {
display: none;
}
.arve-hidden-obj {
width: 100%;
height: 100%;
}
Since it works in some browsers i really have no idea what it could be.
Thanks in advance!
Remove the z-index on:
.arve-embed-container iframe, .arve-embed-container object, .arve-embed-container embed
I've used Firebug to pinpoint the culprit. Due to my knowledge I could guess that this was probably a z-index problem. Then I checked all the divs to see if they had a z-index. I found the div I posted above which had a z-index of 5000 on it. I've overridden that by using z-index: 0!important;.
I have a little problem that I cant solve.
I made a dropdown menu, and its OK but in Chrome I can only see the hover effect on the child elements, and can on the parents.
In FF and IE its OK only Chrome is the bad one, could someone give me a hint?
nav.main_menu {
position: relative;
top: 29px;
left: 220px;
bottom: 1px;
height: 90px;
width: 680px;
z-index: 3000;
}
div#container {
width: 980px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
z-index: 1000;
}
It's OK in any other browsers but not in IE
Are you using a CSS reset sheet. I find that solves some of my cross browser issues.
http://meyerweb.com/eric/tools/css/reset/
(you should really show your markup)