[05-20-06]

CSS and Clients w/ Dreamweaver

So, your client wants to use Dreamweaver? Yeah, I'd be scared too. Dreamweaver has always been a pain in the side of standards evangelists. I've been building sites according to W3C's standards for quite a while and have found that Dreamweaver is not the optimal tool for me to use when it comes to creating sites. I just prefer to have more control of the code, and it runs extremely slow compared to my preferred editor.


In order to keep the client from damaging the design when editing, I used Dreamweaver's templates (dwt). That seemed to be an obvious solution to that issue. When I finished developing the layout of the site and it tested it in Firefox, IE, Opera, and Safari, I looked at it in Dreamweaver MX (the version of Dreamweaver that the client was using) and it sucked. Objects were overlapping, image replacements weren't always working, it was a nightmare. They couldn't upgrade because it was a large scale company and it would have been a big ordeal for them. The last thing I wanted to do was code the site all over again using tables. I did a bit of searching to try and come up with an idea but I didn't find any. So, I started looking into other ways to make this work.


For the purpose of this article, I am going to use this site, CreativeRuin.com, as an example. Take a look at how it looks in Dreamweaver MX, Dreamweaver MX 2004, and Dreamweaver 8. I am glad to say that Dreamweaver 8 seems to be working a lot better than the other two, but since my client is using Dreamweaver MX, I have to make it work in there.


There have been some mentions of Macromedia borrowing from Opera's rendering engine in the MX 2004 version, but it seems like the bulk of Dreamweaver's rendering engine has been built on their own. Dreamweaver didn't seem to have any proprietary conditional code that would help and it doesn't seem to render IE's Conditional Comments either. So, I started looking at what Dreamweaver does render. I found that Dreamweaver, at least from MX to version 8, renders some of the same bugs as IE does. Such as the * html rendering bug. It can also render more advanced selectors such as html>body, which PC IE versions 6 and below can't. Since the client would only be editing the content area of the site anyways, they only need to see that section. It's formatting is pretty simple and they shouldn't run into all the layout issues the rest of the site.


So here's the solution

  1. First, attach this code to the head of your html document.
    2. <link href="dreamweaver.css" type="text/css" rel="stylesheet" media="screen" />
  2. Next, create Dreamweaver.css. This file contains one line of code: @import url('dmx_fix.css'); Keep in mind, @import url('dmx_fix.css'); does render in PC IE but it does not render in Mac IE.
  3. And finally, create dmx_fix.css. This file contains the CSS that cleans up the display: * html>body { position:relative; } * html>body #container-wrapper { display:block !important; width:10px !important; height:10px !important; position:absolute !important; left:-900 !important; top:0 !important; } * html>body #container-wrapper #pagecontent { position:absolute !important; left:910 !important; top:10 !important; width:369px !important; background:#fff; } Note that the left property of the container-wrapper is 10 less than the left property of the pagecontent.

The * html>body selector {} normally would only apply to Mac IE, but since I used the @import url('dmx.css'); which doesn't render in Mac IE, both of them combined only render in Dreamweaver (as far as I know). Essentially, I'm hiding all of the elements of the site from Dreamweaver except the content the client needs to edit. I'm also keeping the properties of the content container the same, such as the width, so it matches the site as it looks in the browser and there are no surprises once the file is published.


Take a look at the results.


What do you think of this approach? Would you find this acceptable or would you have re-coded the site with tables and not followed the semantic approach?

elQueFaltaba

May,20,2006 05:20

I'm really impressed. I use to include a note on the client contract to avoid them from touching anything in the code, and probably, make back-end publishing via several forms, etc .. but its very true dreamweaver makes things ugly sometimes, and if the client uses this to edit pages, it's not so easy for them to do so.

Great technique there .. gotta try it myself .. thank you!

Wayde Christie

May,21,2006 05:18

I'd be interested to see if this approach works with Contribute. That would be an even better reason to use it, because I imagine far more clients are likely to be using Contribute.

Cheers!

Chad Calhoun

May,21,2006 07:14 | Author's Comment

@elQueFaltaba: Normally I would suggest using a CMS, but the client insisted they use Dreamweaver. The end result wasn't that bad though. Actually, the client's site looked a lot worse in Dreamweaver than mine since it was a 3 column layout. Thank you for your praise, and I'm glad if this can help.

@Wayde Christie: I did a quick search in google and found a page regarding Contribute on Macromedia/Adobe's site that says it has an "Identical HTML authoring engine." (referring to Dreamweaver). I would have to assume that Contribute would render this the same. If you give it a shot, drop a line here and let me know how it turns out.

Kevin Sweeney

August,09,2006 02:24

Great article.

I find that there is nothing wrong with Dreamweaver as long as you aren't using it as a WYSIWIG editor. People at my last job would see me using it and get on my case about it, but I was still writing standards-compliant sites while they were using Homesite and still coding in UPPER CASE and screaming bloody murder whenever they came across a <div> tag *rolls eyes*

Although the ability to collapse code would be nice to have, it still has syntax highlighting, great autocompletion, and (most importantly) the ability to upload the file to my site with a simple key command (which it seems Notepad++ lacks.)

Still, the ability to edit any file in one centralized location is convenient.

Chad Calhoun

August,09,2006 10:18 | Author's Comment

@Kevin: Thanks for the praise. I used to use Dreamweaver for coding but the slow loading time and all the extra features that I didn't use made it too much of a pain for me. I'm happy to use Filezilla for ftp. However, one thing that Dreamweaver has done REALLY well is their auto-completion when </ is entered. I would love it if Notepad++ implemented that.
Leave A Comment