«If Only Blogger Was Valid XHTML Strict»

This post may be a bit technical or unclear for some of my readers. I don't claim that I've worded it as precisely and clearly as possible, either. This is my entry for the contest the banner above is about.

I would like to see blogger blogs conform to the XHTML Strict doctype they declare themselves as. They can't do much if the blog authors don't use the correct markup, but at least their end could. I didn't see this on the Blogger Wishlist page. There's not anything complicated that's stopping them from conforming, either. Most of the errors are because ampersand symbols (&) are not written as "&" in the code. The only other errors on their side are because they use an inline frame for the blogger navbar at the top and XHTML Strict doesn't support the iframe tag.

The problem with not conforming to standards (especially when you declare a doctype), is not every browser will deal with the errors in the same way. You will get unpredictable results, or bugs that only happen in some browsers.

Speaking of inline frames, it would really be nice if the blogger polls didn't use an inline frame. The first problem with it is, as I pointed out above, the doctype XHTML Strict doesn't support inline frames. The second problem I've ran into with it is it sometimes has a useless (and annoying) scrollbar to the right of the poll.

That scrollbar caused me much grief. I tried to find a way to get rid of it with CSS code. I figured out if I applied an "overflow: hidden;" style to it, I wouldn't get the scrollbar. The problem I ran into is in XHTML, grandchildren selectors in CSS do not work on the iframe tag. What's strange is child selectors do work. My plan was to apply the style to iframes only within the "poll" div class.

Here's an example of what I'm talking about. This was the grandchild selector I was going to use:

div.poll * iframe {
  overflow: hidden;
}
 

What this means is, it will only apply this style to an iframe that's within any tag that's within a div tag with the class "poll". The asterisk (*) is a wildcard, meaning any tag.

This is what I ended up using, a child selector:

div.widget-content iframe {
  overflow: hidden;
}
 

This will apply to any iframe within a div tag with the class "widget-content". For now, this works for me because I don't have any other widgets that use iframes. However, if I had any other widgets that use an iframe that I wanted scrollbars in, this would be a problem. I'd probably find a way around it by editing the widget's html code to give the poll iframe an ID. However, that's something I'd have to re-do every time I change the poll.

I suppose this wasn't a suggestion for a new widget (as the contest was asking for), but rather a suggestion to improve the existing. Eh, whatever... If you want to get technical, I'm requesting a poll system that does not use an iframe.