The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.
Related
Basically i just want to put a button around a link and this is my code:
.btn {
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
Explore Now
Unfortunately, nothing happens when i add the CSS part. The link gets added in right part, but doing anything in CSS won't change the look of it. Where is my error please?
Your CSS must be inside the <style> tag, like this:
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
</style>
</head>
<body>
Explore Now
</body>
</html>
... or referenced with a link to a stylesheet (e.g styles.css) with your css styles
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Explore Now
</body>
</html>
Note: In this example, the stylesheet is supposed to live in the same directory of your html file.
I created some social media icons on my website. My links are working fine on the desktop but nothing happens on tapping them in a mobile browser. Here is the website https://theopenbay.weebly.com and here is the code —
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
</body>
</html>
and welcome to SO. I found the issue. The icons were blocked by the "navmobile" element. It covered the icons, so it wasn't possible to "press" the icons.
This was caused by the display block styling of that element. So by removing that you'll be able to make those icons clickable again.
your problem is, that div#navmobile is overlaping your footer, #navmobile has z-index:8, what you can do, is that you can change div#my-footer's position to relative and z-index higher than 8, here is the code (you should add to css):
#my-footer{position:relative; z-index:99}
I solved it by changing display: block to display: table which reduced the navmobile height.
Context: the images posted by Iliass Nassibane above.
Pretty noob question I'm sure. I ran into this problem when attempting to change the background color in a more complex webpage, so I started from scratch and still can't figure it out. Here's the simplified page
My goal is to set the background color of the site, but doing so with body had no effect, even when I had it filled with content. So I tried setting the background color and instead ran into a whole new problem. The header is not at the top of the site, since there's an unwanted space above the body element itself. I've tried setting everything to margin 0 and padding 0 to no effect. Here is my code:
html {
background-color: green;
}
.body {
padding: 0;
margin: 0;
}
#logo {
font-size: 2rem;
border-right: 1px solid grey;
color: green;
}
header {
border-bottom: 1px solid grey;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="blah">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<p id="logo">Path</p>
</header>
<section class="hero">
</section>
<section class="content">
<p>hi</p>
</section>
</body>
</html>
have you tried "body" instead of ".body"?
Try :
#logo {
margin-top: 0px ;
}
body {
padding: 0px;
margin: 0px;
}
Try add This in your CSS:
html,body,header,section,p{
padding:0;
margin:0;
border:0;
}
it Works, No unwanted space.
here the fiddle :https://jsfiddle.net/osrrwrqn/
Use
html,body{
padding:0;
margin:0;
}
<html>
<head>
<title>QuickLinks</title>
<style>
body{
overflow: all;
width: 100px;
height: 100px;
}
a{
color: blue;
text-decoration: none;
}
</head>
<body>
Back to main
<hr id="85">
<hr id="85">
<div id="83">
Issues
</div>
</body>
</html>
Will Not render in chrome. Not sure about others. File is saved as google.html and it is for a directory style chrome extension and will not render anywhere within chrome.
http://validator.w3.org/#validate_by_input
use this more.
There are 7 errors I think according to the validator.
I noticed that your missing the <./style> tag. (ignore the '.').
I founded some errors in your code.
1.In your code there is no end style tag.
2. tag end with after end style tag.
I modifed your code. It's wroking fine.
<style>
body{
overflow: all;
width: 100px;
height: 100px;
}
a{
color: blue;
text-decoration: none;
}
</style>
<head> </head>
<title>QuickLinks</title>
<body>
Back to main
<hr id="85">
<hr id="85">
<div id="83">
Issues
</div>
</body>
I noticed when I use border-radius with padding and the direction of HTML is RTL it is not working as expected. It works fine if remove the direction part dir="rtl". The following codes will show how it works without and with dir="rtl"
without dir="rtl":
<!DOCTYPE html>
<html >
<head>
<title>test</title>
</head>
<body>
<style type="text/css">
.main {
padding:5px;
}
.tag{
background-color: #0473c0;
border-radius: 3px 3px 3px 3px;
padding:5px;
}
</style>
<div class="main">
<span class="tag">test</span>
</div>
</body>
</html>
Result:
with dir="rtl":
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>test</title>
</head>
<body>
<style type="text/css">
.main {
padding:5px;
}
.tag{
background-color: #0473c0;
border-radius: 3px 3px 3px 3px;
padding:5px;
}
</style>
<div class="main">
<span class="tag">test</span>
</div>
</body>
</html>
Result:
As you can see the text moved to the left and background moved to the right. I tested it on IE10 and IE9. Is there any fix for this problem or any work around?
Making the .tag display as an inline-block seems to resolve this:
.tag {
background-color: #0473c0;
border-radius: 3px 3px 3px 3px;
padding:5px;
display: inline-block;
}
See also this jsfiddle for a working demo. (Tested in IE10, Win8).
However, I'm not sure whether this messes with the flow of text in RTL documents in any way.