Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getting opacity to work across browsers.

    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:

    Code:
    <div id="transbox">
    <div>
    <table width="100%">
    <tbody>
    <tr>
    <td>Kat's Meow</td>
    with the following CSS applying:

    Code:
    #transbox {
    background-color:#FFFFFF;
    opacity:0.5;
    width:99%;
    }
    
    #transbox div {
    color:#000000;
    opacity:1;
    padding:5px;
    position:relative;
    }
    The main table holding everything under the header has the following CSS applicable:

    Code:
    #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?

    Cheers,

    Chris.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    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.

    Quote Originally Posted by youcantry View Post
    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.

    Quote Originally Posted by youcantry View Post
    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 according to one validator and 45 XHTML errors 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).
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •