There is a kinda tricky (dirty) workaround for it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.error[B][COLOR="red"]:after[/COLOR][/B]{
border: 2px solid #FF0000;
padding:15px;margin:10px;
background:#f8f8f8;
[B][COLOR="red"]content:url(error.gif)'There is an error';[/COLOR][/B]
}
</style>
</head>
<body>
<span class="error"/>
</body>
</html>
You'll notice that the div doesn't resize itself to the image's height. So i was trying to manually set the height of the div:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.error:after{
border: 2px solid #FF0000;
[B][COLOR="red"]position: absolute;
height:100px%;[/COLOR][/B]
padding:15px;margin:10px;
background:#f8f8f8;
content:url(error.gif)'There is an error';
}
</style>
</head>
<body>
<span class="error"/>
</body>
</html>
I gave as height 100px%. That actually was a typo, the "px%", but it seems to be the only notation that works :D 100% is the whole page, 100px isn't relative to the image.. 100px% seems to work for some weird reason.
(Note that for the content attribute to work in IE a doctype must be provided (as my first line))
Edited by wim DC, 28 November 2010 - 10:20 AM.
Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
3
Back to top
