Friday, July 13, 2007

Tables, Attributes, and Document Types

I had an odd problem in HTML yesterday. In adding a column to a table, I found that I could not set the column widths. Things looked fine in Dreamweaver 8 but in IE 6 and Firefox 2 the specified widths were being ignored. After trying a variety of things in Dreamweaver I brought the code over to Visual Studio 2005, to see if it rendered the table like Dreamweaver or the browsers. It rendered the table like Dreamweaver. I play around with the column widths a bit in VS 2005 and then formatted the code (I like how VS 2005 formats code), then brought it back to Dreamweaver. When I previewed the code again it worked! I scanned it quickly to see what had changed. I saw that it was no longer using the width attribute, VS 2005 had changed it to the style attribute with the width property. After a quick test I confirmed that once I manipulated the table columns in VS 2005, it re-wrote the tags.

The width attribute for the IS valid for XHTML 1.0 Transitional, so it validates (that’s the default document type in Dreamweaver), even though IE and Firefox have intermittent problems dealing with the attribute.

Funny thing about Dreamweaver, the width attribute is NOT valid for XHTML 1.0 Strict nor is it valid for XHTML 1.1, yet if you create a table in a document set to one of those types, Dreamweaver still sticks in the width attribute when you resize the columns. When you run the validator, you are shown the table you inserted is using outdated attributes. VS 2005 will underline outdated attributes and show a tooltip explaining why. I’m surprised Dreamweaver doesn’t do that, but more surprised that it inserts code that won't validate.

Wednesday, July 11, 2007


The overflow property is a neat feature of CSS2 I just started playing with. The default for overflow is "visible", meaning any content inside a div that goes outside the div boundaries is shown. For example, if the text runs long in a div, the text will still be shown in the browser. By setting overflow to "hidden" you can use the parent div tag to mask the contents, so text that runs long is clipped. This approach might feel more natural to a designer coming from the page layout world of Quark and InDesign.

The feature becomes more interesting when you are using more than text in the div. If you have other content, it will act like a mask clipping the content, which is not something you could do with a page layout program's text box. Take a look at the W3 site example here.

Tuesday, July 10, 2007

Sizing Flash

Sometimes you'll see Flash movies which fill the entire browser window. If you make the window larger or smaller, the Flash movie scales proportionately. Even though I use this feature, I always forget where you set it. For the record, it is set on the HTML tab when you chose File>Publish Settings... Set the Dimensions field to Percent and the Width and Height fields to 100 percent.