Solved

Why does DW8 display CSS horribly in it's preview window?

Posted on 2007-12-04
6
241 Views
Last Modified: 2010-04-07
I'm not great with CSS so I often use a template to start my design layout and then add to it, however DW8 throws the CSS all over the place in it's preview window. It's fine when I preview the page, but it makes it extremly awkard trying to work in this software when it doesn't look how it does online. I don't want to have to rebuild my pages from scratch in order just to get them to view correctly in 8 but it's very tempting to do so.

Does anyone have any advice? Is DW CS3 the same? I'm using CSS Drives templates so the CSS is correct. Thanks
0
Comment
Question by:signpost2
6 Comments
 
LVL 1

Assisted Solution

by:rinnej
rinnej earned 150 total points
ID: 20404444
Adobe fixed preview issues with newer versions of  Contribute regarding CSS.  
I am currently using DW8 and have no problems with it but our older version of Contribute is almost impossible to use with CSS.  I guess I'm not helping you much, but in the trial version of Contribute everything worked fine.  I would say that DW CS3 would have the same issues resolved as well but cannot speak from experience.
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 150 total points
ID: 20405281
Hi guys,

Dreamweaver CS3 still has some issues with the Design view if you have a lot of floats and clears on divs.  It appears to me that it has to do with the width of the design view window being a little smaller than average browser size and that can move stuff all over.

I use CS3, so if you want to post a sample page, I can download it and load it up and send you a screenshot of it.
0
 

Author Comment

by:signpost2
ID: 20409913
Thanks for the replies.
I tried downloading http://www.dynamicdrive.com/style/layouts/item/css-fixed-layout-31-fixed-fixed-fixed/ to use as the basic template to my layout. It was in DW8 that I noticed that if I use this particular layout the design is all over the place but fine on a browser preview. I used this layout as I thought it would contain the correct styling standards so I can start my CSS off correctly.

I can and have built a similar layout in DW8 which does look correct...at the mo but I often find that as my site develops things move out of place and I have to constantly check in different browser windows, which I know isn't a bad thing but is confusing to work with.

I hope to upgrade to CS3 shortly, but just found it odd that these tutorials tell you how to layout a page correctly so that it validates but in DW it just looks odd.

My CSS isn't great, so it can be really disconcerting when it looks odd in DW.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 20413979
I took a look at that page and the CSS and the W3C validator has some problems with it:

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.dynamicdrive.com%2Fstyle%2Flayouts%2Fitem%2Fcss-fixed-layout-31-fixed-fixed-fixed%2F

It may be that the CSS is not quite as valid as it should be and DW is having a hard time rendering it.  You might want to look for a different three column layout.
0
 
LVL 19

Accepted Solution

by:
v2Media earned 200 total points
ID: 20415998
You have to keep in mind that DW's design view does not use a standards based browser rendering engine, it's a proprietary engine. Upgrading to CS3 isn't advised if all you're looking for is improved css rendering. I find that some designs render better in DW8, some in MX2004 and a few in DW9.

If having DW render your templates accurately is an important aspect of your design process, then obviously you have to keep your designs within DW's css rendering capacity. I'd download the CS3 demo to see if your templates render any better before purchasing a full version.

What may be an advantage in upgrading is CS3's built-in templates. CS3 has a new 'File > New' dialog window that allows you to select for a wide range of layouts, both fixed and liquid. These templates can suit most projects, the code is OK and the css is well commented.
0
 

Author Comment

by:signpost2
ID: 20418644
Thanks for all your comments.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question