Dreamweaver Specific CSS?

Question

I'm using a fairly basic vertically expanding page layout in CSS, and I'm trying to adapt this layout so that my client can edit the page using templates in Dreamweaver. It's... well, rough going. I'm used to doing most of this stuff by hand, but it's working out fairly well.

I'm using a min-height trick similar to this page to get the content to expand nicely in the browser, for shorter pages viewable on large monitors. The code works perfectly in all browsers (not supporting anything older than IE7 for the site, and other browsers are fine) but Dreamweaver doesn't render the min-height properly.

I've been able to get it to work by using a .css file that only dreamweaver uses (it doesn't exist on the server) that makes it editable in dreamweaver, but if that file is committed, the magic breaks on the live site. This just feels like a dirty hack.

The quick way out, I guess, is this: is there a way to get dreamweaver to ignore a line of CSS, or to make it use a line of CSS that would be ignored by a real browser? Or, is there a way to get a min-height layout working properly in dreamweaver?

The code I'm using for this is basically the following:

Site Code:

html, body {
    padding: 0px;
    margin: 0px;        
    height: 100%;
}

body {
    position: relative;
    width: 100%;
    height: 100%;
}

#mainFrame {
    position: relative;
    min-height: 100%;
    width: 980px;
    /*center in parent*/
    margin-left: auto;
    margin-right: auto;     
}

and the code that makes dreamweaver happy:

html {
    height: 100%;
}
#mainFrame {
    height: 100%;
}

I read somewhere that Dreamweaver's layout engine was based on IE's rendering engine, which would probably explain most of the issues. I'm using CS3, and my client is using CS5, which is going to complicate things further down the line, but I'm already prepared for that. If anyone knows of a magic solution to this, I would appreciate it greatly, as I've kind of given up on it for now.

Thanks

Answer 1

i know this answer won't help.... but I personally (would) never rely on WYSIWYG-rendering.... i'm using DW CS5 myself, but only with code-view

Answer 2

I don't use Dreamweaver either, but this Adobe article on IE conditional comments might be relevant: I wonder if you can adjust the Dreamweaver preferences to load a conditional comment version string that would be ignored by a real browser.

Answer 3

I actually came up with my own answer for this, which is significant cheating, but it does work. The following utilized CSS comments to hide (from Dreamweaver) PHP code, which causes the server to spit out basically an empty file. Conditional comments are almost definitely a better way to do this, but it's still an interesting solution (I thought) and it might be useful to someone.

/* <?php if (false) { ?> */
body { /* some editor-only CSS */ }
/* <?php } ?> */