Skip navigation
jbdreamweaver
jbdreamweaver Calculating status...
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

502 Views   7 Replies   Latest reply: Nancy O., Nov 23, 2012 12:55 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Nov 23, 2012 9:04 AM   in reply to jbdreamweaver
    Report

    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:
  • jbdreamweaver
    Currently Being Moderated
    2. jbdreamweaver,
    Nov 23, 2012 9:36 AM   in reply to Nancy O.
    Report

    Thanks Nancy,

     

    I cleaned up the sheet as per.

     

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

     

    The problem still remains however.  Any ideas?

     

    Many thanks once again

     
    |
    Mark as:
  • jbdreamweaver
    Currently Being Moderated
    3. jbdreamweaver,
    Nov 23, 2012 11:18 AM   in reply to jbdreamweaver
    Report

    Does anyone have any ideas why this is happening?  Is there something else with the validator is not picking up? 

     

    It seems like the style sheet is not attaching properly, but then it appears to be fine as per the screen inside DW.

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    4. Ken Binney,
    Nov 23, 2012 11:43 AM   in reply to jbdreamweaver
    Report

    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:
  • John Waller
    Currently Being Moderated
    5. John Waller,
    Nov 23, 2012 11:53 AM   in reply to jbdreamweaver
    Report

    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:
  • jbdreamweaver
    Currently Being Moderated
    6. jbdreamweaver,
    Nov 23, 2012 12:37 PM   in reply to John Waller
    Report

    John,

     

    Thank you ever so much! I was pulling my hair out.

     

    This is a new product I am using, which utilises iframes.

     

    Do you mind telling me why I am not allowed to do that or how to go about

    using them in general?

     

    If you know of any tutorials I would be most grateful.

     

    Thank you folks.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    7. Nancy O.,
    Nov 23, 2012 12:55 PM   in reply to jbdreamweaver
    Report
    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:
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