Macromedia’s Dreamweaver WYSIWYG mode is a bundle of fun, as base10solutions has just discovered during the development of a website that was going to be maintained by the client using Dreamweaver.
The layout was pixel perfect in most browsers using CSS — screenshots of both renderings follow (WARNING: Not for the faint hearted!)
Here, taken from a normal web browser (it’s Firefox, but renders the same in IE, so whatever):
And here, in (apparently) WYSIWYG mode:
The code was exactly the same.
Yeah, I don’t think CSS layouts have ever displayed properly in Dreamweaver. That’s one of the reasons I ditched it. I was hoping they’d have fixed it by now.
Ben’s right, Dreamweaver just wasn’t designed for it’s WYSIWYG mode to be compatible with CSS layouts. As for why, presumably because it’s so heavily HTML oriented with tables, etc, they just didn’t feel a need to make WYSIWYG compatible with CSS layouts. I guess they just didn’t think people would use Dreamweaver to design their sites using div markup.
I have to second Ben as well DW just doesn’t handle CSS layouts very well despite of Macromedia’s claim of great CSS support.
IMO Stylemaster, Westciv’s CSS editor has a great preview mode, give it a try.
Which browser’s version of CSS display would you have DW display? IE v5, 6 etc, Opera version X, Firefox version X, JAWS? Which operating systems? Should DW have to issue an upgrade if a new browser version is released, a new operating system version?
While it may be true that this CSS layout displays the same in several target browsers, most don’t. I greatly prefer to “preview” the page in the target audience’s browser(s)/operating system and just refresh with F5 in that browser(s)‘s window during development. That way I know I’m seeing what my client, and their clients are seeing.
I’m not a CSS purist, after taking 2 months to attempt to create a CSS only, 3 column liquid display that adjusted to diffferent font sizes I decided it wasn’t worth it for forseeable future projects. Most of my work is in data display so tables still work best for me. Plus, it seems to me that most designers use CSS to recreate very “table” looking layouts so why not use a table in the first place?
Dreamweaver merely needs competent, not flawless, CSS rendering, in this circumstance.
Ideally, however, it would meet the W3C’s “version” of CSS rather than any browser’s implementation, and function in a true WYSIWYG mode that permits the designer using it to rapidly develop and deploy semantically correct, accessible, and graphically effective websites across all platforms, using appropriate hacks to ensure browsers display the site correctly. Of course, this may be criticised as a pipe-dream, but it is perhaps inevitable. Increasingly the Internet is realising the futility of table-based design, due to its cumbersome and overweight markup, pathetic rendering on a burgeoning range of handheld devices, and inherent accessibility issues for vision impaired users.
The reasons not to use table based layouts are endless — Dive Into Accessibility is a great starting point in developing an understanding of exactly why.
There is no such thing as a “table looking layout.” That is only a result of years of bad practice laying out web pages.
After years and years of using tables to lay out web pages, I can see why people think in this manner. They see a web page layout, and they can immediately “picture a table” underneath it.
This is the trend that continues… when will web developers realize that tables are bad for layout??
Tabular data — by all means, table away! But, for positioning, placement, layout — CSS is very powerful in those regards. Learn it. Use it.
(Sorry for this brief rant)