1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Validator Error SHORTTAG YES

and Commenting CSS and HTML

         

roclimb

11:37 pm on Jan 26, 2011 (gmt 0)

10+ Year Member



Having a problem with my site desplaying in IE. I have a "unclosed start-tag requires SHORTTAG YES" displaying as a problem in front of <style type="text/css">
Can someone help me to properly fix this? What way should I write this.

not sure if this helps but my doctype is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


This is the markup

<style type="text/css">
<!--
.style2 {
font-family: Georgia, "Times New Roman", Times, serif
}
.style3 {
color: #CC9933;
font-weight: bold;
}
.style4 {font-family: Arial, Helvetica, sans-serif}
.style6 {color: #663300; }
.style7 {color: #FFFFFF}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->

* {
margin: 0px;
}
#auto1 {
height: 75px;
width: auto;
background-repeat: repeat-x;
background-image: url(images/woodbackground-2.png);
border-bottom-width: thin;
border-bottom-style: outset;
border-bottom-color: #333333;
}
#auto1 #wrapper1 {
height: 75px;
width: 900px;
margin-right: auto;
margin-left: auto;
background-image: url(images/lakeshore-logo.png);
background-repeat: no-repeat;
}
#auto1 #wrapper1 #topleft {
text-shadow: 2px 3px black;
font-size: 14px;
float: left;
height: 75px;
width: 200px;
}
#auto1 #wrapper1 #toprightt {
float: right;
height: 75px;
width: 700px;
}
#auto2 {
border-bottom-style: groove;
border-bottom-color: white;
border-bottom-width: 3px;
height: 403px;
width: auto;
background-repeat: no-repeat;
background-image: url(images/lake.jpg);
}
#auto2 #wrapper2 {
height: 403px;
width: 900px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
background-position: center;
}
#auto2 #wrapper2 #midcontentleft {
background-image: url(images/designcreativ.png);
font-size: 14px;
float: left;
height: 250px;
width: 380px;
background-repeat: no-repeat;
background-position: top;
padding-right: 20px;
}
#auto2 #wrapper2 #midcontentright {
padding-top: 65px;
font-size: 14px;
float: right;
height: 180px;
width: 480px;
background-repeat: no-repeat;
background-position: right;
}
#auto2 #wrapper2 #midcontentbottom {
padding-right: 20px;
background-position: center bottom;
background-image: url(images/great-web-boxes-2.png);
font-size: 14px;
float: left;
height: 153px;
width: 880px;
background-repeat: no-repeat;
}

#auto3 {
background-color: black;
height: 300px;
width: auto;
background-image: url(images/images:black-background.jpg);
background-repeat: repeat;
}

#auto3 #wrapper3 {
height: 320px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
#auto3 #wrapper3 #bottomcontent2 {
float: left;
height: 300px;
width: 450px;
}
#auto3 #wrapper3 #bottomcontentright {
float: left;
height: 270px;
width: 450px;
padding-top: 25px;
}

#auto4 {
background-color: white;
border-top-style: groove;
border-top-color: white;
border-top-width: 4px;
background-position: 0 top;
background-image: url(images/silver-stripe-background.jpg);
height: 380px;
width: auto;
background-repeat: repeat-x;
}
#auto4 #fourwraper {
padding-top: 40px;
height: 320px;
width: 900px;
margin-right: auto;
margin-left: auto;
}
#auto4 #4wraper table {
left: 50px;
}

#footer {
border-top-color: gray;
text-shadow: 2px 3px 1px black;
border-top-style: inset;
border-top-width: 3px;
background-repeat: repeat-x;
padding: 10px;
background-image: url(images/woodbackground-2.png);
background-color: #000000;
height: 45px;
width: auto;
}

body {
margin: 0px;
}

</style>
</head>

webprutser

1:01 am on Feb 12, 2011 (gmt 0)

10+ Year Member



"unclosed start-tag requires SHORTTAG YES" means you have a start-tag that is not properly closed: like <head for example.
Do you use a html editor? I use PSPAD, freeware, and it has a HTML-check and code highlighter so you get warnings and errors with specified line number and by code-highlighting you notice typing errors earlier. I don't see anything between your style tags missing, in your post you mention </head>, what about <head>? Is that one typed correctly?

