In example bellow when you hover on icons cursor should be changed to different. It works except of IE 8. On IE 8 these icons turned to be unclikable, i.e. not only cursor are not changed, but also Jquery click event does not fire. Consider how the following html code works at FF, IE7 and eventually at IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS IE 8 cursor test</title>
<style type="text/css" media="screen">
.icon-button {
float: left;
cursor: pointer;
}
.ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
</style>
</head>
<body>
<div class="icon-button ui-icon"></div>
<div>Sample Text</div>
</body>
</html>
What migth be the root of problem? What could be possible workarrounds?
Thanks in advance.
P.S. Changing DOCTYPE is not really possible.
Also if I remove float: left on this example it seems like "fixed", but when I remove it on a website, besides broken design, it does not help also.
IE8 doesn't like empty divs. Putting a blank <img/> with a transparent pixel inside the div seems to fix it.
Demo: http://jsbin.com/asiju (Editable via http://jsbin.com/asiju/edit)
HTML source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS IE 8 cursor test</title>
<style type="text/css" media="screen">
.icon-button { float: left; cursor: pointer; }
.ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
.dummy-image { width: 15px; height: 10px; vertical-align: top; border: none; }
</style>
</head>
<body>
<div class="icon-button ui-icon"><img class="dummy-image" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw=="/></div>
<div>Sample Text</div>
</body>
</html>
I don't know any hack to beat it. But, if smth could be clicked it should be in a tag, so insert a and maybe display:block. href could be =#. That solution seems to be semantic and good for me :)
How about:
<a href="whatever.php">
<div class="BG IMAGE" style="cursor:The one you want"></div>
</a>
I use it myself and it works fine.
Take out the float:left and the css class looks like below.
.icon-button { cursor: pointer; }
It should work.
This just worked for me in IE8, super simple
cursor: pointer !important;
Related
I am trying to give the date a margin of 15px between the bottom of the header and the text itself, but it doesn't move no matter what I tried.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="myscripts.js"></script>
<title>The Impertus · Understand the News</title>
</head>
<body>
<div id="Preheader">
<img src="images/masthead.png">
<div class ="ph" id="hd"></div>
<p class="ph">May 14, 2016</p>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
background-color: #E1D4C0;
margin: 0 0 0 0;
}
.ph {
display: inline-block;
margin-bottom: 15px;
}
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
}
Created Fiddle here: https://jsfiddle.net/fhkh6ae0/
Add .ph { vertical-align:15px; }
See https://jsfiddle.net/fhkh6ae0/2/
Try
.ph {
padding-bottom: 15px;
}
I think your issue lies in your html elements display property.
I see you are using this for the .ph class:
display: inline-block;
In order for your elements to align next to each other, but I think what you are trying to achieve here is possible by applying a float to your #hd and .ph elements:
float: left;
Here is some detailed information on CSS Floats by CSS-Tricks. The method you are using can be a good thing to do in a lot of specific situations, but for your specific case, I think this is the right path to take.
Here is a Fiddle for you.
You can see I changed some things and I added new things. One is the float property I am referencing above, and I have added an overflow: hidden property to the main container #Preheader , this is a fix for floating elements that try to escape their position or break your layout in bits. Remember the last one.
Just add a padding in #Preheader and it will be okay. take a look https://jsfiddle.net/fhkh6ae0/3/
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
padding-bottom:15px; /*added*/
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML-Kit Tools HTML Tidy plugin">
<link href="layout.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="square" font=10px>
<p></p>
</div>
<div id="wrapper">
<img class="A" src="download.jpg" alt="Solar Panels"/>
<img class="B" src= "wind.jpg" alt="Windmills" />
<img class="C" src= "biomass.jpg" alt="Biomass" />
<img class="D" src= "renewable.jpg" alt="Renewable Energy" />
</div>
<hr>
<div id = "bottom">
<p>Contact:*********#gmail.com</p>
</div>
</body>
</html>
Here is my css
<style type="text/css">
p {
color:#f5f5dc;
font-size:50px;
text-align: center;
margin-top: 20px;
}
body{
background-color:#fffacd;
font-size:100%;
min-width:800px;
}
.square{
height: 100px;
width: 100%;
position:relative;
left:-20px;
border: 2px solid black;
border-radius: 5px;
background-color:#0066cc;
font-size:1.0em;
}
#wrapper{
width:100%;
margin-top: 40px;
margin-bottom: 40px;
}
.A, .B, .C, .D{
width:300px;
height:200px;
float:left;
border:1px solid black;
margin-right:10px;
margin-bottom:40px;
}
.D{
width:270px;
}
#bottom p{
color:black;
font-size:15px;
}
</style>
This is my code how can i minimize it without it squishing together?
i have tried making containers.
I have tried everything.
I added my css. When I say minimize, I mean when you make the page smaller. Everything gets squished together and the pictures go on top of each other and it looks horrible. It's fine when you maximize it.
You can use responsive CSS from bootstrap and can use its class when formatting.
http://getbootstrap.com/2.3.2/
for example.
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
A wild guess, set a min-width to the body.
INLINE
<body style="min-width: 800px;">
OR IN YOUR STYLESHEET
body {
min-width: 800px;
}
Change the 800px to the required minimum width you want. Then when the browser resizes to a width smaller than that number, the scrollbars will appear.
Please refer the fiddle and update it,
I have updated small errors, with one closing div missing,
and that with strict DTD in the heading, is the main reason for ruin the formatting..
you may use transitional/loose DTD if still learning,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
I am sure this will do, but still if problem persist, please update fiddle and post back the new link, with all codes.
Thank you for updating code of CSS, now after looking at your CSS, I can say the problem was float and I have updated my fiddel for the same, that works fine with Google Chrome Browser, please let me know if any problem persist, with specification.
Your problem is yours tag are not responsive in your views.
The easiest way is
Download bootstrap css and link in your html.
<!DOCTYPE html>
<html>
<head>
<style>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap_responsive.css">
</style>
</head>
<body>
<p>hello world.</p>
</body>
</html>
and check
http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem for futher details.
If you dont want to use bootstrap
there is purecss for second choice
http://purecss.io/
Some idea to render this correctly on IE????
The :active only goes if I click out of span area.
I would like to do this without to use javascript.
On chrome and firefox it runs perfectly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
a
{
padding:20px;
border:1px;
display:block;
}
a span
{
width:96px;
height:96px;
display:block;
border:1px solid;
}
a:hover
{
background-color:#ccc;
}
a:active
{
background-color:#666;
}
</style>
</head>
<body>
<a href="#">
<span>casa</span>
</a>
</body>
</html>
You can fix this using a pseudo-element for the a-element which is positioned right on top of it:
a {
position: relative;
}
a:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
The drawback is that you can't select any text inside the a-element.
Pseudo-elements are supported by IE8+. A workaround for IE7 would require CSS-Expressions, but as you don't want to use Javascript …
Try this code on your CSS
ul.active_a li a:link { color: red;}
this code may help you.. http://jsfiddle.net/easwee/WVrzu/16/
I tested it IE. its working perfectly.
Good Luck !
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.
I have started a website with a redbackground and i want a little bit of white at the top.
i have this code:
CSS:
body {
background-color: #ff4d4d;
}
#header {
background-color: #ffffff;
height: 20px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fat Oblongs</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header"></div>
</body>
</html>
Which produces:
You should make sure your body and html elements have no margin and padding:
html, body {
padding: 0;
margin: 0;
}
Sidenote: you also really should not use XHTML 1.0 Transitional as your doctype. If possible, simply use HTML5 (this has no influence over your borders, but still, don't use transitional doctypes unless you have a very good reason to do so)
<!doctype html>
body, html {
border: 0;
padding: 0;
margin: 0;
}
Browsers tend to have a few pixels of padding/margins around the window edges. The above CSS removes that all.
you need to reset margin:padding of the body to zero
body {margin:0;padding:0;}
http://jsfiddle.net/79w9Y/