CSS Parsing Error on validation...

Report · May 14, 2017

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;

}

Report · 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

Report · 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.

Report · 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.

Report · May 14, 2017

From Pagemaker through Dreamweaver, these forums and online tutorials were my training tools over the years.

My old brain is not as agile as it once was, and the pace of change in developing/coding is too fast for me to keep up with all the nuance for what to me is a hobby.

I think I... I... I may be in the process of becoming deprecated : )

Report · May 14, 2017

https://forums.adobe.com/people/SatGraphics+Art wrote
From Pagemaker through Dreamweaver, these forums and online tutorials were my training tools over the years.
My old brain is not as agile as it once was, and the pace of change in developing/coding is too fast for me to keep up with all the nuance for what to me is a hobby.
I think I... I... I may be in the process of becoming deprecated : )

Yes, I understand - it's a constant learning process.

CSS Parsing Error on validation...

1 Correct answer