Solved

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

Posted on 2007-12-04
6
239 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
What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
bootstrap footer centering and expand problems 7 42
Make navigation bar highlight the page you are on. 1 19
Input box gone wrong 8 24
Change Background Color of Website 5 17
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

809 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