Adobe Dreamweaver CSS rendering bug

by Matthew James Taylor on 22 July 2008

Adobe Dreamweaver CSS rendering bug
Dreamweaver bug

I have recently been made aware that some of my liquid-layouts don't display properly in Adobe Dreamweaver's built-in preview. A big thank you to everyone who alerted me to the problem. This is only a minor thing and it only affects developers who view my liquid-layouts with Dreamweaver's built in WYSIWYG editor. If you only use the 'code-view' mode then everything will be fine. If you do need to preview your website during development then I suggest you open your HTML files in a real browser to see exactly what they look like, you just cannot trust WYSIWYG editors to be correct when you are using tricky CSS layout techniques. I always code everything by hand and I have all the major browsers installed on my Mac so I can test thoroughly throughout development. If you are serious about web design then this is the surest way to success.

Just to be clear, this problem does not affect visitors to your website, only web developers using my liquid-layouts in Dreamweaver.

Screenshots of the rendering bug

A big thank you to Adrián L. Cogliano from Argentina who sent through the following screenshots of the rendering bug in action. Click each thumbnail for a larger image.

After looking at the screenshots I have a pretty good idea what's causing the bug. It looks like Dreamweaver adds borders and visible 'handles' to all the elements of a layout so they are editable, this slightly changes the size of all elements including the main structural divs. Changing the widths of these divs is upsetting the delicate structure of the design and causing it to display incorrectly. In addition to this, some of the divs in my design are located off the page outside of the browser viewport and in an attempt to make these visible and editable it looks like Dreamweaver moves them from their correct position, this also damages the layout.

I can't see a way to get around this problem except for not using the built-in preview in Dreamweaver. Checking layouts in a real browser is the only way to go.

Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor