Styling JavaScript output with CSS

@pecktron2000May 26.2011

Hello, can anyone tell me how I can style the html output of the following statement:

<html>
<head>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.4.2.min.js”></script>
<script>
$(document).ready(function() {
if ( $.browser.msie && $.browser.version < 8) {
$(‘body’).html( ‘your browser is outdated’ );
}
});
</script>
</head>

<body>

</body>

</html>

I tried using inline styles, which did style the output but I get validation errors saying I cannot have the <p> or <a> elements where they are.

Thanks in advance!

to post a comment

JavaScript

13 Comments(s) _↴

@DanInMAMay 26.2011 — #you could just put your desired css in a style block surrounded by a conditional statement - http://www.quirksmode.org/css/condcom.html

@pecktron2000authorMay 26.2011 — #Thanks for the reply!

Where in the code would I put the conditional block?

@DanInMAMay 26.2011 — #

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Untitled Document</title>
 [COLOR="Green"]<!--[if lt IE 8]>
 <style type="text/css">
 <!--
 body p{
 margin:0 auto;
 text-align:center; 
 margin-top:25px; 
 font-size:18px; 
 font-weight:bold
 }
 -->
 </style>
 <![endif]-->[/COLOR]
 </head>
 <body>
 
 </body>
 </html>
 
 [/CODE]

@pecktron2000authorMay 26.2011 — #Thanks so much for the help!

@DanInMAMay 26.2011 — #no problem. you could also alternatively create an external css file and include the link to the external file within the conditional. bear in mind this only works with internet explorer.

@pecktron2000authorMay 26.2011 — #I am still getting validation errors stating that i cannot have a <p> or <a> tag in that code block.

I need these tags to be there so I can target my styles and place an anchor in the html output of the script.

Am I doing something wrong?

@pecktron2000authorMay 26.2011 — #I just realized that putting a conditional statement in the code causes the page not to validate anyway, so I guess the point is moot from the standpoint of validation. The functionality is there and I guess that is the main thing. ?

@DanInMAMay 26.2011 — #show the code that you are trying to validate, the whole thing.

@pecktron2000authorMay 26.2011 — #<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<title>Creative, Unique and Personalized Web and Graphic Design in Miami, Florida</title>

<link rel="canonical" href="http://www.ransomemultimedia.com" />

<meta name="description" content="Web Design, Graphic Design, Photo Editing and Retouching, Original Music, SEO in Miami, Florida" />

<meta name="keywords" content="miami, web design, graphic design, miami website, web designer, website, websites, creative, custom website, custom blog, wordpress, seo, logos, corporate identity, original electronic music, brochure, brochures, t-shirt design, south florida, translation, proofreading, translation services, business cards, custom blog, spanish translation, flash, html, xhtml, css" />

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/swfobject.js"></script>

