www.webdeveloper.com
Results 1 to 3 of 3

Thread: Css Parse Error

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    2

    Css Parse Error

    I have just validated, and these errors come up:

    Sorry! We found the following errors (2)
    URI : simple.css
    320 Parse Error <style type="text/css"> .tftable { font-size:100%; color:#e0ece8; width:100%; border-width:.1em; border-color: #ffffff; border-collapse: collapse; }
    356 Parse Error </style> #wrapper { background: #fff; color: #b6c5be; }

    I've tried simply removing the stuff in <these things> but that messes up all the colours on my page. Here is the code, line 320-356:


    <style type="text/css">
    .tftable {
    font-size:100%;
    color:#e0ece8;
    width:100%;
    border-width:.1em;
    border-color: #ffffff;
    border-collapse: collapse;
    }

    .tftable th {
    font-size:105%;
    background-color:#354640;
    border-width: .1em;
    padding: 1em;
    border-style: solid;
    border-color: #354640;
    text-align:center;
    border-bottom: solid .4em #6b806f;
    }

    .tftable tr {
    background-color:#9db2a6;
    }

    .tftable td {
    font-size:105%;
    border-width: .1em;
    padding: 0.8em;
    border-style: solid;
    border-color: #6b806f;
    }

    .tftable tr:hover {
    background-color:#b6c5be;
    }

    </style>


    Any help would be greatly appreciated!

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    Just to be clear, your external .css stylesheet files should not contain HTML <style> or </style> tags.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Nov 2013
    Posts
    2
    I thought so, but when I take them out the colours go wrong on the page. Here's the whole css thingy:



    /*
    WHAT IS THIS FILE?

    This file contains all the simple style properties, such as colours, fonts
    and backgrounds. Edit this file to customise the look of your content.
    If you want to change the layout styles (widths, heights, positions)
    see layout.css.
    */





    /*
    |--------------------------------------------------------------------------
    | General Text Formatting
    |--------------------------------------------------------------------------
    */

    html, body {
    /* setting the default styles all text, inputs and textareas will have (unless specified otherwise) */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;

    background: #b6c5be;
    color: #151816;
    }

    h1 {
    font-family: Georgia, palatino, serif;
    font-size: 300%;
    font-weight: normal;
    color: #151816;
    margin: 0 0 .5em 0;
    text-align:center;

    }

    h2 {
    font-size:120%;
    font-weight: bold;
    padding: 1em 0 0.7em 0;
    }
    h3 {
    font-size:120%;
    font-family: Georgia, palatino, serif;
    text-align:center;
    padding: 1em 0 0.8em 0;
    font-weight: bold;
    }


    h4 {
    font-size:110%;
    color: #e3f2ed;

    }
    h5 {
    font-size:140%;
    color: #e3f2ed;
    text-align:center;
    font-weight: bold;
    }




    p {
    line-height: 150%;
    padding: 0 0 1em 0;
    text-align:justify;
    }

    ul {
    padding: 0 0 0 2em;
    list-style: disc;
    }

    ol {
    padding: 0 0 0 2em;
    list-style: decimal;
    }

    li {
    padding: 0 0 1em 0;
    }

    strong {
    font-weight: bold;
    }

    em {
    font-style: italic;
    }

    blockquote {
    color: #000000;
    background: #9db2a6;
    padding: 1em 1em 0 1em;
    margin-bottom: 1em;
    font-size: 130%;
    border-bottom: solid .4em #6b806f;
    border-top: solid .4em #6b806f;
    }




    #footer {

    /*
    colours for text within the
    footer division, ie <p id="footer">
    */
    padding: 1em 1em 1em 1em;
    color: #e3f2ed;
    background-color: #354640;

    text-align:right;
    }

    .screen-reader-only {

    /*
    This is a special class used to prevent text from
    being displayed on screen, while still making it visible to
    screen readers. Use this class if you want to add extra
    descritive text for visually impaired users, but don't want
    that description to be visible for other users.

    For example:
    <p class="screen-reader-only">Special text for screen readers</p>
    */

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    }





    /*
    |--------------------------------------------------------------------------
    | Page Links
    |--------------------------------------------------------------------------
    */

    a:link {
    color: #000000;
    font-weight: bold;
    text-decoration: none;

    }

    a:visited {
    color: #000000;
    font-style:italic;
    text-decoration: none;
    }

    a:hover {
    font-style:italic;
    }

    a:active {
    color: #000000;
    }





    /*
    |--------------------------------------------------------------------------
    | Top Navigatin Links
    |--------------------------------------------------------------------------

    TOP NAVIGATION LINKS
    The following styles control the appearence
    of the top navigation links, eg.
    <a class="top-link" href="default.htm">Home</a>

    */

    a.top-link {
    /*
    these styles will apply to ALL links (:link, :visited, :hover and :active) unless overridden
    */
    display: block;
    padding: .7em 0 .7em 0;
    margin: 0 1em 0 2em;
    background: #9db2a6;
    color: #000000;

    padding: 0;
    line-height: 2.5em;
    }

    .top-link:link {
    /* styles for normal, unvisited links can be set here */
    /* these styles will override the defaults set for .top-link above */
    text-decoration: none;
    border-bottom: solid .3em #9db2a6;
    }

    .top-link:visited {
    /* styles for links once visited can be changed here */
    /* these styles will override the defaults set for .top-link above */
    text-decoration: none;
    border-bottom: solid .3em #9db2a6;
    }

    .top-link:hover {
    /* styles for top links when a user hovers over it can be changed here */
    text-decoration: none;
    border-bottom: solid .3em #6b806f;
    }

    .top-link:active {
    /* Styles for when the link is being clicked can be changed here */
    }

    .top-link.selected:link, .top-link.selected:visited {

    /* Sets the style of a link that has been selected (ie. has a class of selected)
    for example (note the additional class "selected"):
    <a class="top-link selected" href="content.htm">Content Page</a>
    */

    border-bottom: solid .3em #354640;
    cursor: default;
    }





    /*
    |--------------------------------------------------------------------------
    | Footer Links
    |--------------------------------------------------------------------------

    Change these if you want your footer links to have a
    different style to other links

    */

    #footer a:link {

    color: #e3f2ed;
    font-weight: bold;
    }

    #footer a:visited {

    color: #e3f2ed;
    font-weight: bold;
    }

    #footer a:hover {

    font-style:italic;
    }

    #footer a:active {

    color: #e3f2ed;
    }





    /*
    |--------------------------------------------------------------------------
    | Header Colours
    |--------------------------------------------------------------------------
    */

    #header {

    /*
    Colours for <div id="header">
    See layout.css for layout and size properties
    */

    background: #00016c url(../images/headbit.gif) repeat-x top left;
    color: #354640;
    }


    #nav {

    /*
    Colours for <ul id="nav">
    See layout.css for layout and size properties
    */

    background: #9db2a6;
    color: #000000;
    }



    <style type="text/css">
    .tftable {
    font-size:100%;
    color:#e0ece8;
    width:100%;
    border-width:.1em;
    border-color: #ffffff;
    border-collapse: collapse;
    }

    .tftable th {
    font-size:105%;
    background-color:#354640;
    border-width: .1em;
    padding: 1em;
    border-style: solid;
    border-color: #354640;
    text-align:center;
    border-bottom: solid .4em #6b806f;
    }

    .tftable tr {
    background-color:#9db2a6;
    }

    .tftable td {
    font-size:105%;
    border-width: .1em;
    padding: 0.8em;
    border-style: solid;
    border-color: #6b806f;
    }

    .tftable tr:hover {
    background-color:#b6c5be;
    }

    </style>



    #wrapper {
    background: #fff;
    color: #b6c5be;
    }





    /*
    |--------------------------------------------------------------------------
    | Widget Box Colours
    |--------------------------------------------------------------------------

    Colour styles for widget boxes, ie <li class="widget">
    See layout.css for layout and size properties

    */

    .widget {
    background: #9DB2A6;
    color: #000000;
    border-bottom: solid .4em #6b806f;

    }

    .widget-heading {
    color: #E3F2ED;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #354640;
    border-bottom: solid .4em #6b806f;
    }


    How do I get rid of the <style></style> without messing with the colours??

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles