I am a Java developer, not a web developer. But, as is the case in so many families where there is one person who becomes the designated family "computer guy", my Java development skills have been mistaken for web development skills, and I somehow got roped into building a website for my parents to help them sell their house.
So, like any web development newbie, I wrote the HTML/CSS myself (by hand, sans editor like DW or Expression, etc.) and tested it against FireFox 3.x. All looked great, and we deployed/launched.
Now we're getting negative feedback from everyone and their dog stating that the site isn't rendering properly in other browsers, browser versions, or on FireFox installations running on different operating systems. Similarly, the site is apparently a total mess when being viewed through a smart phone or tablet device.
Now I could dive in and write a whole bunch of messy, nasty, painstakingly-tedious edits to my CSS rules, that basically say: do X when browser is Y, etc. But I am hoping that out there is a tool that can put all my fears to rest.
What I'm looking for is a tool that could take my valid CSS files, and use them to generate CSS rules that will be compatible with a high percentage of all common browsers/versions.
Alternatively, if I have to re-write my CSS from scratch, it would be nice to have a tool that allows me to write/design once, deploy many, so that I only have to focus on the design of a single CSS file, but the code that gets generated is multi-browser compatible.
It sounds like DreamWeaver kind of does this, but you have to choose from one of 16 pre-existing templates.
My wife is a graphic designer, and made the website pretty sweet (not cookie cutter). It was a nightmare trying to figure out what CSS rules to use to implement her design. So any tool that forces you to choose between templates is not an option.
CSS is a mess, no way to automatically doing it right. Saying that I would say there are tools that would walk with you the proper way.
http-equiv="X-UA-Compatible" content="IE=8" (encpsulate as a meta tag - SO won't display if I wrote it as a valid tag)
to force IE to render with it's most modern engine, that would solve some problems.
Begin your CSS with normalize.css - that would eliminate some of the cross browser problems - because it resets your CSS (better and more modern the reset.css)
I'll second the GWT if you come from the java dev world. although It's a framework to learn with it's own quirks. another possible web framework is Grails - a nice java/groovy port of the mighty Ror.
Less or Scss won't automatically solve your basic problem - which is browser compatibility - but are a better and simpler way to write CSS
Remember that most css3 properties aren't support equally in all browsers (and in IE almost not supported) - use them only with graceful downgrade option with supported JS or CSS -when Modernizr JS library can give you pretty good property support detection for various browsers
Don't go Dreamweaver - it produces terrible code
Use csslint to check for valid CSS and common CSS pitfalls
If you must use cutting edge web rendering with HTML5+CSS3 elements you should look into chrome frame -that would enable older browser better support of your site - although I believe this may be an overkill for a simple sell-my-house kind of site.
Use a CSS framework to prototype- it would give you better CSS, good basics and resets and good boilerplate - maybe bootstrap or something similar (didn't try most of them but the internet is crowded with those.