0 Replies Latest reply on Jun 26, 2009 4:32 AM by David_Powers

    CSS styles not rendering in Design view

    David_Powers Adobe Community Professional (Moderator)

      Toggling CSS styles on and off

      By default, Dreamweaver renders CSS styles in Design view. However, it's sometimes convenient/necessary to turn them off. The setting that toggles CSS on and off is View > Style Rendering > Display Styles. You can also use the Style Rendering toolbar, as shown here:

       

      style_rendering_toolbar.png

      The Style Rendering toolbar is not displayed by default. To turn it on, select View > Toolbars > Style Rendering.

      CSS styles not displaying correctly in Design view

      Design view usually provides a very close approximation of what your page will look like in a standards-compliant browser. However, it doesn't support all CSS properties, so you should always check your page in Live View (Dreamweaver CS4 and above) or Preview in Browser.

       

      Sometimes, though, your CSS looks completely wrong or isn't displayed at all. Usually, this happens if you have accidentally turned off the display of styles, or if you have selected an option other than Screen Media Type in the View > Style Rendering submenu or the Style Rendering toolbar. Make sure Display Styles and Screen Media Type are selected (they should have checkmarks against them like this:

       

      style_rendering_menu.png

      If that doesn't solve your problem, it's likely that there is a serious error in your page code.

      Turning off the display of CSS permanently

      Although most people want CSS to display in Design view, some people want to turn it off permanently.

       

      Randy Edmunds of the Dreamweaver engineering team has kindly provided these instructions if that's what you would like to do:

       

      We had so many people turn off style rendering and then forget about that setting. They would go crazy trying to figure out why their styles weren't rendering, so we decided to always reset that setting when DW was restarted (which is a natural action to take when things don't make sense).

       

      You can change it back as follows:

       

      1. Place this code in a file called myStartup.htm:

      <html>

      <head>

      <script language="JavaScript">

      dw.cssStylePalette.setDisplayStyles(false);

      </script>

      </head>

      <body>

      </body>

      </html>

       

      2. Place a copy of this file in your Configuration/Startup folder so that it gets executed every time you start DW.