Category: xHTML

Epic Fix for IE6 Browser Issues

I’ve come across an endless list of IE6 hacks and apparent fixes for the one browser that still causes many issues. This on is my favourite:

<!--[if IE 6]>
<meta http-equiv="refresh" content="0; url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<script type="text/javascript">
/* <![CDATA[ */ window.top.location = 'http://www.microsoft.com/windows/internet-explorer/default.aspx'; /* ]]> */
</script>
<![endif]-->

Drastic, yet very epic and takes seconds to implement. Solves all your IE6 problems 🙂

ECommerce Content Source Ordering for Product Detail Pages

Content source ordering or SOC (source ordered content) is the idea that content nearer the top of the raw  HTML source code has greater weight and meaning for search engines. For instance, a paragraph of text right at the top of the HTML source has more meaning than the same passage that may appear in the footer. It is very useful for those all too common generic menus (home, about, contact etc.) that has no SEO benefit at all, yet appears at the top of every page of your site. With SOC and absolute positioning of DOM elements, it is possible to position this HTML at the very bottom of the source code, thus gicing greater weight to your page content.

The latter is not a new idea by any means, but is generally considored to be a positive practice to implement on any site.

Continue reading ECommerce Content Source Ordering for Product Detail Pages

Image Masking with CSS and HTML

A recent web design called for the following:

  • the client must be able to upload their own banner images
  • the banner image was not square and had a transparfent mask around over it (in Photoshop, the banner image was underneath a clipping mask)
  • The design must function in a range of legacy browsers

This presented a major headache. Usually uplaoding a totally square image is easy – a client can do this with ease themselves. However, the client in question has no experience using using Photoshop (and why should they to update their website?) and wouldn’t be able to upload a masked image. Additionally, using some of the new CSS3 image masking properties are out, as I need to support IE6 and above.

So, the solution here is to use a transparent image to overlay the square image – meaning a client can upload a square image and have it show masked on the live website – see the final result of what we’ll be making.

Continue reading Image Masking with CSS and HTML