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 !
Related
I have two animated .gif images in my webpage, but they are not being displayed in Firefox. It works on IE, Safari and Chrome. I have read other posts but I couldn't find a solution that works. Could someone help please?
This is the url:
http://www.lokalbericht.unibe.ch
Following is the code:
<!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>Lokalbericht - Hermann Burger</title>
<style type="text/css">
.text_body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
body {
background-color:#000000;
background-image:url(images/intro/background_paper.jpg);
background-position:center 50px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div.soon {
content:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht {
content:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}
</style>
</head>
<body>
<div class="soon"> </div>
<div class="lokalbericht"> </div>
I checked your link. Try this...
div.soon {
background-image:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht {
background-image:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}
Try this :
content: css property which you have set for load background image is creating problem so just replaced it with background-image into both given class div.soon ,div.lokalbericht
background-image:url(images/intro/coming_soon.gif);
background-image:url(images/intro/animation.gif);
In place of :
content:url(images/intro/coming_soon.gif);
I hope this helps you!!
Firefox doesn't support the content property in the same way as Chrome — on img elements and/or when the source is an image.
So you need to use background property instead of content or you need to use :before property the classes like below.
div.soon:before {
content:url(images/intro/coming_soon.gif);
position: relative;
width:650px;
height:170px;
top:350px;
left:30%;
}
div.lokalbericht:before {
content:url(images/intro/animation.gif);
width:160px;
height:20px;
position: absolute;
top:300px;
left:45%;
}
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 am facing some issue in printing a form created using absolute positioning in FF. I am printing on A4 sheet. The page comes fine if its single paged form, but when i have to print multi page form the only first page is printed and other elements that have to come on second page overwrites each other in a single line on the next page. Its quite weird the same is working fine on IE
NOTE I am unable to share the html as it includes a lot of css and quite complex and big HTML pages.
<!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>
<style type="text/css">
#-moz-document url-prefix() {div{position:relative} }
#media print { marquee { -moz-binding: none; } body{overflow:visible !important;} }
#a{
position:absolute;
top:50px;
left:70px;
}
#b{
position:absolute;
top:1050px;
left:170px;
}
#d{
position:absolute;
top:1650px;
left:270px;
}
#c{
position:absolute;
top:1550px;
left:470px;
}
</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>
There is a thread where the topic was already discussed:
Firefox printing only 1st page
However, the problem could be in the css.
As explained here http://briancaos.wordpress.com/2008/12/05/firefox-only-prints-first-page-of-contents/
If you have an
overflow: hidden;
in your css, change it to
overflow:visible;
and then it should work.
If it is possible, set the height of the div elements. This will at least force visibility onto two pages. However, it does not deal with overlapping divs, and there still may a problem of visibility of the div content.
Here is my revision (some visibility borders and coloring was added, and the width may or may not prove useful):
<!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>
<style type="text/css">
#-moz-document url-prefix() {
div{
position:relative;
background-color: #dddddd;
border: 1px solid #999999;
width: 20%;
}
}
#media print {
marquee {
-moz-binding: none;
}
body{
overflow:visible !important;
}
}
#a{
position:absolute;
top:50px;
left:70px;
height: 1000px;
}
#b{
position:absolute;
top:1050px;
left:170px;
height: 600px;
}
#c{
position:absolute;
top:1550px;
left:470px;
height: 500px;
}
#d{
position:absolute;
top:1650px;
left:270px;
height: 100px;
}
</style>
</head>
<body>asdasd
<div id="a">aa</div>
<div id="d">bb</div>
<div id="b">ff</div>
<div id="c">asd</div>
asdasda
</body>
</html>
There's a long standing issue with Firefox and printing absolute positioned elements as mentioned by Daniele B.
Can you redo the HTML+CSS to use relative positioning?
In the CSS add some page-break stuff (http://davidwalsh.name/css-page-breaks). That should make it easier to style the block elements so they flow in each 'page' and align things correctly when #media print.
change your position:absolute to position:relative. you can target firefox only in your print stylesheet using: #-moz-document url-prefix() {div{position:relative} }
<!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>
<style type="text/css">
#a{
position:relative;
height:50px;
left:70px;
border:solid 10px blue;
}
#b{
position:relative;
top:20px;
height:2000px;
left:70px;
border:solid 10px red;
}
#c{
position:relative;
top:50px;
height:250px;
left:70px;
border:solid 10px purple;
}
#d{
position:relative;
top:100px;
height:3000px;
left:70px;
border:solid 10px green;
}
</style>
</head>
<body>asdasd
<div id="a">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="b">bbbbbbbbbb</div>
<div id="c">cccccccccccccc</div>
<div id="d">ddddddddddddd</div>
asdasda
</body>
</html>
What worked for me is add a non-zero top margin to the absolute element container as David Earl writes here https://bugzilla.mozilla.org/show_bug.cgi?id=267029
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;
As you can see from the example below, I have a black background and red links to emphasize this problem of dotted borders showing up on my links when they are clicked. I added border-style:none but it doesn't seem to have any effect. Is there some other way to remove the dotted border appearing around the links when they are clicked?
<!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>Untitled Document</title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
padding: 0;
font-weight:normal;
font-size:12pt;
font-family: Verdana, Arial, Helvetica, serif, sans-serif;
background:black;
}
#linksouter
{
margin: 0;
padding: 0;
border-style:solid;
border-width:0px;
position:absolute;
top: 0px;
left: 0px;
width: 80px;
text-align:left;
}
#linksinner
{
margin: 80px 0 0 .5em;
width:100%;
display:inline;
height:100%;
}
#linksinner a
{
color:red;
text-decoration: none;
display:block;
margin: 5px 0 0 0;
border-style:none;
}
</style>
</head>
<body>
<div id="linksouter">
<div id="linksinner">
1
1
1
1
1
</div>
</div>
</body>
</html>
the border you see is called an outline. you can get rid of it by putting this style into your a rules:
outline:none;
personally i always define it as a blanket a rule near the top of my stylesheets (i really dislike outlines even though i know they have a use)
a { outline:none; }
hope this helps
That´s not the border, it is the outline.
You can disable it by setting:
a {
outline: none;
}
I believe you need to define all the rules for your link such as Link, Hover, Active, and Visited.
More information: http://www.echoecho.com/csslinks.htm
Have you tried using those pseudo selectors on links?
like
a:hover
a:active
Coz when you set the css in just using a, it will only change the static appearance on the link.