Skip navigation
jbdreamweaver
Currently Being Moderated

HTML doc not attaching to style sheet but looks fine in DW. Problem

Nov 23, 2012 7:37 AM

Hello once more,

 

I posted this problem the other day but it was mistaken for something else, this was my fault as I posted incorrectly.

 

The current problem with this page, is that it looks fine in Dreamweaver, but as soon as it is viewed in any browser, even firefox, it loses all of the style commands.  The problem is with the text on the page, the menu seems to be behaving fine and I cannot comment on whether it is interfering with the page in a manner which causes the text to not find the styles.

 

Here is a screenshot of how the page should be appearing:

http://postimage.org/image/wp16tgqid/

 

Here is the page live on the internet:

Page

 

Here is an except of one of the styles:

 

.readingtextborder9{

    width:471px;

    height:173px;

    background:url(../images/reading%20border9.png);

    margin-top: 20px;

    margin-left: 36px;

    margin-right: 10px;

    margin-bottom: 5 px;

    text-align:justify;

    padding-left: 180px;   

    padding-top: 10px;

    padding-right: 13px;   

}

 

 

The page did work fine up until a point which I cannot distinguish, but at one point the menu was working together with the page, correctly.  Hence why I find it hard to believe the menu is causing the problems.

 

Any help would be hugely appreciated.

 

Thank you

 
Replies
  • Currently Being Moderated
    Nov 23, 2012 9:04 AM   in reply to jbdreamweaver

    Validate code and fix reported errors. 

     

    You have a messed up Meta tag on line 26 and an extra </div> tag on line 208.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.entasisto urs.com%2Freading.html

     

    On lines 4-11, you have this style inside comments.  Why?

    <!--
    .style24 {
    font-size: 11px;
    font-family: verdana;
    color: #666666;
    text-indent: 30px;
    }
    -->

     

    On line 11 you have this which doesn't do anything. Remove it.

    <style type="text/css"></style>

     

    On lines 33-47, you have these styles.

    <style type="text/css">

    .style1 {font-size: 12px}
    a:link {
    color: #666666; }
    a:hover {
    color: #333333; }
    .style2 {
    font-size: 12px;
    color: #666666; }
    .style3 {color: #666666}
    .style4 {font-size:12px; font-weight: normal; line-height:1; font-family: verdana; padding-top: 2px; margin-top: 5px; text-align:center; width: 100%;}
    a:visited {
    color: #333333; }
    </style>

     

    And even more styles on lines 58-71, also inside comments, why?

     

    <style type="text/css">

    <!--

    body {
    background-image: url(images/backgroundmain.jpg); }
    .style37 {font-size: medium}
    .clearfix:before .clearfix:after { content: ""; display: table; }
        .clearfix:after { clear: both; }
        .clearfix { zoom: 1; }
    .style42 {
    font-size: small;
    font-family: verdana;
    color: #666666; }
    -->
    </style>

     

    1. Organize your code better.
    2. Use meaningful .class names instead of style1, style2, style37, style42 which don't tell you what the style is being used for.
    3. Put CSS code into your external style sheet. This will make problem solving and site management much easier.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 11:43 AM   in reply to jbdreamweaver

    You still have styles embedded in the head section of your page.

     

    I see this

    <div class="readingtextborder style42" >

     

    Two different classes defined in two different  styleblocks ???

     

    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.enta sistours.com%2Freading.html&profile=css3&usermedium=all&warning=1&vext warning=&lang=en

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 11:53 AM   in reply to jbdreamweaver

    These two rules are breaking your stylesheet.

     

    Reported as line 600 by the CSS validator http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.enta sistours.com%2Freading.html

     

     

    .contactform{

              float:left;

              width:670px;

              height:860px;

              margin-top: 5px;

              margin-left: 100px;

        overflow:visible;

        iframe{height:100%;width:100%;border:none;

    }

     

    .contactform2{

              float:left;

              width:670px;

              height:700px;

              margin-top: 5px;

              margin-left: 100px;

        overflow:visible;

        iframe{height:100%;width:100%;border:none;

    }

     

    TRY

     

    .contactform{

              float:left;

              width:670px;

              height:860px;

              margin-top: 5px;

              margin-left: 100px;

              overflow:visible;

    }

     

    .contactform2{

              float:left;

              width:670px;

              height:700px;

              margin-top: 5px;

              margin-left: 100px;

              overflow:visible;

    }

    iframe{

              height:100%;

              width:100%;

              border:none;

    }

     

    PLUS remove <link href="../includes/jQuerySlideshow/jQuerySlideshow4.css" rel="stylesheet" type="text/css" /> from the bottom of the stylesheet. It belongs in the HTML code, not in the .css file.

     

     

    PLUS on line 174, remove the height attribute from

     

    .priceborder{

    width:648px;

    height:autopx;

     

    since "autopx" is invalid

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 23, 2012 12:55 PM   in reply to jbdreamweaver
    Do you mind telling me why I am not allowed to do that?

    Each Selector requires a set of brackets { }.

    Selectors cannot be nested inside rules for other Selectors.

     

    CORRECT:

     

    SelectorName {

         property:value;

    }

     

    INCORRECT:

     

    SelectorName {

         property:value;

              SelectorName {

                   property:value;

    }

     

    A missing semi-colon or bracket can literally break your style sheets.  To avoid problems, be sure to validate code often during development.

     

    Code Validation Tools

    ------------------------------------

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

    HTML - http://validator.w3.org/

     

     

     

    Nancy O.

     
    |
    Mark as:

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