LebGeeks

Kassem

Member

Maintaining Cross Browser Compatibility

So I'm *almost* done working on the site and now I need to pay attention to cross browser compatibility. Chrome and Firefox play nice together (except on a few occasions). But IE, well... you know better than I do :)

I managed to get the transparency working cross browser, but I still couldn't get the rounded corners and box shadow to work... Here's what I've got in my CSS:

.rounded_corners(@radius:5px) 
{
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    -khtml-border-radius: @radius;
    border-radius: @radius;
}

.transparency(@value:80) 
{
    background-color:White;
    background:rgba(255, 255, 255, @value * 0.01);
    filter:alpha(opacity=@value);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@value)";
}
    

.box_shadow(@value:5px) {
    -moz-box-shadow: @value @value @value #AAA; /* FF3.5+ */
    -webkit-box-shadow: @value @value @value #AAA; /* Saf3.0+, Chrome */
    box-shadow: @value @value @value #AAA; /* Opera 10.5, IE9, Chrome 10+ */
    /* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
}

P.S: I'm testing on IE8, I have no idea how it looks on IE7, yet. But first I need to get it working on IE8 and the others.

Any suggestions?

rolf

Member

Re: Maintaining Cross Browser Compatibility

I tend to use transparent PNG for background, instead of using the browser transparency. One annoying thing about the browser transparency is that it makes everything in the div transparent, not just the background. You can also use jQuery "animate()", with a delay of 0 if you don't want an animation.
Sorry, I'm always posting workarounds and other solutions :) but I really hope I'm being helpful :)

Kassem

Member

Re: Maintaining Cross Browser Compatibility

Nope, in my case it's only background. I'm not applying transparency to the whole div, I'm just styling it with a transparent background "background: rgba(255, 255, 255, 0.8)" which means "give me a background that has a white color and is 80% opaque".

The animate() trick could be useful! Any ideas about box shadow and round corners?

Thanks rolf :)

Ra8

Member

Re: Maintaining Cross Browser Compatibility

Hi Kassem, i think you can use a background too for the rounded corner and box shadow. Here is an example i made http://ra893.agilityhoster.com/test/

Ayman

Member

Re: Maintaining Cross Browser Compatibility

Kassem, for achieving CSS 3 rounded corners and shadows for IE8 and 7 all you need is this But your CSS wont be considered as valid by the W3C CSS validator. Good luck.

XhacK

Member

Re: Maintaining Cross Browser Compatibility

Hi Kassem, i think you can use a background too for the rounded corner and box shadow. Here is an example i made http://ra893.agilityhoster.com/test/

This is not a good practice at all, there is a lot of rounded corners "workarounds" (this is one of them) but still I would go with the CSS3 solution and live with having sharp edges on IE8- (of course sometimes the client requires this "feature" of IE too and then...you are screwed!).

Anyway, if you are to support IE7 and you have a complex layout I would recommend that you spare some "serious" time for it!

spicydesign

Member

Re: Maintaining Cross Browser Compatibility

you can use this http://css3pie.com/

Cheers
Alex