|
CSS Tip:
Cross-Browser Backgrounds
by Tom Dahm,
Chief Operations Officer,
NetMechanic, Inc.
If you use Cascading Style Sheets to set the background color of parts of your page, be aware that Netscape Navigator has a bug in its rendering engine that may cause a compatibility problem.
Style sheets give you the ability to apply a background color to a page element. You can do this through the following style rule:
<style>
.myclass { background-color : yellow }
</style>
<div class="myclass">
This has style
</div>
|
Unfortunately, Netscape Navigator and Microsoft Internet Explorer apply this style differently. MSIE applies the color to the entire page element; Navigator applies the color only to the background of the text. As shown in the image below:
Who's right? Since our style rule doesn't explicitly define a width for the page element, it should span the entire line by default. Internet Explorer correctly applies the style; Navigator's rendering is wrong..
You can get around this problem by changing the style rule as follows:
<style>
.myclass {background-color: yellow;
margin: 0px;
border: none;}
</style>
|
This should correct the problem by making Navigator apply the background to the entire line. You can also achieve this effect by setting "width : 100%." This is less reliable, though, so we recommend using the method shown above.
This tip courtesy of Stephan Nedregård
http://www.micropop.com/workshop/
|
