I am trying to make a really simple CSS hover. It works fine in IE, Edge, Chrome and Firefox, but doesn't work for Safari (9.1) on Mac.
Have searched the internet and Stack Overflow for a fix, but no joy.
Found this simple example on codepen. That works on safari.
BUT: If i take that code, put it into a plain html document and serve it from Azure, it does not work on hover. You have to click on/off the element for the bit that should show on hover to appear. Oddly, if I use the web inspector and toggle the hover state, it works. Example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#thumbnail {
display: block;
width: 150px;
height: 150px;
}
#thumbnail:hover + #title {
display: block;
}
#title {
display: none;
color: #ffffff;
background-color: #000000;
text-align: center;
width: 130px;
padding: 10px;
}
</style>
</head>
<body>
<a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div id="title">filename.jpg 1</div>
</body>
</html>
I then created a plnkr to see if something extra was going on in codepen. The plunk also works in Safari on Mac.
What do I need to do to get it working in a standard page please?
I have tested your codepen example and even created a HTML file with the contents above and tested it again in Safari 9.1.1 - all working absolutely fine.
You may find the issue is Safari caching your content from Azure, can you clear the web browser cache and retry the issue?
Perhaps there's a cache on Azure that needs clearing also?
Related
Help solve the problem with Edge. You need to apply the style only under the edge, as in my example.
I tried to do it as under microsftexplor but without result. How to do it right, where am I mistaken? Thanks!
.class {
width: 90%;
margin-left: 0;
-ms-margin-left: 10%;
}
The below code will work for the MS Edge legacy browser from 12 to 18 version.
<!doctype html>
<html>
<head>
<style>
#supports (-ms-ime-align:auto) {
h1{
color: red;
}
}
</style>
</head>
<body>
<h1>This is my sample text...</h1>
</body>
</html>
Output in MS Edge legacy browser:
References:
Browser-specific CSS for Internet Explorer, Firefox, Chrome, Safari and Edge
How to Identify Microsoft Edge browser via CSS?
If you are using the MS Edge Chromium browser then let us know about it. I will try to find a solution to it.
I'm trying to use the property height: -webkit-fill-available.
For that purpose I built this example https://codepen.io/anon/pen/VJoOWW
I'm using Ubuntu 18.04 and when I ran the code on Chrome, everything woks fine, but in Firefox I could not make it work.
My Firefox: Firefox Quantum 68.0, Mozilla Firefox for Ubuntu, canonical 1.0
EDIT1: Using width: -moz-available did little changes on the layout, but the image isn't displaying in the same way as chrome
EDIT2: The first image is correct (Chrome). The last image is displayed on Firefox, I would like to display the image on Firefox in the same way as Chrome
It seems like you are trying to fit the image inside the containing div. You can do that with well-supported CSS properties. There are many ways, here is one.
.block {
border: 1px solid red;
height: 85px;
}
.img {
margin-bottom: 10px;
max-height: 100%;
}
<div class="block">
<a href=''>
<img class ="img" src="https://s3.amazonaws.com/monetostatic/email/white-label/ustrike/logo_header.png">
</a>
</div>
you can simply give a height: inherit; to your <img> and of course to its wrapper <a> and you'll see it works exactly like chrome.
also, remove width: -moz-available; its useless here.
and with this approach, you won't need height: -webkit-fill-available; anymore.
hope it was helpful.
I'm working on styling my web page on a separate CSS file. I have created a link on my HTML file to apply the styling effects to my web page but it doesn't show any effect.
I tried the most basic styles to see if there was an effect to my webpage but nothing happened. I tried writing the codes with Microsoft Visual Studio, and then Notepad++ but still, no effect occurred. I also tried opening my web page using the latest version of Mozilla Firefox, Internet explorer and Microsoft Edge to see any effect but nothing happened.
I tried styling my h1 element using the codes I'll show on the next field
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="Stylesheet" href="../css/staret.css" type="text.css">
</head>
<body>
<h1> Football lives </h1>
</body>
</html>
on my staret.css file, here's what I wrote:
h1 {
color: Red;
}
I expected to see "Football lives" in red color but the actual output was the default color black.
No need to install CSS plugin. There is a little error in your code while linking CSS with HTML.
It should be, type = "text/css" in place of "text.css"
No. CSS3 is included. No need to think about it as an 'addon' or separate thing.
Your issues are with however you are authoring the file. Try putting it in a jsFiddle. : )
.box {
width: 20px;
height: 20px;
background: #ff0066;
padding: 1rem;
transform: rotate(20deg); /* CSS3 */
}
<section class='example'>
<div class='box'>hi</div>
</section>
This problem only occurs to me in Safari, and it does not show in a fiddle or a snippet. You'll have to save it to a local file and open it. Here's my code:
<head>
<style>
.testclass {
height: 50px;
background-color: #f00;
width: 100px;
border: none;
}
.testclass:hover {
background-color: #0f0;
}
.testclass:active {
background-color: #00f;
}
</style>
</head>
<body>
<button id="testdiv" class="testclass">
Test
</button>
</body>
After clicking, the button remains blue until you move the cursor - unlike the expected green state.
UPDATE: I'm using 10.13 High Sierra and Safari 11.0. Upon further testing, the latest version of Safari Technology Preview still haven't fixed this bug. However, both latest Chrome and Firefox on my Mac appears to be just fine. My friend's Mac on 10.12 and Safari 10 doesn't have this problem either.
After some research, I've realized this is a fairly new bug, and it's still being worked on.
Page on webkit bugzilla: https://bugs.webkit.org/show_bug.cgi?id=174562
Hopefully they will resolve the issue soon.
http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>