<script type="text/javascript">

 // JAVASCRIPT VARS
   // cache buster
   var cacheBuster = "?t=" + Date.parse(new Date()); 
 
   // stage dimensions
   var stageW = 560;//"100%";
   var stageH = 350;//"100%";
 
 
   // ATTRIBUTES
   var attributes = {};
   attributes.id = 'FlabellComponent';
   attributes.name = attributes.id;
 
   // PARAMS
   var params = {};
   params.bgcolor = "#ffffff";
 
 
   /* FLASH VARS */
   var flashvars = {}; 
 
   /// if commented / delete these lines, the component will take the stage dimensions defined 
   /// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml 
   flashvars.componentWidth = stageW;
   flashvars.componentHeight = stageH;
 
   /// path to the content folder(where the xml files, images or video are nested)
   /// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
   flashvars.pathToFiles = "banner/";
   flashvars.xmlPath = "xml/banner.xml";
 
 
   /** EMBED THE SWF**/
   swfobject.embedSWF("preview2.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params);
 
   </script>

 <div id="FlabellComponent">
   <p>In order to view this object you need Flash Player 9+ support!</p>
   <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a> </div></td>
   </tr>
   </table>
   </div>
   <!--end slideshow_div--> 
   </div>
   <!--end home_content_box-->
 
   <div id="home_content_left">
   <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_about.html">Who we are</a></h3>
   <p>As a small but talented web and graphic design team, we at Ransome Multimedia are committed to offering our 10 plus years of combined professional experience to delivering the unique and personalized service and product that you need and deserve.</p>
   </div>
   <!--end home_content_left-->
 
   <div id="home_content_middle">
   <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_services.html">What we do</a></h3>
   <p> We offer creative website development and redesign, custom WordPress blogs, HTML mailers, SEO, graphic design of all kinds, photo manipulation and restoration, translation and proofreading, original music and sound effects, and audio post production services. </p>
   </div>
   <!--end_home_content_middle-->
 
   <div id="home_content_right">
   <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_contact.php">Contact us</a></h3>
   <p>We want to hear from you! Contact us today (we are located in Miami, Florida) to talk about your next project. We will be happy to answer any questions you may have for us and to provide you with a free estimate. We look forward to working with you.</p>
   </div>
   <!--end home_right--> 
  </div>
  <!--end content-->
 
  <div id="home_sidebar">
   <div id="nav">
   <ul>
   <li> <a id="nav_about" href="http://www.ransomemultimedia.com/ransome_multimedia_about.html" title="navigate to About page">About</a> </li>
   <li> <a id="nav_services" href="http://www.ransomemultimedia.com/ransome_multimedia_services.html" title="navigate to Services page">Services</a> </li>
   <li> <a id="nav_portfolio" href="http://www.ransomemultimedia.com/ransome_multimedia_portfolio.html" title="navigate to Portfolio page">Portfolio</a> </li>
   <li> <a id="nav_blog" href="http://www.ransomemultimedia.com/blog/" title="navigate to Blog page">Blog</a> </li>
   <li> <a id="nav_contact" href="http://www.ransomemultimedia.com/ransome_multimedia_contact.php" title="navigate to Contact page">Contact</a> </li>
   </ul>
   </div>
   <!--end nav--> 
  </div>
  <!--end home_sidebar-->
 
  <div id="footer">
   <div id="footer_top">
   <div id="twit_div">
   <p>From Twitter:</p>
   <ul id="twitter_update_list">
   <li></li>
   </ul>
   </div>
   <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> 
   <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ransomemultimed.json?callback=twitterCallback2&amp;count=5"></script> 
   <a href="http://www.facebook.com/pages/Ransome-Multimedia/190687264311608" target="_blank" class="footer_facebook">Link to Ransome Multimedia Facebook Page</a> <a href="http://twitter.com/ransomemultimed" target="_blank" class="footer_twitter">Link to Twitter</a> <a href="http://www.linkedin.com/pub/ransome-multimedia/33/2b5/95a" target="_blank" class="footer_linkedin">Link to Ransome Multimedia Linkedin Profile</a> <a href="http://www.myspace.com/ransomemultimedia" target="_blank" class="footer_myspace">Link to Ransome Multimedia MySpace Page</a> </div>
   <!--end footer_top--> 
   <!-- <div id="valid_XHTML">valid XHTML

<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ransomemultimedia.com%2F">validate page xhtml</a>

</div>

<div id="valid_CSS">valid CSS

<a href="http://jigsaw.w3.org/css-validator/validator?uri=www.ransomemultimedia.com&profile=css21&usermedium=all&warning=1&vextwarning=">validate page CSS</a>

</div>-->

 <div id="footer_bottom">
   <p class="footer_bottom_left">Copyright &copy; 2011 Ransome Multimedia</p>
   <p class="footer_bottom_right">This site is powered by 100% wind energy.</p>
   </div>
   <!--end footer_bottom--> 
 
  </div>
  <!--end footer-->

</div>



</div>



</body>

</html>

Line 70, Column 584: document type does not allow element "a" here

…px; font-size:18px; font-weight:bold;">Click here to download the latest versi…

✉

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

@DanInMAMay 26.2011 — #

1. always post code in code tags by using the Black hashmark button

2. wrap your js like so:

[CODE]
 <script type="text/javascript">
 
 <!--
 
 function yourFunction()
 
 {
 
 }
 
 //-->
 
 </script> [/CODE]

[CODE]<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
 <title>Creative, Unique and Personalized Web and Graphic Design in Miami, Florida</title>
 <link rel="canonical" href="http://www.ransomemultimedia.com" />
 <meta name="description" content="Web Design, Graphic Design, Photo Editing and Retouching, Original Music, SEO in Miami, Florida" />
 <meta name="keywords" content="miami, web design, graphic design, miami website, web designer, website, websites, creative, custom website, custom blog, wordpress, seo, logos, corporate identity, original electronic music, brochure, brochures, t-shirt design, south florida, translation, proofreading, translation services, business cards, custom blog, spanish translation, flash, html, xhtml, css" />
 <link href="style.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="js/swfobject.js"></script>
 <script type="text/javascript">
 <!--
 // JAVASCRIPT VARS
 // cache buster
 var cacheBuster = "?t=" + Date.parse(new Date()); 
 
 // stage dimensions
 var stageW = 560;//"100&#37;";
 var stageH = 350;//"100%";
 
 
 // ATTRIBUTES
 var attributes = {};
 attributes.id = 'FlabellComponent';
 attributes.name = attributes.id;
 
 // PARAMS
 var params = {};
 params.bgcolor = "#ffffff";
 
 
 /* FLASH VARS */
 var flashvars = {}; 
 
 /// if commented / delete these lines, the component will take the stage dimensions defined 
 /// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml 
 flashvars.componentWidth = stageW;
 flashvars.componentHeight = stageH;
 
 /// path to the content folder(where the xml files, images or video are nested)
 /// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
 flashvars.pathToFiles = "banner/";
 flashvars.xmlPath = "xml/banner.xml";
 
 
 /** EMBED THE SWF**/
 swfobject.embedSWF("preview2.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params);
 //-->
 </script>
 <script type="text/javascript">
 <!--
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-23251157-1']);
 _gaq.push(['_trackPageview']);
 
 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
 //-->
 </script>
 </head>
 <body>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript">
 <!--
 $(document).ready(function() {
 if ( $.browser.msie && $.browser.version < 8) {
 $("body").html( '<p style="margin-left:auto; margin-right:auto; margin-top:25px; font-size:18px; font-weight:bold; text-align:center;">Your browser is outdated, please upgrade to a current version. <br/> This site is standards-compliant and was created to be viewed by all modern browsers.<br/></p><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank" title="download the latest version of Internet Explorer" style="display:block; margin-top:15px; margin-left:auto; margin-right:auto; font-size:14px; font-weight:bold; text-align:center;">Click here to download the latest version of Internet Explorer</a>' );
 }
 });
 //-->
 </script>
 <div id="page_wrap">
 <div id="home_frame">
 <div id="header">
 <h1>Ransome Multimedia</h1>
 <a href="http://www.ransomemultimedia.com" title="navigate to Home page">Home</a> <br />
 <h2 id="home_subheading">Creative Design</h2>
 </div>
 <!--end header-->
 <div id="content">
 <div id="home_content_box">
 <div id="slideshow_div">
 <table id="home_slideshow_table" width="100%" cellpadding="0" cellspacing="0">
 <tr>
 <td align="center"><!-- this div will be overwritten by SWF object -->
 
 <div id="FlabellComponent">
 <p>In order to view this object you need Flash Player 9+ support!</p>
 <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/> </a> </div></td>
 </tr>
 </table>
 </div>
 <!--end slideshow_div--> 
 </div>
 <!--end home_content_box-->
 
 <div id="home_content_left">
 <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_about.html">Who we are</a></h3>
 <p>As a small but talented web and graphic design team, we at Ransome Multimedia are committed to offering our 10 plus years of combined professional experience to delivering the unique and personalized service and product that you need and deserve.</p>
 </div>
 <!--end home_content_left-->
 
 <div id="home_content_middle">
 <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_services.html">What we do</a></h3>
 <p> We offer creative website development and redesign, custom WordPress blogs, HTML mailers, SEO, graphic design of all kinds, photo manipulation and restoration, translation and proofreading, original music and sound effects, and audio post production services. </p>
 </div>
 <!--end_home_content_middle-->
 
 <div id="home_content_right">
 <h3><a href="http://www.ransomemultimedia.com/ransome_multimedia_contact.php">Contact us</a></h3>
 <p>We want to hear from you! Contact us today (we are located in Miami, Florida) to talk about your next project. We will be happy to answer any questions you may have for us and to provide you with a free estimate. We look forward to working with you.</p>
 </div>
 <!--end home_right--> 
 </div>
 <!--end content-->
 
 <div id="home_sidebar">
 <div id="nav">
 <ul>
 <li> <a id="nav_about" href="http://www.ransomemultimedia.com/ransome_multimedia_about.html" title="navigate to About page">About</a> </li>
 <li> <a id="nav_services" href="http://www.ransomemultimedia.com/ransome_multimedia_services.html" title="navigate to Services page">Services</a> </li>
 <li> <a id="nav_portfolio" href="http://www.ransomemultimedia.com/ransome_multimedia_portfolio.html" title="navigate to Portfolio page">Portfolio</a> </li>
 <li> <a id="nav_blog" href="http://www.ransomemultimedia.com/blog/" title="navigate to Blog page">Blog</a> </li>
 <li> <a id="nav_contact" href="http://www.ransomemultimedia.com/ransome_multimedia_contact.php" title="navigate to Contact page">Contact</a> </li>
 </ul>
 </div>
 <!--end nav--> 
 </div>
 <!--end home_sidebar-->
 
 <div id="footer">
 <div id="footer_top">
 <div id="twit_div">
 <p>From Twitter:</p>
 <ul id="twitter_update_list">
 <li></li>
 </ul>
 </div>
 <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> 
 <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ransomemultimed.json?callback=twitterCallback2&amp;count=5"></script> 
 <a href="http://www.facebook.com/pages/Ransome-Multimedia/190687264311608" target="_blank" class="footer_facebook">Link to Ransome Multimedia Facebook Page</a> <a href="http://twitter.com/ransomemultimed" target="_blank" class="footer_twitter">Link to Twitter</a> <a href="http://www.linkedin.com/pub/ransome-multimedia/33/2b5/95a" target="_blank" class="footer_linkedin">Link to Ransome Multimedia Linkedin Profile</a> <a href="http://www.myspace.com/ransomemultimedia" target="_blank" class="footer_myspace">Link to Ransome Multimedia MySpace Page</a> </div>
 <!--end footer_top--> 
 <!-- <div id="valid_XHTML">valid XHTML
 <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ransomemultimedia.com%2F">validate page xhtml</a>
 </div>
 <div id="valid_CSS">valid CSS
 <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.ransomemultimedia.com&profile=css21&usermedium=all&warning=1&vextwarning=">validat e page CSS</a>
 </div>-->
 
 <div id="footer_bottom">
 <p class="footer_bottom_left">Copyright &copy; 2011 Ransome Multimedia</p>
 <p class="footer_bottom_right">This site is powered by 100% wind energy.</p>
 </div>
 <!--end footer_bottom--> 
 
 </div>
 <!--end footer--> 
 
 </div>
 <!--end home_frame--> 
 </div>
 <!--end page_wrap-->
 </body>
 </html>
 [/CODE]

@pecktron2000authorMay 26.2011 — #ok, i'm new to the forum game

@DanInMAMay 26.2011 — #NP, the version i posted is valid. on the code block thing, you shoudl always do that as the page will read your code wrong sometimes display smileys instead of what you intended, stuff like that ?. Not a big deal ?

@pecktron2000authorMay 26.2011 — #Thanks, i passed!

You were a huge help

Also in #JavaScript _↴

tag name document.write in form validation prevents submit?Using getElementById but many times

Success!

Help @pecktron2000 spread the word by sharing this article on Twitter...

Tweet This

Styling JavaScript output with CSS

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Styling JavaScript output with CSS

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