Home > .NET, ASP.NET, CSS, DOM, Firebug, Firefox, IE, Opera, Themes and Skins > In Favor of Using Style Elements / Embedded Style Sheets / Style Blocks / Style Tags or Whatever You Want To Call Them inside the HTML / XHTML Body.

In Favor of Using Style Elements / Embedded Style Sheets / Style Blocks / Style Tags or Whatever You Want To Call Them inside the HTML / XHTML Body.

March 20th, 2007

I’ve been using Style Elements within the HTML Body tag to work around some of the design flaws presented in ASP.NET 2.0 Themes – see the second solution in this post for more details. I’ve been leary of using this method because it’s not a best practice, since it compromises the validity of the HTML / XHTML document. I decided to do a little more research on this subject and made the following discoveries.

Discoveries:

  1. Some of the more complex web sites (Amazon and Yahoo!) make use of Style Elements within the Body Element – see the source snippets below.
  2. Gecko (Firefox, Flock, Mozilla, etc…) based browsers automatically move Style Elements found within the Body Element into the Head Element and render the page as expected – see the rendered Document Object Model (DOM) image below.
  3. Internet Explorer doesn’t move the Style Element into the Head Element, but renders the page as expected.
  4. Opera… well I wish I knew what Opera did, but the page renders as expected.

Source snippet from Amazon:

</table>
    </td>
  </tr>
</table

<style type=”text/css”>
.lol-hr-center { margin: 5px; border-top-width: 1px;
/* and so on… */
}
</style>

<div id=”listoflists_data” style=”display:none”>
Note how the Style element is located between the <table> and <div> tags.


Source snippet from Yahoo!:

<h4>
<
a id=”paweather” class=”details” href=”r/wb/*-http://weather.yahoo.com/forecast/USKS0448_f.html”><span class=”icon”>Weather <b><strong>51&deg;</strong>F</b></span></a>

<style type=”text/css”>#patabs #weather .icon{background:url(http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/26.gif) 3px 2pxno-repeat;}</style>

</h4>
Note how the Style element is located within the <h4> tag.

A snapshot of the Document Object Model (DOM) as seen through Firebug:


Note the highlighted area references the Yahoo! source snippet from above.
Conclusion: Although the Style Element within the Body Element compromises the validity of a document, some of the leaders in web design and accessibility use this approach, so it may not be as big a work around or hack.

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, DOM, Firebug, Firefox, IE, Opera, Themes and Skins Tags:
  1. No comments yet.
  1. No trackbacks yet.