Category: HTML/CSS

Posted on

Properly Hacking Max-Width for IE6

I’ve been trying to clean up the design of Llynix.com and get it looking relatively the same across the major browsers. One thorn in my side was the fact IE6 doesn’t support the max-width CSS property. It may not seem like a problem to you, but if you are lucky enough to view websites on a widescreen monitor the text has a tendency to run on a bit if max-width isn’t set. Imagine reading this entire paragraph in one line of text. It just doesn’t seem right.

So I apply a max-width which keeps things from running too far off the screen. This works for the major decent browsers, but our old friend IE6 doesn’t understand it. So what’s a web designer to do?

Enter the hack. Luckily IE does have a little piece of javascript that can help us out in faking our max-width. Svendtofte.com has the details of the wonderful snippet below.

width:expression(document.body.clientWidth > 800? "800px": "auto" );

This little ‘expression’ does the same job as max-width:800px; But how do we properly introduce it into our CSS? In the old days we’d rely on faulty CSS error control to splice in various pieces of code for different browsers. Today though we wash our hands of all that, and hopefully ignore such horriable code. There is an easier way.

Enter conditional comments.

Conditional comments only work on Internet Explorer browsers. Other browsers will just treat them as an ordinary comment and continue on. But when IE detects them it will include them if necessary. Zoffix Znet has an excellent article on conditional comments. In addition you might want to check out what Microsoft has to say about them.

Here is my max-width fix inside a IE6 only conditional comment.

    <!--[if IE 6]>
    <style type="text/css">
      #header {width:expression(document.body.clientWidth > 1000? "1000px": "auto" );}
      #mainbody {width:expression(document.body.clientWidth > 800? "800px": "auto" );}
    </style>
  <![endif]-->

Now the webpage looks much better viewed in widescreen in IE6.

Posted on

Website Design Skeleton

You don’t want to re-invent the wheel every new website you begin coding on. Instead maximize your productivity with a template or skeleton if you will of a basic site design.

Your implementation may vary. I’ve tried to keep mine terse for the utmost configuration.

We’ll start with a basic header:

head.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Change Me Later</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="/style.css" rel="stylesheet" type="text/css">
</head>
<body>

I’ve choose HTML 4.01 strict for various reasons. You will need to remember to fill in your title.

As you may have noticed, I’ve included a style sheet in this header, so let’s go over that.

style.css

* {margin:0;padding:0;}

Not much to see here, we reset our margin and padding to 0 to eliminate cross browser quirks and general madness while designing. Some people prefer more in their default CSS.

Let’s continue on to the main page.

index.php

require('head.php');
<!-- Do stuff here -->
require('foot.php');

Not much to see nor explain. Now onwards to our footer.

foot.php

</body>
</html>

And there you have your skeleton. It’s up to you to add the muscle.

A few ideas:

  • Include your name, version and other information in comments in the header and stylesheet.
  • Include your statistics code in the footer.
  • Include any javascript you might use.
  • Instead write a php library to generate your header/footer bassed on doctype/chartype.
  • Set default text styles, colors etc to your liking in your CSS