Skip navigation
mixmasterdsr04
mixmasterdsr04
Currently Being Moderated

Can't see CSS Styles applied to HTML document

Jan 28, 2013 8:19 PM

Hi, any help with this issue would be greatly appreciated

 

I've set up a new HTML document and have applied various CSS classes to the text, which I can see in Dreamweaver. The trouble is that when I preview in the browser, or try a LIVE preview, the styles go away. Basically the method for creating the styles was to create new CSS rule from the CSS palette, and select Class, name the class and apply the styling. The font I'm using is Roboto, which is the default font for Android, which I have installed. Again I can see the text styling in Dreamweaver just not in the browser.

454 Views   10 Replies   Latest reply: Ben Pleysier, Jan 29, 2013 3:07 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jan 28, 2013 8:35 PM   in reply to mixmasterdsr04
    Report

    Dear Sir/Madam,

     

    The answer lies in your markup and at this stage you are but we are not privy to.

     

    To start with, Roboto may be the default for Andriod, but it certainly is not for the OS that I use. Hence this font will not be shown on my system.

     

    But you speak of other style rules that are not being recognised.

     

    To save a lot of to-ing and fro-ing, please supply a link to your site.

     
    |
    Mark as:
  • mixmasterdsr04
    Currently Being Moderated
    2. mixmasterdsr04,
    Jan 28, 2013 9:45 PM   in reply to Ben Pleysier
    Report

    The file is here:

     

    http://www.dsrstudio.com/HELP_HTML/help1.html

     

    Thanks!

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    Jan 28, 2013 10:48 PM   in reply to mixmasterdsr04
    Report

    Add the highlighted line and change the style rules as follows

    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    <style type="text/css">

    .PrimaryHeading {

       font: 600 16px/28px 'Roboto', sans-serif;

        color: #333333;

        padding-top: 0%;

        padding-right: 0%;

        padding-bottom: 0%;

        padding-left: 0%;

    }

    .BodyCopy {

        color: #333;

       font: 400 normal 12px/18px 'Roboto', sans-serif;

    }

    .ImageAlign {

        float: right;

    }

    .BodyCopyItaLIC {

        font: italic normal 12px/normal 'Roboto', sans-serif;

    }

    .BodyCopyBold {

       font: 900 normal 12px 'Roboto', sans-serif;

        color: #333;

    }

    </style>

     
    |
    Mark as:
  • mixmasterdsr04
    Currently Being Moderated
    4. mixmasterdsr04,
    Jan 29, 2013 8:29 AM   in reply to Ben Pleysier
    Report

    Thanks. So I know for the future, can you tell me what you did? I am curious to know why it wasn't possible to style the document entirely with Dreamweaver's tools. Thanks!

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Jan 29, 2013 8:41 AM   in reply to mixmasterdsr04
    Report

    I rarely use the CSS editor in DW because it doesn't fully support CSS3, vendor-specific prefixes (-moz, -webkit) or custom web fonts.  Being able to work directly with code will save you a good deal of time.

     

     

    Nancy O.

     
    |
    Mark as:
  • mixmasterdsr04
    Currently Being Moderated
    6. mixmasterdsr04,
    Jan 29, 2013 8:47 AM   in reply to Nancy O.
    Report

    I'm not a developer and in my line of work I have to touch code maybe once every 2 years and it's usually to do something pretty specific. I realize nothing beats being able to code but the reason I use DW is so I don't have to. So, is it not possible to reliably style text with CSS in DW? That seems hard to believe!

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    7. Nancy O.,
    Jan 29, 2013 8:55 AM   in reply to mixmasterdsr04
    Report

    Despite what you may have been led to believe, basic coding skills are an essential part of working with DW.  You can use the CSS editor if you wish, but you won't be able to do advanced things without some coding skills.

     

    If code isn't your thing, maybe you should use a different web authoring tool like Muse.

     

     

    Nancy O.

     
    |
    Mark as:
  • mixmasterdsr04
    Currently Being Moderated
    8. mixmasterdsr04,
    Jan 29, 2013 9:13 AM   in reply to Nancy O.
    Report

    It sure seems like I used to be able to reliably apply CSS styles to text in DW and have it work in the browser. That seems pretty basic, and I've been doing it on and off since DW 2. I have looked into Muse, but I'm pretty comfortable with DW. I'm not averse to learning to code more, but I'm also stumped about this issue because it doesn't make a lot of sense why DW would show a styled document and not render it in a browser correctly. What I'm trying to do isn't advanced it's basic.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    9. Nancy O.,
    Jan 29, 2013 9:20 AM   in reply to mixmasterdsr04
    Report

    98% of browser display issues cause by code errors.  Are you validating your HTML & CSS code to ensure there are no errors in it?

     

    Code validation tools

    http://jigsaw.w3.org/css-validator/

    http://validator.w3.org/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    10. Ben Pleysier,
    Jan 29, 2013 3:07 PM   in reply to mixmasterdsr04
    Report

    I did use DW to do the above.

     

    The main difference between what you had and the suggested version is the reference to the Google web fonts library. Each time the page is opened, a call is made to Google to retrieve the fonts.

     

    Another difference is the way that the fonts have heen styled. If you go to Google web fonts, you will be shown how to do this.

     

    Glad it works.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points