Solved

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

Posted on 2007-12-04
6
232 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

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…
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

762 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now