PDA

View Full Version : Background problem between Browsers

tijean
03-26-2006, 11:13 AM
Hello,
I still have a problem with the background on my website. Firefox and IE give different result:

http://www.student.kuleuven.ac.be/~m0119453/AFiles/new/latinPart2.html
The previous page has the following stylesheet:
http://www.student.kuleuven.ac.be/~m0119453/AFiles/new/style/layout.css
As you will see, under Firefox the background in the main block is not set on the right place. However under Ie the background is on the right place and stays still when I move the scollbar.

On the other side this page
http://www.student.kuleuven.ac.be/~m0119453/AFiles/new/latinPart2B.html
with the following stylesheet: http://www.student.kuleuven.ac.be/~m0119453/AFiles/new/style/layout2.css
works perfectly under Firefox but under IE the background is wel place but as I move the scollbar the backgrond does not stand still.


The only difference between both stylesheets can be found in:
"div#main" -- "background:"
In the first case the background is fixed, whereas in the second stylesheet it isn't.

Can someone explain me how this comes and a solution to my problem would be nice too.
Thanks
Ti Jean
Arbitrator
03-26-2006, 02:15 PM
Well here's a possible solution:

You might try just using a semi-opaque black PNG image as a repeating background which should accomplish the desired effect in Firefox. Your <body> background image will show through but will appear to be darkened as it's filtered through the partially transparent PNG background.

Unfortunately, Internet Explorer isn't capable of displaying PNG-24 transparency but you can set overiding style rules specifically for that browser through a conditional comment. In other words, put the rules that are working for Internet Explorer into the CC. CCs are explained a bit into this page: CSS Hacks and IE7 (http://www.positioniseverything.net/articles/ie7-dehacker.html). For an explanation about PNG transparency with regards to Internet Explorer, see koivi.com's explanation (http://koivi.com/ie-png-transparency/).

I've attached a 1x1 black PNG image at 50% opacity to this post.

<style="text/css">
#object {
background: url(trans.png);
}
</style>

<!--[if IE]>
<!-- put whatever CSS is working for IE in here. -->
<!-- make sure the CC is below your other styles or it won't override them. -->
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->
tijean
03-26-2006, 06:05 PM
Hey, thanks for the fast and efficient answer.
I used the code you gave me in order to redirect to an other stylesheet. But I didn't try the option with semi-opaque black PNG image. I'll try it later on.
Thanks a lot