1 reply [Last post]
mikk
Offline
newbie
Last seen: 16 years 10 weeks ago
Joined: 2004-11-17
Posts: 2
Points: 0

Encountered a strange problem of css. The determined background-color disappares, when I try to position the elements inside a div. (Firefox behaves the same way as IE.)

e.g:

<?xml version='1.0' encoding='utf-8'?><!DOCTYPE html PUBLIC '-//W3C//Dtd XHTML 1.0 transitional//EN' 'http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd'><html xml:lang='en' lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head><title>background</title><meta http-equiv='content-Type' content='text/html; charset=utf-8'/>
<style type="text/css">
div{background-color:#58F0F9;}
table{background-color:transparent;}
p{background-color:transparent;}
font{background-color:transparent;}
img{background-color:transparent;}
.a{position:absolute;}
</style>
</head><body>
<div style='top:10px;left:10px;'>
<table style='top:5px;left:48px;'>
<tr><td>
<font style='top:50px;'>©</font>
<p style='top:65px;'>WWW</p>
<img src='http://www.unicode.org/gifs/24/00/U1811.gif' alt='1' style='top:76px;'/>
<img src='http://www.unicode.org/gifs/24/00/U1819.gif' alt='9' style='top:83px;'/>
<img src='http://www.unicode.org/gifs/24/00/U1819.gif' alt='9' style='top:90px;'/>
<img src='http://www.unicode.org/gifs/24/00/U1819.gif' alt='9' style='top:97px;'/>
<img src='http://www.unicode.org/gifs/24/00/U180A.gif' alt='.' style='top:104px;'/>
</td></tr></table></div>
</body></html>

This kind of code shows the right background
[url] http://www32.brinkster.com/astlanda/background.html
[/url]
and the following one shows the right positioning:
[url] http://www32.brinkster.com/astlanda/position.html [/url]

<?xml version='1.0' encoding='utf-8'?><!DOCTYPE html PUBLIC '-//W3C//Dtd XHTML 1.0 transitional//EN' 'http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd'><html xml:lang='en' lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head><title>position</title><meta http-equiv='content-Type' content='text/html; charset=utf-8'/>
<style type="text/css">
div{background-color:#58F0F9;}
table{background-color:transparent;}
p{background-color:transparent;}
font{background-color:transparent;}
img{background-color:transparent;}
.a{position:absolute;}
</style>
</head><body>
<div class='a' style='top:10px;left:10px;'>
<table class='a' style='top:5px;left:48px;'>
<tr><td>
<font class='a' style='top:50px;'>©</font>
<p class='a' style='top:65px;'>WWW</p>
<img src='http://www.unicode.org/gifs/24/00/U1811.gif' alt='1' class='a' style='top:76px;'/>
<img src='http://www.unicode.org/gifs/24/00/U1819.gif' alt='9' class='a' style='top:83px;'/>
<img src='http://www.unicode.org/gifs/24/00/U1819.gif' alt='9' class='a' style='top:90px;'/>
<img src='http://www.unicode.org/gifs/24/00/U1819.gif' alt='9' class='a' style='top:97px;'/>
<img src='http://www.unicode.org/gifs/24/00/U180A.gif' alt='.' class='a' style='top:104px;'/>
</td></tr></table></div>
</body></html>

Is there a way to determine both the background and the positioning?

regards
yours Shock

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 44 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

css: background-color versus position

Remove this line:

<?xml version='1.0' encoding='utf-8'?>

It throws IE into quirks mode.

Verschwindende wrote:
  • CSS doesn't make pies