.NET Developement and CSS

[SoundTheSurrender]

How would I go about making different CSS settings for different browsers. I'm most concerned with Safari and Firefox.


Thanks

 

[ahurtt]

Create a separate CSS file for each browser client type/version you want to support.
Use server side ASP code to sniff the user agent http request header.
Include appropriate browser specific css stylesheet with response output.
Profit!

 

[SoundTheSurrender]

Alright so it works in a similar fashion like PHP. Thanks.

 

[Gunslinger08]

Request.Browser.Browser will return what you need, or you can check for specific browser capabilities through the Request.Browser object's properties.

 

[Rip the Jacker]

I would advise against that. You should code by the standards and not cater to specifc browsers. It's mostly the IE developers that got it wrong, so after you coded your stylesheet to the standards, then proceed to code to the browsers that are closest to supporting standards (Safari 3, Opera 9, Firefox 2) and then the rest.

But yeah, the exception would probably be to IE where most nowadays would use conditional comments and feed something like an HTC to fix PNG's, or use the filter property so the CSS validates (If you know what you're doing you don't need everything perfectly valid).

You should try to avoid hacks (feeding different values with proprietary selectors, etc), but then now that I think about it it's alright because that's how everyone starts out (using hacks).

Just try to minimize the number of hacks you use (shouldn't need to use a box model hack -- just add an extra wrapper... shouldn't need to use different widths/margins - floated elements with horizontal margins get fvcked in IE6 because they get doubled.. so you feed display:inline; to get rid of that.. for pixel perfect list items you need to float the LIs because IE has inconsistent spacing EVEN with a universal reset and that can only be solved by white-space:no-wrap; or floating the LIs.

 

[troytime]

i agree with rip the jacker

browser detection is easy, and having severall css files for different browsers may seem like a good idea during the initial design implementation - but code maintainance will be a major pain

do it right the first time
if you need to have some conditional css for ie6 and 7, do it, but keep it right there in the css

 

[SoundTheSurrender]

well I was hoping I could program for firefox and then make extensions for IE 6.0, IE 7.0 and Safari.

 

[Rip the Jacker]

Firefox isn't even the most standards-supported (whatever you wanna call it) browser. That would either be Safari 3 or Opera 9. If you aren't familiar with IE bugs (hasLayout triggering to contain floats, double margin float, etc) then you should have FF2 (Firebug + Web developer) or Opera 9 or Safari 3, IE6 and IE7 open all at once, and after each rule in your stylesheet check to make sure all three pages are consistent. When you get to a certain stage, take a screenshot and compare it pixel by pixel to make sure it's consistent. If you have any problems feel free to PM me as I have dealt with these for the past year and am pretty familiar with most of them.