Fotiman

2:08 am on Feb 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You have html comments within you style tag causing the problem. Replace them with proper css comments to fix that problem
/*
*/

alt131

3:17 am on Feb 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



and just to help, wc3 have a list of error messages and their explanantions [validator.w3.org] You can get there by following the FAQ link at the bottom of the validation results page, then looking for the link to the "error codes", but might be easier to bookmark and jump direct.

@Fotiman
I'm not following you around - truly I'm not. I saw your post and first thought "what brilliant spotting".

I know you've been coding long enough to remember when style sheets were commented out with html comments to avoid choking browsers that didn't understand styles - remember when ;) But they still don't throw an error today, even when ending part way thorugh the sheet - your post prompted me to run a sample through the validator to check myself :)

webprutser

8:38 am on Feb 12, 2011 (gmt 0)

10+ Year Member



The first look at the code in the first post made me think "no wonder he/she runs into problems with using html comment instead of css comment". Then I noticed it was an inline style sheet and wondered how it should be handled. I googled it and came across many information stating the comment in an inline style sheet should be the html way. A book I have, however, states it should be a css comment, also in an inline style sheet.
I am a bit in the dark here and as English is not my native language I'm afraid I don't understand the exact meaning of alt131's post. What is the proper way to put comment in an inline style sheet?

g1smd

9:09 am on Feb 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I would always move the CSS to an external file so that the same code can be used on multiple pages.

webprutser

11:15 am on Feb 12, 2011 (gmt 0)

10+ Year Member



That's what I do also, the reason why I am in doubt how to use comment in an inline-style sheet, so maybe it's an academic question. I haven't come accross something that was so extraordinary that an inline-style sheet seemed more appropriate than adding the lay-out to the CSS file, but maybe there are such occasions.

Fotiman

4:27 pm on Feb 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@alt131, you're right. I just took a quick look and didn't see anything obvious and just assumed it must be the comment. But you're correct that it doesn't cause a problem (though still should not be used, as the proper way to comment is to use CSS comments... there are no browsers today that will not handle the style element). I, too, would put the CSS in an external file.

I think there's more missing from the code sample given. @roclimb, can you provide the contents of everything from the beginning of the file to the closing </head> tag?

alt131

10:51 pm on Feb 12, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I am a bit in the dark here and as English is not my native language I'm afraid I don't understand the exact meaning of alt131's post. What is the proper way to put comment in an inline style sheet?
I don't think it was your English webprutser - and I wish my Cantonese and French were 1/8th as good! My comment was very roundabout - I should have explained better.

As Fotiman says Comments in css should be /* ... */ This is made very clear by section 4.1.9 - Comments [w3.org] of the css2.1 recommendations.

<!-- -->? are actually SGML comments. The last paragraph of section 4.1.9 above permits them so style rules can be hidden from ancient user agents that did not understand styles. This is confirmed by 14.5 of the Html recommendation Hiding style data from user agents [w3.org].

They are not used to "comment out" style rules - that's the role of css comments. Plus most browsers ignore the HTML comments and read and apply the style rules, so they wouldn't work.

These ones are specifically, and only, used to hide all the content of the <style> element from browsers that did not understand. This was necessary because css syntax (like curly braces and colons) would cause some ancient browsers to crash, while others would treat the rules as text and print them into the document displayed in the browser window. However, those ancient browsers understood and obeyed SGML/HTMl comments, so the style rules could be hidden by putting comments immediately after/before the <style> open and close:
<style type="text/css">
<!--
h1 {color: red;}
-->
</style>
Understanding browsers would ignore the HTML comments and obey the style rules. Ancient browsers would obey the HTML comments and ignore the style rules.

So, use /* ... */ to comment css.
<!-- --> can be used to hide the whole style sheet from ancient browsers that don't understand style rules. Including them should not cause a problem with validation, or for newer browsers, but as Fotiman says, todays browsers understand styles, so probably not required.

webprutser

1:38 pm on Feb 13, 2011 (gmt 0)

10+ Year Member



