The CSS that I wrote for the header is not working well on safari but it is working on the other web browsers.
The problem that I am having is that on chrome, etc. the margin-top from my logo is on -30px but on Safari it needs to be -15px
I have already tried a few things but it is not taking me anywhere. This is a example of what I have tried:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.header-center-items {
margin-top: -30px;
}
/* Safari only override */
::i-block-chrome,.header-center-items {
margin-top: -15px !important;
}
}
This is not an exact solution, but more of a work around.
You could the following:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.header-center-items {
margin-top: -30px;
}
/* Safari only override */
::i-block-chrome,.header-center-items {
position: relative;
top: 15px;
}
}
Let me know if it works.
Related
I have following CSS snippet to prepare a rubber stamp effect which works fine in Google chrome, Firefox but not in IE 11.
Any idea what mistake I am doing here. In IE11 it looks black.
.stamp {
position: relative;
display: inline-block;
color: red;
padding: 15px;
background-color: white;
box-shadow:inset 0px 0px 0px 10px red;
transform: rotate(-25deg);
text-align:center;
}
.stamp:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url("http://i.imgur.com/5O74VI6.jpg");
mix-blend-mode: lighten;
}
<p class="stamp"><span>COD</span><br>5c84b19c98b21f292c9d086f
</p>
Not supported in ie. Your best bet may be to include the working css as is, then in a ie-specific media query, don't display that css and have a fallback display.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
#supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
As the comments have mentioned, mix-blend-mode is not supported in IE, and not supported on Edge too.
You could check this from:(1)https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode (2)https://caniuse.com/#search=blend
In my opinion, according to your code and example, there may be no perfect solution for it if you just want pure CSS.
But my suggestion is that you could use Javascript polyfill to try to achieve your requirement. For more, you could refer to this link:https://stackoverflow.com/a/32614511/10487763
These media queries are working well in other browsers except IE10, In this situation what should I do? How can I achieve this task?
#media screen and (max-width: 575.98px){
.layer-hover .plus, .layer-hover-2 .plus{
font-size: 2.5rem;
}
.layer-hover a, .layer-hover-2 a{
width: 70%;
padding: 5px 0;
font-size: 10px;
}
}
A few resources here on #media usage on Internet Explorer 11 and under.
Targetting Internet Explorer Best Practices
CanIUse #Media (Shows known issues with IE10)
Browser Compatability Best Practices.
IE10 Specific Styles (Some techniques)
IE10 CSS Hacks
IE10 vs Media Queries
Some people have been known to try tricks like below as well with success, but IE10 can be unforgiving. Note the prefixes and see the CanIUse Knowledge Objects.
#-ms-viewport {
width: device-width;
}
If that doesn't do the trick, you could try removing the screen parameter
and styling specifically for IE10 like so.
Per this article on targeting IE10, this little workaround exists since conditional comments aren't recognized since IE10.
#media (max-width: 575.98px)[data-useragent*='MSIE 10.0']{
.layer-hover .plus {
font-size: 2.5rem;
}
layer-hover-2 .plus[data-useragent*='MSIE 10.0'] {
font-size: 2.5rem;
}
.layer-hover a[data-useragent*='MSIE 10.0']{
width: 70%;
padding: 5px 0;
font-size: 10px;
}
.layer-hover-2 a[data-useragent*='MSIE 10.0'] {
width: 70%;
padding: 5px 0;
font-size: 10px;
}
}
Another possible hack you could try is mentioned on Mediacurrent with lots of success stories.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}
Hide scrollbar but still scrollable in CSS
i try ::-webkit-scrollbar { display: none; } this is working only Google Chrome but i want all browser
so please help me?
I tried this on Firefox, Chrome, and Opera using CSS only. All work fine with it.
* {
/* hide scrollbar for firefox */
scrollbar-width: none;
}
/* hide scroll bar for chrome and opera */
::-webkit-scrollbar {
display: none;
width: 0px;
}
*::-webkit-scrollbar { width: 0px; }
I write the css top for mozila and chrome.
-moz-top : 20px;
-webkit-top: 75px;
But it show me error "Unknown property name".
I'm a little late to the party but this did the trick for me:
/* this sets standard, which gets IE and others (all except chrome and mozilla) */
#EXAMPLE{
top: -10px;
}
/* this gets mozilla */
#-moz-document url-prefix() {
#EXAMPLE{
top: -10px;
}
}
/* this gets chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#EXAMPLE{
top: -5px !important;
}
}
Just use top
It's supported by all browsers
My CSS code below is working fine in Chrome, but isn't working in Firefox. I think it might just be a syntactical difference but I can't figure out what is going on. Are there any mistakes in my CSS code below?
#framed_source {
background-color: white;
display: block;
height: 97%;
width: 100%;
padding: 0px;
}
#grey_cover {
position: fixed;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
background-color: #3F3F3F;
/* Transparency is applied through the transparent class */
}
#popup_window {
background: #D0E9F3;
visibility: visible;
border: 1px solid #666;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
padding-left:20px;
}
.with_frame {
position: absolute;
width: 600px;
}
#popup_window_content {
overflow: auto;
color: #1F313E;
font-family: Calibri;
max-height: 200px;
}
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
Basically I have a popup window that is displaying on top of an iframe. In Chrome it does this correctly, in FF it displays the popup beneath the iframe. Any ideas? I think it has to do with absolute / relative positioning.
Picture of Firefox -- Incorrect CSS
Picture of Chrome -- Correct CSS
I also created a JSFiddle for this CSS with the corresponding HTML. I am trying to get the blue box appearing below the frame to appear centered in front of the frame.
So, in the end this is what was wrong.
Having <iframe> above the popup in the html structure somehow messed up with the positioning of the popup.
Since html and body were just hanging out there, they didnt stretch all the way to the bottom and restricted iframe from going further as its height was set with percentage.. ( This is something i do remember fixing at some point.. but it was already past midnight when i was checking into it, so who knows where that disappeared :D )
http://fiddle.jshell.net/CH6ny/6/
I don't exactly know why, but when I upgraded to Firefox 5 the issue resolved itself. Thank you everyone for all your time anyway!
To get something to appear on top of another, you will need to set the z-index values and I think also set the position.
For the element that you want to be on top, set the z-index value like this:
#idOfTopElement {
z-index: 1;
}
#idOfNextElement {
z-index: 2;
}
You might need to add position: relative; or position: absolute; to one or both of those depending on what position you are using, but I can't remember for sure.
If you are not completely against a javascript/jQuery solution, here is an option that might work. I chose to do the top and left adjustments onload, but it would make more sense to do it when you call the creation of the popup_window:
http://jsfiddle.net/CH6ny/4/
It worked in Chrome, FF, IE, and IE quirks mode.