Posts Tagged ‘HTML’

Internet Explorer IMG Element & Empty Width/Height Attribute Error

Monday, May 21st, 2007

Recently found an error, bug or omission within the Internet Explorer rendering engine which I haven’t personally encountered before. The error involves the familiar <img> element and the use of the width and height attributes.

The following <img> element definitions will render as expected within Mozilla and Opera:

  • <img src="/path/to/image.jpg" />
  • <img src="/path/to/image.jpg" width="" />
  • <img src="/path/to/image.jpg" height="" />
  • <img src="/path/to/image.jpg" width="" height="" />

When a web browser encounters an img element without width or height attributes, the browser is required to render the image in its default aspect ratio. When either of the width or height attributes are provided, the browser is required to resize the image when rendered to meet the requested size.

Unfortunately, when Internet Explorer encounters items two, three and four listed above an error occurs where the browser does not render the image at all. Instead of disregarding the img elements empty width and height attributes, it considers the empty value to equate to zero (0) and the image is rendered appropriately.

Getting Your CSS Off

Friday, April 6th, 2007

Toward the end of March 2006, Dustin Diaz thought that stripping all of the presentation from his web site was an excellent way of promoting web standards and CSS based design. The idea caught on and a whole swag of people participated in the first CSS Naked Day on April 5th 2006.

A year has passed and once more, web standards advocates alike around the world are stripping all of the presentation from their sites by running around butt naked without any cascading style sheets to hide their wobbly bits!

I thought about participating in the naked day this year, however I pretty much participate in it all year around so I didn’t think it would have had that much effort. If I had a graphic design bone in my body, I could have created the anti-naked day by getting my CSS on and releasing an amazing visual feast for everyone.

Unfortunately, I don’t have a visual feast for you this year – in the mean time, you should check out some cute cat photos!

Dictionary.com CSS Makeover

Tuesday, August 29th, 2006

Lexico Publishing Group have just released their new web site design which has been deployed over all of their reference.com domains, most notably dictionary.com and thesaurus.com.

The news that the sites were being redesigned was first broken by Jeffery Zeldman, one of the most influential people in pushing the semantic web and standards based design forward. Lexico contracted the Zeldman owned company Happy Cog Studios to work on the redesign. I think it is fitting that a high profile semantic web fanatic be involved with the redevelopment of a dictionary, thesaurus and encyclopedia.

This is my very brief critique of the new site:

  • I really like the new colour
  • I like the simple, now classic tabbed navigation between dictionary, thesaurus and reference dot com sites
  • Though not surprising, I like the fact that the new design contains less than 50% of the HTML of the previous design
  • I hate the massive horizontal banner on the front page, it just breaks the look of the site.
  • The front page feels cluttered and hard to read because of the multiple sets of small lists of links
  • I don’t like the use of the little images in the lists of links on the front page. I think they should have signified the important link through the link text weight or by changing the bullet point image.

Other than, what I’d personally consider a poor choice for positioning their primary advertising – I’m pretty happy with the new design. I’m sure that the people maintaining the site are going to be much happier they’ve now got a simple set of CSS to manage instead of embedded markup.

Professor X Firefox Extension

Wednesday, June 21st, 2006

Ever wanted to look into the <head> section of a web page without having to constantly view the source? Well, good news folks – Stuart Robertson has released a new Firefox extension named Professor X because it gets into your head!

The Professor X Firefox extension will make all of the content in the <head> section of your site or anyone elses, available for you to view without having to suffer the laborious task of navigating to ‘view source’.

This is another excellent Firefox extension to complement Stuart’s ever popular X-Ray extension.

ASP.net 2.0: CSS Control Adapter Toolkit

Sunday, May 7th, 2006

Anyone that has worked with ASP.net that cares about web standards has no doubt lamented the HTML output of most web controls at some point. Thankfully with ASP.net 2.0, times are changing for the better. Scott Guthrie recently introduced the CSS Control Adapter Toolkit which provides a seamless way to improve the HTML output of your controls without effecting how they are used.

Being able to change the HTML output of a server control isn’t a new idea, you’ve been able to do it since day dot. Unfortunately, each method which allows you to override the HTML output has its own problems. In the case of a custom control, they are a lot of work to develop from the ground up and if you simply inherit a web control you then lose the ability to just ‘drag and drop’ and have it just work. Using CSS Control Adapters would allow you to change the HTML output of a web control, without creating a custom control or changing how you use the standard web controls.

To provide a simple example, consider a treeview style menu control. For the sake of an example, lets assume that the HTML output of that control by default is a convoluted nested mess of <table> tags. Since you’re a standards advocate and you care about the health of your clients browser, you’d really like to clean that up. You could implement a CSS Control Adapter to render you’re favourite treeview menu control using an elegant unordered list (<ul>). Better yet, maybe you don’t get consistent rendering of your fangdangle control on a particular platform/browser (a handheld device might be an excellent example). You could implement a handful of CSS Control Adapters for your web control and then customise which one is used through the use of a .browser file. The .browser files are used to register your adapters and also provides a simple way to define that adapter A is used in browsers H and I while adapter B is used in browsers E, F and G.

The significance of the CSS Control Adapter is that you can change the HTML output of a server control, without changing how the standard object is used. This means you could start implementing adapters for your existing code base, enable them and you haven’t had to change any of your existing code or how you were using the web controls! Pretty neat stuff I think and definitely a positive step in the right direction for ASP.net 2.0!