Thanks for the explanation. It's all clear to me now and should I ever feel the need to use some inline style, I know how to deal with comment. Maybe I may ask your opinion on something else.
While reading a bit in a 5 year old CSS book (pretty ancient in computer-years) the author emphasized making style sheets as compact as possible. Each piece of whitespace or return should be avoided and comments should be removed also in order to get the file loaded as quickly as possible. Of course unnecessary things should be avoided, but I like to organize my css file in a way, that makes it easy to read and understand for me if I look into at a later point.
Is his suggestion still valid nowadays or has it lost its value by nowadays internet speed?

Fotiman

3:28 pm on Feb 13, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



It's still a good idea to keep your files as compact as possible. But there are tools that make this easy while still allowing you to keep your comments. For example, the YUI Compressor [developer.yahoo.com] allows you to compress your file before you publish it to your live site. In other words, while developing you have a "source" file which contains all of your comments. But your site would reference the minified version of the file.

caribguy

4:34 pm on Feb 13, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Do you use a BASE tag? If so, close it and use the conditional statement to avoid IE6 from barfing...

<base href="http://www.example.com" />
<!--[if lte IE 6]></base><![endif]-->

webprutser

12:13 am on Feb 14, 2011 (gmt 0)

10+ Year Member



The base tag I didn't even know. Checked it in the meantime. Thanks for your advise, it can be helpful if I ever need to use a base tag.

The YUI Compressor .... Never heard of that either. I'm a bit hesitant to use it, as I am unfamiliar with it.
If keeping comment out of your CSS file was still a good idea, I'd planned to follow the autors (of my book) advise and put the comment in a separate text file. Is this YUI Compressor something that's used on a large scale?

Fotiman

1:10 am on Feb 14, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Yes, YUI compressor is in use by a LOT of high profile sites. And it IS recommended best practices to minify your CSS files. Putting comments in a separate file just mean you'll have to maintain multiple files, which will only make things more difficult in the long run. I highly recommend you look into using YUI Compressor. It can be a bit of a challenge to get it setup initially, but once you do, it is an extremely valuable tool.

webprutser

8:21 am on Feb 14, 2011 (gmt 0)

10+ Year Member



It's worthwhile knowing. Googling on YUI compressor, I also came across the name of Google Closure and discussions of what was best to use.
In my case, I think I first want to check the loading time of the website, it's not that huge you see. It goes online this week and firebug has a tool to measure loading-times, also specifying separate files. You never know too much, so I'm happy to have learnt about the possibily of using YUI.

SuzyUK

10:04 am on Feb 14, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



re: caribguy's reply

I think that also applied to <meta ..></meta> tags, I used to always close them the old fashioned way anyway, can't remember why but it must have been a validation/choke thing

With XHTML you have to close all elements, you can use an actual closing tag, rather than the self closing space/slash method but it must close, I think IE did used to choke over the self closing method on elements within the <head>, but maybe it was too long ago to matter, unless that's still causing your IE display to freak out?

actually this applies to all self closing elements, e.g. <img src="" /> is equally valid written as <img src=""></img>

The below sample is valid although I've used different closing methods a couple of times, stylesheets and the img in source, the meta uses the long way too - I left the pre discussed html "css hiding" comments in to show it's not them, but as others have said I don't think they're necessary anymore

OP's error appears to be being generated by something prior to the opening <style> tag 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></meta>
<link rel="stylesheet" href="/" type="text/css" media="screen" charset="utf-8"></link>
<link rel="stylesheet" href="/" type="text/css" media="print" charset="utf-8" />
<style type="text/css" media="screen">
<!--
img {
display: block;
} 
-->
</style>
</head>
<body>
<img src="http://www.webmasterworld.com/gfx/logo.png" alt="" />
<img src="http://www.webmasterworld.com/gfx/logo.png" alt=""></img>
</body>
</html>

alt131

10:58 am on Feb 14, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



For the OP, perhaps worth re-stating that webprutser gave a really likely cause in the very first response. The error explanation [validator.w3.org] (#246), for
unclosed start-tag requires SHORTTAG YES
is:
The construct <foo<bar> is valid in HTML (it is an example of the rather obscure “Shorttags” feature) but its use is not recommended. In most cases, this is a typo ...
The discussion has been interesting as I've never experienced the validator objecting to using /> to self-close in xhtml, but even so, perhaps start by looking for simple things like:
<head<title>,
or
<title My title </title>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:01 pm May 1, 2026