No CSS Design View?

I'm a guy that usually likes to style apps using an external CSS and selecting a component to style, and having a way to add that component's properties/styles to edit.
Flash Builder 4 has done away with this, but to me it feels like it's going BACKWARDS.. but it's probably something I'm missing, so I'd appreciate the way people are using it...
So right now it seems like I can set styles ON a component, and then MOVE it to the existing CSS file I have, but I want to make sure that this doesn't leave ANYTHING within the code view that is styled? I tested it and it seemed to leave backgroundColor in the mxml declaration.
On top of that, there's no autocomplete for any CSS in the CSS view?
Just seems for CSS view you're somewhat stuck to doing it all by hand again...

What SDK version are you using?
Let me start with the easy questions.
Autocomplete in CSS
Code hinting is supported in the CSS editor. If you're in a Flex 4 project, make sure you're using namespace qualified type selectors http://opensource.adobe.com/wiki/display/flexsdk/CSS+Namespaces+Support. That's the typical problem people have during the transition.
CSS Design View
There are a few reasons why CSS Design View isn't supported for Flex 4. Flex 4 skinning, in many cases, replaces CSS styles. For example, backgroundColor isn't supported for every component. For more information, see http://opensource.adobe.com/wiki/display/flexsdk/More+Styles+for+Spark+Skins or the Flex 4 reference http://help.adobe.com/en_US/flex/using/index.html. CSS Design View is supported for SDK 3 projects, but not for SDK 4.
Can you explain in more detail what you mean about setting styles on a component and moving them to a CSS file? Sounds like you're using Design view to set styles in MXML then convert them to CSS declarations. This should be fine since Design view should only let you set valid style properties.
Jason San Jose
Software Engineer, Flash Builder

Similar Messages

OpenType fonts in Design View.

Hi
just wondering if I should be able to see OpenType font's in
the text selection dialog box in the CSS design view in Flex
Builder 3?

I am having THE SAME PROBLEM. It's making design nearly impossible. Has anyone a solution to this? I want to see Myriad Pro and not Times New Roman or Georgia in my design mode in Flex 3. After compiling, I can see the embedded font read from my css, but i still only see a default font while in design mode in flex.

Design View and a CSS Div layout page

There are a few pages l
ike this. I am assuming it is because everything is layed out w
ith div tags, but there mush be a way to correct the desging view. Everything shows up great o
nline. Here is a screenshot:
Here is the code:
<body onload="initHomePage(); addReferToLinks();">

<script type="text/javascript" src="/shared_assets/toolbar_v2/toolbar.js"></script>

<img src="/profile/image/logo_linknet.gif" />

<form name="frmSearch" action="" method="get" title="Resources" class="scopedSearch">
       <input class="textInput" name="qt" value="THIS SECTION ONLY" id="searchField" size="20" />
       <input class="button" type="submit" value="Search" name="submit" />
       <input type=hidden name="col" value="mpr dno dnos1" />
</form>
    <div id="main">

<div id="newsBox" class="box">
   <div class="boxHeader">
    <div class="headerLeft"><h2>MP News</h2></div>
    <div class="headerRight"><a href="/news/news/index.htm" class="more">more »</a></div>
   </div>
   <div class="boxContent">
    <h3>
     <script type="text/javascript">var x=new Date(); document.write(x.toLocaleDateString());</script>
    </h3>
    <div id="newsContent">
     <div class="loading">
      Loading...
     </div>
    </div>
    
    <h3>My Subscriptions</h3>
     <ul style="list-style-type:none;">
      <li><a href="http://rss/">Setup Subscriptions - Get Help</a></li>
      <li><a href="http://">View Subscriptions</a></li>
     </ul>
    
    <div class="imgFrame"><a href=""><img src="image/mc_logo2.jpg" alt="Media Center" hspace="0" vspace="0" border="0" /></a></div>
    
    <div class="imgFrame"><a href="http/"><img src="image/columns.gif" hspace="0" vspace="0" border="0" alt="The Northwestern Columns" /></a></div>
   </div>
</div>


<div id="content">
   
   
   <div id="alert" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft"><h2>Important Notice</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div id="alertContent" class="boxContent">
     <div class="article">
      <a href="" class="headline">Avoid lock out - Install LINK 22.2 now</a>
      Users who do not install LINK 22.2 before the version enforcement date of July 31 will be
      unable to access their PCs.
     </div>
    </div>
   </div>
            <div id="home_page_id">) Home Page</div>
   
   <div id="activities" class="box highlightBox">
    <div class="boxHeader">
     <div class="headerLeft">Welcome<span id="username"></span><h2>What would you like to do?</h2></div>
     <div class="headerRight"> </div>
    </div>
    <div class="boxContent">
     <div style="width:100%;">
      <ul>
       <li><a title="Find information and tools for recruiting new representatives" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Recruiting: <select style="font:message-box; width:19em;" onchange="if(this.value){window.navigate(appendReferer(this.value))};">
         <option name="selectRecruit" selected="selected">*** make selection ***</option>
         <option value="http.htm">Sourcing & Prospecting</option>
         <option value="http://.htm">Selecting & Assessing Candidates</option>
         <option value="http://_process.htm">Post Acceptance Process</option>
         <option value="http">Developing an Internship Program</option>
         <option value="http.htm">Tracking Activity, Results & Accountability</option>
         <option value="http://.htm">Recruiter Development</option>
        </select></a></li>
       <li><a href="/objective/mpr_secure/mp_ldorgdev.htm" title="Find information and tools for developing leaders in your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Leadership & Organizational Development </a></li>
       <li><a href="/objective/mpr_secure/mp_supvsn.htm" title="Find information and tools for effective supervision" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Supervision</a></li>
       <li><a href="/objective/mpr_secure/mp_stfop.htm" title="Find information and tools for   managing your office" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Staffing & Operations</a></li>
       <li><a href="/objective/mpr_secure/mp_plnperform.htm" title="Find information and tools for business planning and performance monitoring" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Planning & Performance</a></li>
          <li><a href="/objective/mpr_secure/mp_mngmntcompben.htm" title="Find information regarding income, fees, expenses, allowances and benefits" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Management Compensation & Benefits</a></li>
          <li><a href="/objective/mpr_secure/mp_repdev.htm" title="Find information and tools regarding mentoring and professional growth" onmouseover="showTooltip(this);" onmouseout="hideTooltip(this);">Representative & Specialist Development</a> </li>
      </ul>
      <div id="slideshow1" class="activitySlideshow" style="height:212px;">
       <img src="image/slideshow_photos/photo06.jpg" />
       <img src="image/slideshow_photos/photo07.jpg" />
       <img src="image/slideshow_photos/photo08.jpg" />
       <img src="image/slideshow_photos/photo09.jpg" />
       <img src="image/slideshow_photos/photo10.jpg" />
      </div>
     </div>
    </div>
   </div>
   
   <div class="leftColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Events Calendar</h2></div>
     </div>
      <div class="boxContent"><ul>
      <li>April 25-30<br />
     <a href="http_020110.htm" target="_blank"></a></li>
     <li>May 12-14<br />
     <a href="http://030510.htm" target="_blank"></a></li>
       <li>June 16<br />
     <a href="http://.htm" target="_blank">Series conversation</a></li>
                      </ul>
      </div>
    </div>
     
     <div class="box">
      <div class="boxHeader">
       <div class="headerLeft"><h2>Spotlight</h2></div>
       <div class="headerRight"> </div>
      </div>
      <div class="boxContent">
              <div class="article">
      
   <div class="headline"><a href="http.htm?tern Mutual Association dues decline form available</a> </div>
     The $25 association membership fee will be charged to June 30 home
     office supply bills. Representatives who wish to decline membership
     may submit a <a href="http://.htm" target="_blank">decline
     form</a>.
<div class="headline"><a href="http://.htm">Surplus notes information available</a> </div>
     Find answers to common questions and hear insights from about the company’s recent surplus notes offering.
                          <div class="headline"><a href="http://.htm">Stay up to date on 2010 estate tax repeal </a> </div>
     Consider the new Estate Tax Repeal page on LINKnet “home base” for information on the 2010 repeal and resources to use when talking to clients about this topic.
              <div class="headline"><a href="http/index.htm">Withstanding Market Challenges</a> </div>
     Access resources to highlight the company’s strength and stability, find sales strategies and share marketing and market-related materials to help address client concerns.
              <div class="headline"><a href="http:///year.htm">Dividend resources available</a> </div>
     The Current Year Scale page on LINKnet provides the latest information
     and sales support materials based on the 2010 dividend announcement.

               </div>
      </div>
     </div>
   </div>
   <div class="rightColumn">
   
    <div class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Approaching Deadlines</h2></div>
     </div>
     <div class="boxContent">
       <ul>
<li>April 30: <a href="http.htm">Submit 2010 Commitment to Excellence Award nbominee</a></li>
       <li>May 25: <a href="http.htm">Submit applications for Intern Community Service Award</a></li>
                      <li>June 30: <a href="http://pdf">Submit 2010 Managers Membership Award Application to NAIFA</a> <img src="/shared_assets/image/doc_icons/pdf.gif" alt="PDF File" /></li>
                      </ul>
      </div>
    </div>
    
    <div id="techalerts" class="box">
     <div class="boxHeader">
      <div class="headerLeft"><h2>Priority Tech Alerts</h2></div>
      <div class="headerRight"><a href="http://.htm" class="more">more »</a></div>
     </div>
     <div class="boxContent">
      <div class="loading">
       Loading...
      </div>
     </div>
     <iframe name="techalerts" src="/statusdisplay/001_summary.htm" onreadystatechange="if(this.readyState=='complete'){this.previousSibling.innerHTML = formatTechAlert(frames['techalerts'].document.body.innerHTML);}"></iframe>
    </div>
   </div>
</div>

Dreamweaver is pretty good these days at showing the page in Design View how it will be viewed when online. HOWEVER having said that it does largely depend on the way you write the css.
I guess for Dreamweaver it's impossible for it to show every concievable way you can write css correctly. Unfortuantely if your css is not compatible with what Dreamweaver likes it won't make a great job of rendering the site correctly in Design View, that's always been the case.
The css is not wrong but I've seen many display issues in Dreameaver Design View caused as a direct result of the css being overly complex to crack simple presentation. I guess it's in the lap of the gods if you are fortunate enough to have found the way to write css that Dreamweaver likes.

CSS Changes not showing in Design View

I'm just coming over from GoLive (and their layout grid) so
I'm not entirely familiar with DreamWeaver CS3 and CSS.
However, whenever I make changes in a CSS sheet (and save
them) they are not immediately rendered in the Design View. They
show up just fine if I "Preview in Browser" though. I can even
close the html page and reopen it and sometimes they will show up,
but not usually. Oh, and the "Refresh Design View" button is greyed
out and doesn't do anything.
Thanks,
Dan

Yes, that seems to be the case. I ran a validation check on
the html page (it was coded in XHTML 1.0 strict) and came up with 2
errors related to the CSS features I was trying to use.
Thanks!

CSS is not showing in design view

Hello, I wonder if anyone can help. I would appreciate very
much if you can... I have read all the css related problems, but
did not see the problem I am having.
Anyway, I have done a website template for someone and I gave
it to him to update the contents. However, on his dreamweaver
Design view, the css does not support it at all so it looks all
messy. Though when he preview it on IE, this is all fine. I have
made templates and css files with dreamweaver and I can view
everything fine. He seems to have the same version of DW (MX 2004)
so I am not sure how this happens. We were looking in everything
(including goofy css as someone says on this forum), but have no
luck so far. Here is my link and I pasted my css here.
http://www.norithefish.com/index2.html
Many thanks for this.
Noriko
/* HTML tag styles */
body
{background: #cccccc; font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: small; color: #000000; font-weight: normal}
a { color: #333333; text-decoration: none }
a:active { color: #666666; text-decoration: none }
a:hover { color: #CC3300; text-decoration: underline }
.bodytext { font-size: small; color: #000000; font-weight:
normal}
.smalltext { font-size: x-small; color: #000000; font-weight:
normal}
.smalltextw { font-size: x-small; color: #ffffff;
font-weight: normal}
.title{ font-size: 1.5em; font-weight: bold; color: #CC3300}
.wbracket{ font-size: small; font-weight: normal; color:
#ffffff}
.smalltitle { font-size: 1em; font-weight: normal; color:
#666666}
.sub { font-size: small; font-weight: bold; color: #ffffff }
.foot { font-size: x-small; font-weight: normal; color:
#000000}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #cc3300
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.15em;
color: #cc3300
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #666666
ul{
list-style-type: square;
ul ul{
list-style-type: disc;
ul ul ul{
list-style-type: none;
/* Layout Divs */
#pageNav{
float: left;
width:21.3%;
top:10px;
padding-left: 0px;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
#content{
width:75%;
float: left;
padding: 0px 0px 0px 0px;
margin: 0px 0px 1px 20px;
/* Component Divs */
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
/************** feature styles *****************/
.feature{
padding: 0px 0px 0px 0px;
font-size: 100%;
/************* #siteInfo styles ***************/
#siteInfo{
clear: both;
font-size: 100%;
background-color: #999999;
padding: 0px 0px 0px 0px;
border-top: 1px solid #666666;
/************* #smalltitle styles ***************/
#smalltitle{
clear: both;
background-color: #ffffff;
font-size: 100%;
padding: 0px 0px 0px 0px;
border-top: 1px solid #CC3300;
border-bottom: 1px solid #CC3300;
/*********** #sectionLinks styles ***********/
#sectionLinks{
position: relative;
width: 150px;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
#sectionLinks a:link{
font-size: 1.15em;
padding: 2px 0px 5px 10px;
border-top: 1px solid #cccccc;
width: 100%;
width: auto;
#sectionLinks a:visited{
font-size: 1.15em;
border-top: 1px solid #cccccc;
padding: 2px 0px 5px 10px;
#sectionLinks a:hover{
font-size: 1.15em;
border-top: 1px solid #cc3300;
background-color: #dddddd;
padding: 2px 0px 5px 10px;
/*********** .frame styles ***********/
.frame {
width: 700px;
left: 50%;
padding-top: 0px;
margin-left: -350px;
margin-top: 0px;
position: absolute;
visibility: visible;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
border-left: 1px solid #999999;
background-color: #ffffff;
.bg {
height: 1px;
background-color: #cccccc;
width: 100%;
/*********** #pageNav link styles ***********/
#pageNav ul a:link, #pageNav ul a:visited {display: block;}
#pageNav ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level
anchors in lists */
#pageNav li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #pageNav li {border-bottom: none;}
/********************* end **********************/

> *** you are missing <li> at the beginning of the
line and </li> at the end
> or you want to remove the </li> from the previous
lines.
Or move the image within the existing pair. You cannot have
that
construction, though -
<li>blah</li>
<img>
<li>blah</li>
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"josie1one" <[email protected]> wrote in message
news:[email protected]...
> It sounds to me as if it's a path issue.
> Your path is this:
> <link rel="stylesheet" href="styles/inside.css"
type="text/css">
>
> Does he have a folder called "styles" within which
should be the
> stylesheet?
>
> You have a couple of code problems (I'd say unrelated to
your question).
> <li><a href="1-about.html">Order your Tshirt
</a></li>
> <img src="ferrari_team_polo.jpg" alt="photo of a
T-shirt" width="120"
> height="180">***
> <li><a href="1-about.html">Order your
cap</a></li>
> <img src="ferrari_cap.jpg" alt="photo of a cap"
width="120"
> height="75"><br>***
>
> *** you are missing <li> at the beginning of the
line and </li> at the end
> or you want to remove the </li> from the previous
lines.
>
> and according to
>
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.norithefish.com%2Findex2.html
>
> you have an extra </div> a couple of lines above
the </body>
>
>
> --
> Jo
>
>
>
>
>
> "norithefish" <[email protected]> wrote
in message
> news:[email protected]...
>> Hello, I wonder if anyone can help. I would
appreciate very much if you
>> can...
>> I have read all the css related problems, but did
not see the problem I
>> am
>> having.
>>
>> Anyway, I have done a website template for someone
and I gave it to him
>> to
>> update the contents. However, on his dreamweaver
Design view, the css
>> does not
>> support it at all so it looks all messy. Though when
he preview it on IE,
>> this
>> is all fine. I have made templates and css files
with dreamweaver and I
>> can
>> view everything fine. He seems to have the same
version of DW (MX 2004)
>> so I am
>> not sure how this happens. We were looking in
everything (including goofy
>> css
>> as someone says on this forum), but have no luck so
far. Here is my link
>> and I
>> pasted my css here.
>>
>>
http://www.norithefish.com/index2.html
>>
>> Many thanks for this.
>> Noriko
>>
>> /***********************************************/
>> /* HTML tag styles */
>> /***********************************************/
>>
>> body
>> {background: #cccccc; font-family: Verdana, Arial,
Helvetica, sans-serif;
>> font-size: small; color: #000000; font-weight:
normal}
>>
>> a { color: #333333; text-decoration: none }
>>
>> a:active { color: #666666; text-decoration: none }
>>
>> a:hover { color: #CC3300; text-decoration: underline
>>
>> .bodytext { font-size: small; color: #000000;
font-weight: normal}
>>
>> .smalltext { font-size: x-small; color: #000000;
font-weight: normal}
>>
>> .smalltextw { font-size: x-small; color: #ffffff;
font-weight: normal}
>>
>> .title{ font-size: 1.5em; font-weight: bold; color:
#CC3300}
>>
>> .wbracket{ font-size: small; font-weight: normal;
color: #ffffff}
>>
>> .smalltitle { font-size: 1em; font-weight: normal;
color: #666666}
>>
>> .sub { font-size: small; font-weight: bold; color:
#ffffff }
>>
>> .foot { font-size: x-small; font-weight: normal;
color: #000000}
>>
>>
>> h1 {
>> font-family: Verdana, Arial, Helvetica, sans-serif;
>> font-size: 1.5em;
>> color: #cc3300
>> }
>> h2 {
>> font-family: Verdana, Arial, Helvetica, sans-serif;
>> font-size: 1.15em;
>> color: #cc3300
>> }
>> h3 {
>> font-family: Verdana, Arial, Helvetica, sans-serif;
>> font-size: 1em;
>> color: #666666
>> }
>>
>> ul{
>> list-style-type: square;
>> }
>>
>> ul ul{
>> list-style-type: disc;
>> }
>>
>> ul ul ul{
>> list-style-type: none;
>> }
>>
>>
>> /***********************************************/
>> /* Layout Divs */
>> /***********************************************/
>>
>> #pageNav{
>>
>> float: left;
>> width:21.3%;
>>
>> top:10px;
>> padding-left: 0px;
>> border-bottom: 1px solid #cccccc;
>> border-right: 1px solid #cccccc;
>> }
>>
>> #content{
>> width:75%;
>> float: left;
>> padding: 0px 0px 0px 0px;
>>
>> margin: 0px 0px 1px 20px;
>>
>> }
>>
>>
>> /***********************************************/
>> /* Component Divs */
>> /***********************************************/
>> #siteName{
>> margin: 0px;
>> padding: 16px 0px 8px 0px;
>> color: #ffffff;
>> font-weight: normal;
>> }
>>
>>
>> /************** feature styles *****************/
>>
>> .feature{
>> padding: 0px 0px 0px 0px;
>> font-size: 100%;
>>
>>
>> }
>>
>>
>>
>> /************* #siteInfo styles ***************/
>>
>> #siteInfo{
>> clear: both;
>>
>> font-size: 100%;
>> background-color: #999999;
>> padding: 0px 0px 0px 0px;
>> border-top: 1px solid #666666;
>> }
>>
>> /************* #smalltitle styles ***************/
>>
>> #smalltitle{
>> clear: both;
>>
>> background-color: #ffffff;
>> font-size: 100%;
>> padding: 0px 0px 0px 0px;
>> border-top: 1px solid #CC3300;
>> border-bottom: 1px solid #CC3300;
>>
>> }
>>
>>
>>
>> /*********** #sectionLinks styles ***********/
>>
>> #sectionLinks{
>> position: relative;
>> width: 150px;
>> margin: 0px;
>> padding: 0px;
>> border-bottom: 1px solid #cccccc;
>> font-size: 90%;
>>
>> }
>>
>>
>>
>> #sectionLinks a:link{
>> font-size: 1.15em;
>> padding: 2px 0px 5px 10px;
>> border-top: 1px solid #cccccc;
>> width: 100%;
>>
>> width: auto;
>> }
>>
>> #sectionLinks a:visited{
>> font-size: 1.15em;
>> border-top: 1px solid #cccccc;
>> padding: 2px 0px 5px 10px;
>> }
>>
>> #sectionLinks a:hover{
>> font-size: 1.15em;
>> border-top: 1px solid #cc3300;
>> background-color: #dddddd;
>> padding: 2px 0px 5px 10px;
>> }
>>
>>
>>
>>
>> /*********** .frame styles ***********/
>> .frame {
>> width: 700px;
>> left: 50%;
>> padding-top: 0px;
>>
>> margin-left: -350px;
>> margin-top: 0px;
>> position: absolute;
>> visibility: visible;
>>
>> border-top: 1px solid #999999;
>> border-bottom: 1px solid #999999;
>> border-right: 1px solid #999999;
>> border-left: 1px solid #999999;
>> background-color: #ffffff;
>> }
>> .bg {
>> height: 1px;
>>
>> background-color: #cccccc;
>> width: 100%;
>> }
>>
>> /*********** #pageNav link styles ***********/
>>
>> #pageNav ul a:link, #pageNav ul a:visited {display:
block;}
>> #pageNav ul {list-style: none; margin: 0; padding:
0;}
>>
>> /* hack to fix IE/Win's broken rendering of
block-level anchors in lists
>> */
>> #pageNav li {border-bottom: 1px solid #EEE;}
>>
>> /* fix for browsers that don't need the hack */
>> html>body #pageNav li {border-bottom: none;}
>>
>> /********************* end **********************/
>>
>>
>>
>>
>
>

Cannot view css styles in design view

Is there a way to get Dreamweaver to display style in design
view when the css files are in virtual folders?
Have tried using ASP (Vbscript) snippet to write in the
server URL and using Liveview, but still doesn't display. It
appears that DW only recognizes hard coded relative links or hard
coded full URLs.
Browser displays these documents with no errors.
Please Help! I have users who will be confused attempting to
edit the documents without visible style, and need to use the
virtual folders.
Thanks.
Sean

> Is there a way to get Dreamweaver to display style in
design view when the
> css
> files are in virtual folders?
Try using Design Time Stylesheets.
Open the Design-Time Style Sheets dialog box by doing one of
the following:
1. Right-click in the CSS Styles panel, and in the context
menu select
Design-time, or
2. Select Text > CSS Styles > Design-time.
Regards
John Waller

Centre not working in Dreamweaver Design View (CSS+HTML)- Preview OK- help!

Hi there
I am having a slight problem with DW which I have had before, and fixed, but I cant for the life of me remember how I fixed it. So any help is much appreciated.
I am producing a proof site for a client and cannot load it to be live just yet so sorry for any inconvience but I have taken some screen shots and will paste code/html.
The site is currently sitting like this in the design view of DW
[IMG]http://i1200.photobucket.com/albums/bb323/SKH_Design/Picture1-1.jpg[/IMG]
Which it usually doesnt.... its usually centred within the design view!!
this is how it sits in the preview
[IMG]http://i1200.photobucket.com/albums/bb323/SKH_Design/Picture2.png[/IMG]
My main page container is margin left auto and so is the margin right.
(please excuse my experiment with the drop shadow behind the main container)
please excuse me if anything is messy, im pretty new to this!!
Thanks, Sarah
Code -
<style type="text/css">
    
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body leftmargin="float">
<div class="shadow">
<div class="pagecontainer">
            
            <div class="topbarcontainer"><img src="images/pb-topbanner.jpg" width="800" height="126"></div>
                    <div class="navigationbar"> <img src="images/pb-linkbar1.jpg" width="353" height="34"><img src="images/pb-linkbar2home.jpg" width="87" height="34"><img src="images/pb-linkbar3products.jpg" width="198" height="34"><img src="images/pb-linkbar4offers.jpg" width="161"                                                                                                                                                                                                 height="34"></div>
                            
                            
                            <div class="flashcontainer">
                            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="257" id="FlashID" title="paulburtonflash">
                                <param name="movie" value="flashfiles/paulburtonflash.swf" />
                                <param name="quality" value="high" />
                                <param name="wmode" value="opaque" />
                                <param name="swfversion" value="6.0.65.0" />
                               <param name="expressinstall" value="Scripts/expressInstall.swf" />
                                
                                
                                <object type="application/x-shockwave-flash" data="flashfiles/paulburtonflash.swf" width="800" height="257">
                              
                              <param name="quality" value="high" />
                              <param name="wmode" value="opaque" />
                              <param name="swfversion" value="6.0.65.0" />
                              <param name="expressinstall" value="Scripts/expressInstall.swf" />
                              
                              <div>
                                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                            </div>
                              
                            </object>
                                
                              </object>
                            </div>
                            
                   
                   <div class="mainbackground">
                   
                    <div class="homepagetext">
                    Established in 1980, we are a drinks wholesale business, based in the Scottish Borders which prides itself on being able to provide alcoholic and soft drinks in whatever quantity you require at outstanding prices and on time.<br><br>
We deliver 7 days a week and offer a free, prompt delivery service, by our own staff in the Borders, East Lothian and Midlothian.<br><br>
<div class="textspacer1"></div>
<div class="textsixe16">We have regular promotions - click here to view our latest special offers</div>
                    </div>
                    
                    <div class="homepageimage">
                    <img src="images/pb-home-mainimage.jpg" width="328" height="219"></div>
                    </div>
      <div class="bottombar">
              <div class="bottombartext">
                Paul Burton Drinks Wholesale, Pinnaclehill Industrial Estate, Kelso, Scottish Borders, TD5 8DW
            </div>
      </div>
</div>
</div>
</body>
</html>
CSS -
@charset "UTF-8";
/* CSS Document */
.shadow{
width:840px;
margin-left:auto;
margin-right:auto;
background-image:url(../images/editableshadow.png);
background-repeat:repeat-y;
.pagecontainer{
    width:800px;
    height:auto;
    margin-right:auto;
    margin-left:auto;
.topbarcontainer{
    width:800px;
    height:126px;
.navigationbar{
    width:800px;
    height:34px;
    float:left;
.flashcontainer{
    width:800px;
    height:257px;
    float:left;
.mainbackground{
    width:800px;
    height:349px;
    float:left;
    background-image:url(../../CL%20-%20New%20Ideas/Images/pb-home-background.jpg);
    background-repeat:no-repeat;
.homepagetext{
    width:372px;
    height:275px;
    float:left;
    margin:50px 0px 0px 50px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#FFF;
.textsixe16{
    font-size:16px;
    font-weight:bold;
.textspacer1{
    height:15px;
    width:5px;
    color:#d6f3fc;
.homepageimage{
    width:328px;
    height:219px;
    float:left;
    padding:50px 0px 0px 20px;
.bottombar{
    width:800px;
    height:59px;
    float:left;
    background-image:url(../../CL%20-%20New%20Ideas/Images/pb-home-bottombar.jpg);
    background-repeat:no-repeat;
.bottombartext{
    width:600px;
    height:17px;
    float:left;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    padding:25px 0px 0px 50px;

"<body leftmargin="float">"
Can you say what that's doing? "float" is not a legal value for the leftmargin style, which requires an integer value. But its use is deprecated in favor of CSS anyhow.
Your pasted code is lacking a doctype or anything that would normally be above that stylesheet link. Is that just an oversight or is it really not there?

Design View Quarks With CSS Code

Alright I have a somewhat complicated situation to explain here so I'll try and simplify this. Basically, I'm seeing the most erratic behavior when attempting to add padding to this ordered list and looking at it in Design View. Example code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<ol style="padding-left: 10px;">
    <li>stuff</li>
    <li>things</li>
</ol>
</body>
</html>
Now BEFORE I added that css style into the ol tag, the ordered list was all nice and indented. AFTER I add a style to it, it gets sucked up all the way to nearly touching the left edge of my page now except those 10px (I do have to say, that ruler in DW is nice for this sort of thing) as if it's forgotten any other kind of indentation at all. What is strange to me is that if I save the file and load it in a browser, indentation is normal . If I close the file in Dreamweaver and open it again, spacing is fine. Why is it doing this?
Picture below shows what happens when I first introduce the code and then after I've saved and reopened the document.

Interesting. I think you're right about the quirks mode. Once I specify the doctype at the top, it looks consistent everywhere...with almost no padding. That kind of sucks actually.
New Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<ol style="padding-left: 10px;">
    <li>stuff</li>
    <li>things</li>
</ol>
</body>
</html>
I guess this site has actually had CSS that probably is doing the opposite of what they wanted for years now. Thanks. Good catch on quirks mode. I've been in the bad habit of never using the doctype declarations in my HTML documents and you've opened my eyes to start actually doing this now. I can now open, reopen, 100 times and I always get the same result.

Design view of CSS layout is innacurate

Hello all -
I'm beginning to redraft my company's hompage using a full
CSS layout instead of our current nested table layout. Since I need
to ensure that other staff members can edit pages freely - and I'm
the only person comfortable doing straight code - it's important
that the design view is as accurate as possible.
When editing in Dreamweaver 8, my three column layout (a left
table of contents, a center content column, and an additional
content right column) breaks so that the table of contents
dissapears. Some people have spoken with have suggested that my
problem might be the negative margins I'm using to position the
floated columns that form the meat of the page.
You can view the page here:
http://www.southernenvironment.org/test/home_redraft.html
The CSS is here:
http://www.southernenvironment.org/test/style_redraft.css
In addition, the header navbar also appears strangely. In
Design View, two word titles (ie. "Our Programs") break on to two
separate lines, instead of staying in one line as they do in
browsers I've tested.
The frustrating thing about this is that my design seems to
work in most browsers - but without a somewhat accurate
representation in Dreamweaver, I won't be able to sell the idea of
a standards-based revamp to other staff here.
Any ideas?
Matt

Your CSS is not tight enough to get accurate columns. You
shouldn't try to
define the columns with the body tag. For a purely CSS site,
you really find
out why the code is called 'cascading' styles. They cascade
all right. We've
just finished wrestling with a similar re-design with CSS and
the order of
how tags and files come into play is very important.
We have defined the body tag with background color, 0 margins
and font
family, color and size only. Header/footer and columns are
defined by ID.
The three "content" columns are within a page container,
header and footer
outside the page container. How these elements are placed is
important, as
they cascade.
We use 3 linked main css files, 1) Page Layout (3 or 4
different options) 2)
Page presentation (all text styles) 3) Page menu styles (only
menu styles).
They are in that order, as the only body tag is in Page
Layout.
If a page has a watermarked background we import the code
just for the
watermark.
This is not true for the home page, but all other pages in
the site.
http://www.nic.bc.ca/index.asp
I hope this helps.
Marianne
"homestar79" <[email protected]> wrote in
message
news:[email protected]...
> Hello all -
>
> I'm beginning to redraft my company's hompage using a
full CSS layout
> instead
> of our current nested table layout. Since I need to
ensure that other
> staff
> members can edit pages freely - and I'm the only person
comfortable doing
> straight code - it's important that the design view is
as accurate as
> possible.
>
> When editing in Dreamweaver 8, my three column layout (a
left table of
> contents, a center content column, and an additional
content right column)
> breaks so that the table of contents dissapears. Some
people have spoken
> with
> have suggested that my problem might be the negative
margins I'm using to
> position the floated columns that form the meat of the
page.
>
> You can view the page here:
>
>
http://www.southernenvironment.org/test/home_redraft.html
>
> The CSS is here:
>
>
http://www.southernenvironment.org/test/style_redraft.css
>
> In addition, the header navbar also appears strangely.
In Design View,
> two
> word titles (ie. "Our Programs") break on to two
separate lines, instead
> of
> staying in one line as they do in browsers I've tested.
>
> The frustrating thing about this is that my design seems
to work in most
> browsers - but without a somewhat accurate
representation in Dreamweaver,
> I
> won't be able to sell the idea of a standards-based
revamp to other staff
> here.
>
> Any ideas?
>
> Matt
>

Design view in DreamWeaver CS3 disabled for CSS & Java

I currently use Adobe Dreamweaver CS3, and only some files have the option to view them in code AND in design view. This works for most files (HTML, PHP, etc). However, anytime I create a new CSS or Java file, the design view is disabled:
I have already tried the two other solutions I've found in this forum.
First I tried Preferences > File Types / Editors, and I deleted all of the file types in the "Open in Code View" menu (pictured below).
I restarted DW, and it didn't work.
Then I tried several steps to re-create the Configuration folder (which it did, but the problem remained) listed here: http://kb2.adobe.com/cps/401/kb401118.html.
Still nothing. HTML, PHP, ASP and all other files have the Design View and Split View available, but CSS and Java do not. I would really like to use DW to start editing CSS, but do not know it well enough to write in code and therefore could really use that handy Design View so I can learn as I tweak it.
Any help much appreciated - thanks!

HTML, PHP, ASP and all other files have the Design View and Split View available, but CSS and Java do not.
That's correct. That's as it should be.
A CSS file contains a bunch of text only CSS rules. Javascript is text-only script. There's no layout to see for CSS and JS files in Design and Split View so they're disabled.
Files with layout e.g. .htm, .php have Design View because they're web pages with a layout which can be viewed.
I would really like to use DW to start editing CSS, but do not know it well enough to write in code and therefore could really use that handy Design View so I can learn as I tweak it.
Open any .htm or .php (or other) web page and its associated CSS file.
Then tweak the CSS either via Code View in the CSS file, or using the DW CSS Editor when viewing the .htm/.php file, and see the formatting changes applied in Design View in the .htm (or .php) file.
Do not rely on DW's Design View as an absolute reference for pixel perfect accuracy. It will always be an approximation only to assist visually oriented web designers while editing.
Always test all CSS rules and edits in a range of browsers. Browser support for CSS rules and effects varies. Not all browsers support everything on offer in CSS1, CSS2 and CSS3.

DW design view not displaying CSS correctly

Hello,
I am having a problem using the position:relative CSS. I've
created a simple page that has 3 div tags. Below is the code:
<body>
<div id="headerleft"><img src="/images/header.gif"
width="303" height="120" /></div>
<div id="headerright">Right Side</div>
<div id="toplinks">
<a href="www.google.com">Link 1</a> |
<a href="www.google.com">Link 2</a> |
<a href="www.google.com">Link 3</a> |
</div>
</body>
Below is my CSS code:
#headerleft {
position: relative;
z-index:2;
margin-bottom:-40px;
float:left;
#headerright {
float:right;
#toplinks {
position: relative;
z-index:3;
text-align:center;
clear:both;
What this page does is shows a image in the top left corner.
In the top right the phrase "Right Side". Then my third div
'toplinks' displays a bunch of links. Since my headerleft id has
margin-bottom:-40px, I need to use z-index and position:relative so
that my links are shown above the headerleft id.
I publish the page and view it in IE and everything works
fine. However, in Design View in DW my toplinks div is displayed
right under the rightheader id. For some reason it's not being
displayed under the left and right floats(headerleft and
headerright id's). Not sure why because I have 'clear:both' set for
that div's CSS.
I take the position:relative out of the toplinks id, and
everything looks fine in DW. My toplinks id then drops under the
both headerleft and headerright. However, when I view this is IE
then the links on the left are no longer active. I guess because
z-index needs position:relative to work?
Anybody have any suggestions?
Thanks

I'm not sure what you are trying to accomplish, but try this
much simpler
and less convoluted code -
<style type="text/css">

</style>
</head>
<body>
<div id="headerleft">
<div id="toplinks"> <a
href="www.google.com">Link 1</a> | <a
href="www.google.com">Link
2</a> | <a href="www.google.com">Link
3</a> | </div>
<div id="headerright">Right Side</div>
<img src="/images/header.gif" width="303" height="120"
/> </div>
</body>
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"esuweb" <[email protected]> wrote in
message
news:[email protected]...
> Hello,
> I am having a problem using the position:relative CSS.
I've created a
> simple
> page that has 3 div tags. Below is the code:
>
> <body>
> <div id="headerleft"><img
src="/images/header.gif" width="303"
> height="120"
> /></div>
> <div id="headerright">Right Side</div>
> <div id="toplinks">
> <a href="www.google.com">Link 1</a> |
> <a href="www.google.com">Link 2</a> |
> <a href="www.google.com">Link 3</a> |
> </div>
> </body>
>
> Below is my CSS code:
>
> #headerleft {
> position: relative;
> z-index:2;
> margin-bottom:-40px;
> float:left;
> }
>
> #headerright {
> float:right;
> }
>
> #toplinks {
> position: relative;
> z-index:3;
> text-align:center;
> clear:both;
> }
>
> What this page does is shows a image in the top left
corner. In the top
> right
> the phrase "Right Side". Then my third div 'toplinks'
displays a bunch of
> links. Since my headerleft id has margin-bottom:-40px, I
need to use
> z-index
> and position:relative so that my links are shown above
the headerleft id.
>
> I publish the page and view it in IE and everything
works fine. However,
> in
> Design View in DW my toplinks div is displayed right
under the rightheader
> id.
> For some reason it's not being displayed under the left
and right
> floats(headerleft and headerright id's). Not sure why
because I have
> 'clear:both' set for that div's CSS.
>
> I take the position:relative out of the toplinks id, and
everything looks
> fine
> in DW. My toplinks id then drops under the both
headerleft and
> headerright.
> However, when I view this is IE then the links on the
left are no longer
> active. I guess because z-index needs position:relative
to work?
>
> Anybody have any suggestions?
>
> Thanks
>

Viewing CSS fomated pages in Design View DW MX 2004

I am using DW MX 2004. I have imported a new clients site and
am trying to view the pages in DW. The web site is completely
formated using CSS. When the document is opened in DW I do not see
any of the page. The page views fine when previewing in a browser.
How do I get the css to execute/render in DW MX 2004s design view?
Thanks in advance for any help!
TroCat

Definitely 'exceeded the capability' of DW's
DoWhatIWantNotWhatICode
function.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
": Nadia : ** Adobe Community Expert **"
<[email protected]> wrote in message
news:[email protected]...
> Yep, especially the 'unclosed' tag errors ;-)
>
> --
> Nadia
> Adobe® Community Expert : Dreamweaver
> ----------------------------------------
> CSS Templates |Tutorials |SEO Articles
>
http://www.DreamweaverResources.com
> ~ Customisation Service Available ~
>
http://www.csstemplates.com.au
> ----------------------------------------
> CSS Tutorials for Dreamweaver
>
http://www.adobe.com/devnet/dreamweaver/css.html
>
>
> "josie1one" <joleros[nospam]@yahoo.com> wrote in
message
> news:[email protected]...
>> You have many errors which when fixed could make all
the difference:
>>
>>
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.exteriorinnovations.com%2F
>>
>>
>> --
>> Jo
>>
>>
>> "trocat" <[email protected]> wrote
in message
>> news:[email protected]...
>>> Exceeded the capability of DWMX 2004? What I am
asking is, how can I
>>> view a
>>> page that was designed and layed out with CSS,
tables, buttons, etc.in
>>> DW 2004
>>> design view. The page is completey visible in
Front Page 2000 in it's
>>> design
>>> view. But not in DW 2004. Am I missing
something? It seems like FP
>>> renders the
>>> CSS to show you the page as you edit. DW 2004
does not show me anything
>>> but the
>>> background in design view. I see DW 8 has a
toolbar called "Style
>>> Rendering".
>>> Is DW 2004 just not capable of this? You can
view the code source of the
>>> page I
>>> am referring to at
http://www.exteriorinnovations.com.
>>>
>>
>>
>
>

Link to CSS problem (in Design View)

Hello Dreamweaver experts,
In the Design View Dreamweaver CS3 is not picking up the
styles specified in a linked stylesheet. Let me explain...
I am using an application in our office that relies upon HTML
(but does not use a standard web browser).
I need to refer to linked stylesheets using a variable like
so;
[example #1]
<link href="{FILES_DIR}/path/css/stylesheet.css"
rel="stylesheet" type="text/css" />
The use of the variable construction "{FILES_DIR}" eliminates
the need to hard code a drive letter into the link which is
preferrable. Without "{FILES_DIR}" I have to hard-code the drive
letter like so;
[example #2]
<link
href="file:///K|/additional-path-details/path/css/stylesheet.css"
rel="stylesheet" type="text/css" -->
Both examples above yield the same result in the application
(the stylesheet is found and its styles properly applied).
However, only with example #2 does Dreamweaver's "design
view" pick up and apply the stylesheet. Dreamweaver cannot find the
stylesheet or apply its styles using example #1.
My question is how can I make Dreamweaver understand and
apply what "{FILES_DIR}" means.
Any tips, tricks or pointers would be most welcome...

"horse.badorties" <[email protected]> wrote
in message
news:fh9o12$80d$[email protected]..
> Hello Dreamweaver experts,
>
> In the Design View Dreamweaver CS3 is not picking up the
styles specified
> in a
> linked stylesheet. Let me explain...
>
> I am using an application in our office that relies upon
HTML (but does
> not
> use a standard web browser).
>
> I need to refer to linked stylesheets using a variable
like so;
>
>
[example #1]
> <link href="{FILES_DIR}/path/css/stylesheet.css"
rel="stylesheet"
> type="text/css" />
>
> The use of the variable construction "{FILES_DIR}"
eliminates the need to
> hard
> code a drive letter into the link which is preferrable.
Without
> "{FILES_DIR}"
> I have to hard-code the drive letter like so;
>
>
[example #2]
> <link
href="file:///K|/additional-path-details/path/css/stylesheet.css"
> rel="stylesheet" type="text/css" -->
>
> Both examples above yield the same result in the
application (the
> stylesheet
> is found and its styles properly applied).
>
> However, only with example #2 does Dreamweaver's "design
view" pick up and
> apply the stylesheet. Dreamweaver cannot find the
stylesheet or apply its
> styles using example #1.
Did you look into "design-time" styles sheets? That may solve
your problem.
It won't take care of the path in the document though...
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
- divaGPS - Add "you are here" highlighting to virtually any
menu
- divaFAQ - Create FAQ pages that toggle (show/hide) the
answers
- divaPOP - Easy, clean, standards-compliant popup windows.

Designing with CSS in Design View

Hey guys, I'm working on learning CSS. One problem I'm having
is that while I'm working on the code, what shows in the design
view in dreamweaver isn't the same, (not even close), to what it
looks like in any browser. For example the location of a div will
be totally different.
It seems like it would be very hard to design this way. Why
doesn't dreamweaver attempt to reflect what it looks like in one of
the browsers. Is this just the way it is when designing with css?
If so, how the heck do people do it? Do you just have to keep
previewing the site every time you change the css?
Using dreamweaver MX
thanks, mike

> Using dreamweaver MX
Sadly, that's the dullest knife in the drawer. Is it DMX6.0
or 6.1?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"southdaytona" <[email protected]> wrote in
message
news:f08qoq$bed$[email protected]..
> Hey guys, I'm working on learning CSS. One problem I'm
having is that
> while
> I'm working on the code, what shows in the design view
in dreamweaver
> isn't the
> same, (not even close), to what it looks like in any
browser. For
> example the
> location of a div will be totally different.
>
> It seems like it would be very hard to design this way.
Why doesn't
> dreamweaver attempt to reflect what it looks like in one
of the browsers.
> Is
> this just the way it is when designing with css? If so,
how the heck do
> people
> do it? Do you just have to keep previewing the site
every time you change
> the
> css?
>
> Using dreamweaver MX
>
> thanks, mike
>

Upgrade work better w/ css in design view?

I have DW8. With css based pages it sometimes is quite
awkward in design view. Has the latest version of DW improved in
that respect? I don't mean preview mode, I mean design mode where I
edit text.

How does it appear in the browser preview? Does the page
validate here -
http://validator.w3.org
Does the CSS validate here -
http://jigsaw.w3.org
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"dpatadobe" <[email protected]> wrote in
message
news:gjt7qj$mfa$[email protected]..
>I don't think it is goofy css. Even if I look at a design
from an
>acknowledged
> expert columns and boxes are not in the same place as
the final view. e.g.
> a
> column may be shifted down in the edit view or even
overlapped which makes
> it
> impossible to read text. (thi is in dw 8).
>

No CSS Design View?

Similar Messages

Maybe you are looking for