Skip to main content
Known Participant
May 14, 2017
Answered

CSS Parsing Error on validation...

  • May 14, 2017
  • 1 reply
  • 2745 views

w3c CSS validation points to a parsing error on line 153. The closing bracket appears okey to me, but obviously I'm missing something.

============CSS as follows===============

@charset "UTF-8";

/* Simple fluid media

   Note: Fluid media requires that you remove the media's height and width attributes from the HTML

   http://www.alistapart.com/articles/fluid-images/

*/

img, object, embed, video {

  max-width: 100%;

}

/* IE 6 does not support max-width so default to width 100% */

.ie6 img {

  width:100%;

}

/*

  Dreamweaver Fluid Grid Properties

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

  dw-num-cols-mobile: 5;

  dw-num-cols-tablet: 8;

  dw-num-cols-desktop: 12;

  dw-gutter-percentage: 15;

  Inspiration from "Responsive Web Design" by Ethan Marcotte

  http://www.alistapart.com/articles/responsive-web-design

  and Golden Grid System by Joni Korpi

  http://goldengridsystem.com/

*/

/* Mobile Layout: 480px and below. */

h2 {

  margin-bottom: 5px;

  margin-top: 5px;

  padding: 0px;

}

.gridContainer {

  width: 100%;

  padding: 0px;

}

#Header {

  clear: both;

  float: left;

  margin-left: 0;

  width: 100%;

  display: block;

  color: #CCC;

  text-align: center;

  background: #000;

}

#navBar {

  clear: both;

  float: left;

  margin-left: 0;

  width: 100%;

  display: block;

}

#content {

  clear: both;

  float: left;

  margin-left: 0;

  width: 100%;

  display: block;

}

#footer {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 0.5em 0em;

  background-color: #000000;

  color: #FFF;

  display: block;

}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {

  width: 100%;

  padding: 0%;

}

#Header {

  clear: both;

  float: left;

  margin-left: 0;

  margin-right: 0;

  width: 100%;

  display: block;

}

#navBar {

  clear: both;

  float: left;

  margin-left: 0;

  width: 100%;

  display: block;

}

#content {

  clear: both;

  float: left;

  margin-left: 0;

  width: 100%;

  display: block;

}

#footer {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 0.5em 0em;

  color: #FFF;

  background: #000;

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {

  width: 100%;

  padding: 0%;

}

#Header {

  clear: both;

  float: left;

  margin-left: 0;

  width: 100%;

  display: block;

}

#navBar {

  clear: both;

  float: left;

  margin-left: 0;

  width: 100%;

  display: block;

}

#content {

  clear: both;

  /* [disabled]float: left; */

  margin-left: 0;

  width: 100%;

  display: block;

}

#footer {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  color: #FFF;

  padding: 0.5em 0em;

  background: #000;

}

}

This topic has been closed for replies.
Correct answer osgood_

There's no ending bracket } for your 481px media query:

@media only screen and (min-width: 481px) {

It should come after the closing 'footer' }

#footer {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 0.5em 0em;

  color: #FFF;

  background: #000;

}

} <-- HERE

1 reply

osgood_Correct answer
Legend
May 14, 2017

There's no ending bracket } for your 481px media query:

@media only screen and (min-width: 481px) {

It should come after the closing 'footer' }

#footer {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 0.5em 0em;

  color: #FFF;

  background: #000;

}

} <-- HERE

Known Participant
May 14, 2017

Thanks for the prompt, and accurate, response. Validater pointed me to line 153, so I didn't go beyond that.

However, I didn't in fact realize that a second, or closing bracket was required at that breakpoint, as the auto-generated style sheet generated by Dreamweaver CS6 actually didn't insert one there, so I went with that, as I've always done.

Legend
May 14, 2017

https://forums.adobe.com/people/SatGraphics+Art  wrote

However, I didn't in fact realize that a second, or closing bracket was required at that breakpoint, as the auto-generated style sheet generated by Dreamweaver CS6 actually didn't insert one there, so I went with that, as I've always done.

I dont know why DW chose to miss that out. I never really rely on a bit of software to get everything exactly correct.

You should always include a closing bracket when surrounding other css selectors with a media query otherwise it's likely to disrupt the flow of the css and styles may not be applied.