Category: HTML And CSS

HTML and CSS tips and tricks

HTML (Hyper Text Markup Language) is the language behind the web pages of the Internet, created by Tim Berners-Lee, and uses a system of tags for applying layout, formatting and links to content. CSS (Cascading Style Sheets) are used to describe the presentation of the HTML. This section contains howtos, tips and tricks about how to use HTML and CSS.

Google Analytics Asynchronous Tracking

Google recently released updated tracking code for Google Analytics which allows for asynchronous tracking. This means the analytics tracking can be done at the same time as rendering other content and therefore won’t delay other page content from rendering. This results in what appears to be faster rendering pages.

Read More »

Make an entire table row clickable with jQuery

If an HTML table row contains only one <a> link it can be useful to make the entire row clickable and make it activate that link. This post shows how to make the entire row clickable with jQuery so that clicking anywhere in the row is the same as clicking that link.

Read More »

“Clearing” floats with overflow: auto

It is so simple to clear floating HTML elements with overflow:auto but this doesn’t seem to be common knowledge. The most common way to clear floats is with a float clearing div, a hackish method involving writing content using the :after pseudo property, or unbelievably using <br clear="all"> as I saw posted on another site yesterday. This post looks at the simplicity of overflow:auto.

Read More »

CSS :first-child and :last-child selectors

The CSS selectors :first-child and :last-child are used to apply styling to the first and last child elements of the parent. :first-child is part of the CSS 2.1 specification and :last-child CSS 3 so support is slightly limited for :first-child and more limited for :last-child.

Read More »

Internet Explorer 6 min-width hack Part 1

Although Internet Explorer 6 usage has dropped dramatically it’s still there in large numbers (it’s at around 20% across the websites I work on). IE6 does not support the CSS min-width property and there’s a commonly known hack using “width: expression”. This post will look at some issues with this particular hack and tomorrow I’ll look at another solution.

I am currently redeveloping the healthy.co.nz website and we are using a fluid layout with fixed left and right columns and a flexible middle column that uses up the remaning space. It needs a minimum width otherwise the layout kind of falls apart a little.

IE6 usage is a tad under 20% on this website so we want to make sure they get as good an experience as everyone else otherwise that’s potentially 20% less sales.

The CSS Hack for IE6

The well known hack to make Internet Explorer 6 have a minimum width (and it can also be used for maximum width) is to use the “expression” function which works only in Internet Explorer.

If we have a wrapper div around all the content, we can make sure the content within it is always at least 400px (in this example) by doing this:

* html #wrapper {
    width: expression(document.body.clientWidth < 400 ? "400": "auto" );
}

This solution works pretty well but I know of two issues with this method. Tomorrow I’ll supply a different solution, and the one we’ll be using on the healthy.co.nz website.

Issue #1: It’s Javascript

Many people think that because it’s a CSS property that it’s pure CSS and doesn’t require Javascript to work. Wrong! Try disabling Javascript and see if it still works. The stuff between the brackets is actually a Javascript call.

OK, so not many people disable Javascript so it’s probably not really going to be much of an issue, but it is something to be aware of.

Issue #2: It can lock the browser up

Depending on how you set the DOCTYPE, IE can completely lock up when you resizew the window to where it starts applying your Javascript expression. If your window was already smaller than the minimum width it will lock up immediately. Once it locks up you have to click the X button to quit the app.

If your DOCTYPE is OK then it won’t do this.

For whatever reason, the DOCTYPE header we’ve used on this new version of the website is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

This locked IE 6 up when using the Javascript expression and the window was sized lower than the minimum width.

With the addition of an xml tag at the top it worked fine and didn’t lock up the browser:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

However, in our case this completely threw the layout of the website out so it was not a viable option.

Table hack solution

So for this particular website we couldn’t use expression() because when used in combination with the headers we were using the browser crashed. When the headers were changed the layout was destroyed. Without a minimum width the layout gets destroyed at a certain point. So what was the solution? A simple table hack for IE6 only, which I will explain in tomorrow’s post.

Read More »

Using ellipsis with HTML and CSS

If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there’s more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn’t work for Firefox but there’s a workaround that can be done with jQuery.

Read More »