Back Home

Open Designs

Community. Driven.

Designer Talk: CSS Image Opacity Validation and IE6

Bottom of Page

1 to 10 of 10

  1.  
    • CommentAuthorRob
    • CommentTimeJul 7th 2008
     
    Hey up, for the new design of a site I run i've been trying to cut down the size of everything, this includes using minimal javascript and minimal images. One of the things i've done is where I want image links to have a hover over effect i've simply set the opacity to 0.8 for the img a and then 1.0 when hovered over.

    However i'm getting validation errors saying that opacity is only available in css3 not css2, I also find it doesn't work in IE6.

    So what i'm wondering is, if there are any other solutions than my simple `img a` and `img a:hover` technique that will both make the code validate and make it work in IE6.

    If the solution is javascript it would have to be as minimal as possible, at the moment I only have 3 lines of javascript other than in the gallery section and i'd rather not add to much to that.

    I also get errors in JD Gallery for -khtml-opacity and -moz-opacity which i've never used before, but am scared to remove incase it causes problems in something I haven't thought to test the site in.

    Cheers in advance for any suggestions :)
    •  
      CommentAuthorgreg
    • CommentTimeJul 7th 2008
     
    -khtml-opacity is for opacity in browsers using khtml (knoqueror) and -moz-opacity for mozilla/firefox. for ie you should be able to use:
    filter: alpha(opacity=xx)

    this is not valid css, but it works. if you want it to work in ie and validate you will need to use some form of javascript - personally i am happy to sacrifice my css validation for this situation.
  3.  
    Posted By: greg-khtml-opacity is for opacity in browsers using khtml (knoqueror) and -moz-opacity for mozilla/firefox. for ie you should be able to use:
    filter: alpha(opacity=xx)

    this is not valid css, but it works. if you want it to work in ie and validate you will need to use some form of javascript - personally i am happy to sacrifice my css validation for this situation.


    Use conditional comments for IE. You can make it so that only IE6 see's the invalid CSS. I don't see any problem with that.

    You could also use a 80% transparent PNG background for other browsers.
    • CommentAuthorRob
    • CommentTimeJul 7th 2008
     
    Posted By: Mike WeissYou could also use a 80% transparent PNG background for other browsers.

    Ay in the past i've always used an image twice as tool and changed the background position on hover, but what with trying to reduce the size of everything to a minimum I decided to go the css opacity route.

    I'll check when I get home if the filter: alpha thing works, if so I suppose that will be good enough to get it working in all browsers, although its dissapointing to have to sacrifice standards compliance.

    Is there no way to define a site as using css3 in the same way you can define different XHTML types?
    •  
      CommentAuthorgreg
    • CommentTimeJul 7th 2008
     
    when validating your css on the w3 site you can set the profile to 'css level 3', which (should) validate with opacity. you'll still run into validation issues with -khtml-opacity, -moz-opacity, etc. though :/
  6.  
    Posted By: Rob
    Posted By: Mike Weiss You could also use a 80% transparent PNG background for other browsers.

    Ay in the past i've always used an image twice as tool and changed the background position on hover, but what with trying to reduce the size of everything to a minimum I decided to go the css opacity route.

    I'll check when I get home if the filter: alpha thing works, if so I suppose that will be good enough to get it working in all browsers, although its dissapointing to have to sacrifice standards compliance.

    Is there no way to define a site as using css3 in the same way you can define different XHTML types?


    A 1px by 1px png shouldn't cause any load at all really. Let it tile it's heart away. On hover, set the background to the solid color. You don't have to worry about moving the image if I'm picturing this correctly.
    • CommentAuthorRob
    • CommentTimeJul 7th 2008
     
    You're not, its many 10kb images, so to create hover versions of each will double that to 20kb for each unfortunately, which is why I went for the simpler opacity route to create hover effects.
    •  
      CommentAuthorgnome
    • CommentTimeJul 8th 2008 edited by gnome on the 08th July 2008 at 11:06:04 EDT
     
    Rob: Mike is saying that you make each of your images 80% solid and 20% transparent for the coloured parts, and solid for the background parts of the image (they don't change). Your background will show through a bit. Then you shift your background between two colours (or a colour and an image) in order to change the image slightly. You also have to make sure that IE6's default background-color for all png images still looks okay.

    Edit: or Mike may be saying that if your images are backgrounds, you can use a second tag inside the first to layer a tiny, mostly-transparent image on top, to get the hover effect you want. you will need a JS hack to get IE6 to behave with png transparency.
  9.  
    I pictured the background as being an image with a semi-transpartent box above it. In reality the box above is an image, and he was using the transparency to change things up on hover.

    Do you have an example anywhere Rob? Maybe there's another solution.
    • CommentAuthorRob
    • CommentTimeJul 9th 2008
     
    Sorry I don't have an example at the moment its all on my localhost at home (really need to get one of those connect to home from work things).

    but its basically just a single (there are lots of them, but in different places) rather colourful 120x50 png, the way I was invisioning you doing it was to have it 120x100 and change the background position.

    Having a box ontop would act in just the same way as putting opacity on the image wouldn't it, in regards breaking validation, but would it fix it for IE6?

1 to 10 of 10

  1.