Archive

Archive for the ‘Opera’ Category

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:

Now supporting Opera 9 and other Web Development (CSS) Related Notes

December 9th, 2006

I noticed that a couple visitors were using the Opera web browser, so I decided to check my site with this highly W3C CSS compliant browser – see the “Acid2 Test”.

To my horror, I found my CSS wasn’t working properly.

My blog in Opera (the CSS rendering issue):

I began debugging my site by starting up Firefox with the Firebug extension. Upon inspecting my Document Object Model (DOM) and my rendered CSS I found a syntax error (a bug).

Using the Firebug extension for Firefox to view the DOM and related errors:

My error; I had erroneously entered */ instead of /* for my CSS comment. After making the changes everything rendered as expected in Opera.

Conclusion; My site now works with Opera 9. As a rule of thumb, I generally do my CSS design in a more W3C CSS compliant browser like Firefox, Opera, etc… and then make the respective changes for proper display in IE. Firebug is amazing, the best web development tool I have seen in a long time. Firebug really makes debugging a breeze.

Other useful Firefox extensions:

  • Colorzilla – Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
  • del.icio.us – Keep, share and discover all your favorite things.
  • FasterFox – Performance and network tweaks for Firefox.
  • FireBug – Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  • Greasemonkey – Customize the way webpages look and function (hide search engine advertisements, tweak Gmail).
  • Mouse Gestures – Allows you to execute common commands (like page forward/backward, close tab, new tab) by mouse gestures drawn over the current webpage, without reaching for the toolbar or the keyboard.

Other useful Internet Explorer extensions / toolbars:

Author: Adam Kahtava Categories: CSS, DOM, Firebug, Firefox, Opera Tags: