View Full Version : getting opacity to work across browsers.

May 12th, 2007, 09:22 AM
Hello, tia for any help anyone can provide.

If you have a look at this URL: http://www.katsmeowdesign.com - it looks right in IE6 but not FF1.5. (Haven't tried other browsers yet).

There are two issues, probably with the same cause. The banner should be solid colour, not faded.

Secondly, for the main part of the page, there should be essentially 3 layers - the blue background, then a semi-transparent panel (which fades the blue background), and then the text on top of that. The text itself should be full colour, not faded. In FF it appears as faded as the semi-transparent panel.

For example code, the page title (Kat's Meow) is as follows:

<div id="transbox">
<table width="100%">
<td>Kat's Meow</td>

with the following CSS applying:

#transbox {

#transbox div {

The main table holding everything under the header has the following CSS applicable:

#bg {
background:transparent url(img/background.gif) no-repeat scroll 0%;

I realise that #transbox should be a class and not an ID - but anyway, I'll fix that at the same time.

Any suggestions on getting the banner, and the text, to appear in full strength colour in FF?

Any feedback on how it looks in other browsers?



May 12th, 2007, 11:47 AM
It seems that the reason youíre seeing full strength color in Internet Explorer is because no transparency is taking place in that browser. Also, in my standalone copy of Internet Explorer 6, the background behind the text is missing. Assuming that you want to color strength to be identical to that of Internet Explorer, try removing all CSS declarations related to opacity. Donít forget that you have CSS references in the document source too; you should really keep your CSS all in one place for ease of maintenance.

As an FYI, thereís no need to use the proprietary -moz-opacity property. Mozilla browsers have supported the CSS3 opacity property for several years now.

Actually, thereís no need to use opacity at all here. One wonders why you donít just open up the images in an image editor and alter them directly to avoid compatibility issues.

Any feedback on how it looks in other browsers?The page currently appears the same in Opera as it does in Firefox with exception to the fonts which look as they do in Internet Explorer.

I realise that #transbox should be a class and not an ID - but anyway, I'll fix that at the same time.You should really fix errors before you ask for help since they may or may not be the cause of problems. You have 43 XHTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.katsmeowdesign.com%2F) according to one validator and 45 XHTML errors (http://www.validome.org/validate/?uri=http%3A%2F%2Fwww.katsmeowdesign.com%2F) according to another. There are more than that though; document.write and document.writeln isnít supposed to be using under XHTML, the document background is supposed to be declared on the outermost element in XHTML (html, not body), and, in XHTML, the character encoding is supposed to be declared in an XML declaration (not just a meta element). These are some reasons that I recommend HTML over XHTML; if you donít need features only available with XHTML (it appears that you donít) then save yourself some trouble and use HTML instead.

Your document also has some semantic issues (tables for layout, non‐header content marked as headers, etc.) and separation issues (presentational elements and attributes and inline CSS).