[rant] boy how I hate CSS! it's an art that I have no clue about! Spend hours making everything look dandy then you look at the same site in a different browser... WT... I though this was supposed to be a standard!! [/rant]

What I really want is a WYCIWYG editor. No not dreamweaver! An editor where you can define an element and immediately see it's effect on screen more importantly drag it around the screen.

Even better is an editor that ( somehow ) allows you to draw elements around the screen. That would be a real editor!

On top of this I would like it to auto fix up all the browser specific poo so that it looks the same in all popular browsers ( I just don't want to think / worry about it ).

btw I am not a designer, I'm a programmer forced into there world :(

+11  A: 

I've not used it in a long time but, if you're on Windows, TopStyle is quite a good choice. From memory it has some, but not all, of the features you're looking for. I seem to recall you could specify a template (your real HTML template) and it would render against that for quick previews.

TopStyle is awesome.
+14  A: 


  1. Throw out the markup with empty stylesheet.
  2. Use Firefox + WebDeveloper toolbar + Edit CSS for initial styles.
  3. Use Firefox + Firebug for tweaking (inspect element, edit styles 'till it looks right, copy changed styles back into stylesheet).
  4. Use + lots of cussing to make it all work in IE.
I agree on the work flow. Firefox will get you closest to what the standards intend and will be much fussier, and IE will always try hard to render something, even if it doesn't quite understand.
+2  A: 

I don't know that the perfect WYSIWYG editor exists. I would try out Expression Web, but with any of them the best thing to do is check your page in the browsers as you are making it. I usually make my site so it renders well in FireFox first, then I check in IE7, then I check in IE6.

It is extremely annoying that the markup doesn't render the same cross-browser. Hopefully, with all the new browsers rendering ACID 3 this will change in the future. Until then, learning a few tricks that will help your markup render in different browsers will go a long way. Here are a few I can think of:

Lance Fisher
+6  A: 

I'm a huge fan of CSSEdit on the Mac, it blows away everything else I've used on any platform. It's not exactly WYSIWYG, but it does have a real-time update of the view as you edit, which is pretty cool.

Also, using Firefox with Firebug is super-handy as well, but CSSEdit is still my favourite.


Tim Sullivan
+5  A: 

On top of this I would like it to auto fix up all the browser specific poo so that it looks the same in all popular browsers ( I just don't want to think / worry about it ).

Use YUI Reset CSS, Eric Myer's CSS Reset or something similar to reduce inconsistencies between browsers.

Use ie7-js (which I just discovered here on SO) to improve IE6's standards support.

Patrick McElhaney
+1  A: 

My vote goes towards Firebug. It lets you instantly play around with CSS on any webpage (yours or others!). Once you have gotten the changes you like, you can then adjust your CSS file appropriately. The only downside is you have to remember all the changes you make, so only do a couple at a time.

Bryan Denny
+2  A: 

Shog9 said:

Use Firefox + WebDeveloper toolbar + Edit CSS for initial styles.

He probably means Chris Pederick's Web Developer Firefox extension and its "Edit CSS" feature (Ctrl+Shift+E). Like MacRabbit's CSSEdit, it's not WYSIWIG, and it updates the page as you type. A problem with this type of tool is that the editor is primitive.

Web Developer :: Firefox Add-ons

Firebug :: Firefox Add-ons

+4  A: 

If you are on OS X you can try:

MacRabbit's CssEdit

On of the best WYSIWYG editor out there. Live previews and a powerful selector tool. It won Apple Design award so that counts for something.


More expensive than MacRabbit but does a lot more(extraordinary good FTP client, subversion, et cetera). Do not spend the $100 if you are only going to use if for CSS

If on Windows:

'Eric Meyer's Expressive Sculptor'

I don't use Microsoft Expression Web but if you do take a look at this.

Eric Meyer's Css Sculptor

The power here is prebuilt skeletons for your pages.

Silviu Postavaru
+1  A: 

Komodo Edit 4 on OS X - Great CSS hinting, really makes my job easier.

+6  A: 

The biggest problem with CSS and WSYIWYG is that CSS is a language that primarily defines behavior for the elements in your page - it is not a straight forward drag-and-drop kind of technology. I think a lot of frustration at CSS is that people are still migrating from table-based layouts, which a far more physical representation of your page. CSS relies more on semantic structure of HTML.

CSS layout is all about placing elements in context to the other elements around it. Being able to draw or drag elements around a screen means that such a WYSIWYG editor would either have to make a lot assumptions about your HTML structure, or limit you to certain CSS rules like absolute positioning -- both of which could be very problematic with dynamic content, which is what most of us design for.

I think a handy text editor and Firebug are your best bet for achieving CSS layouts. You're going to want to stay away from anything that uses a proprietary rendering engine (Dreamweaver). Even if you're using something like CSSEdit or TopStyle, which make it easier to write styles and see their results instantly, you're still going to need to know how CSS and box model works to be successful at it.

If you ever go and read the W3C spec, you'll see there's a fair amount of ambiguity written into it. The differences in browsers are very annoying, but it's easy to see why it happens. I've been writing CSS professionally for a few years now, and I would say about 90% of what I write works fine across most browsers on the first try. It can be frustrating, but eventually you get the hang of it and find techniques that work for most things.

Bryan M.
Bryan, can you say any more on the proprietary rendering engine in DWCS3? I posted a question regarding code for rollovers buttons; one question I asked was about some suspect code that looked like proprietary language, though this was just a guess.
+4  A: 

There's a little tool called Stylizer, formerly known as Stylespread. It's a very nice, sleek CSS editor that lets you edit in real time. It has a few nifty features like resizing elements by dragging with the mouse and things like that. It's not everything you asked for, but I think it comes fairly close.

As far as the "browser specific poo" goes, I agree with everyone that has mentioned using a reset stylesheet. This will help eliminate some of the discrepancies with default element styles for the various browsers. Standards compatibility, however, is another story.

+1  A: 

Did you check out I think it perfectly does what you want. Right click any tag in your document select it's selector, play with the css values and instantly see how the result will look like! iStylr even supports css3 so you can already use properties like multi-column, round corners, text- and box-shadows etc.


For CSS menu check here alt text