Cleaning up HTML with grep

I came across an email I sent out a few months ago to some co-workers. I thought it would be useful on the blog. I really like grep, but I haven't had the opportunity to use it as much in the last year. These are grep searches in Dreamweaver, it can vary a little from software to software (ie, Vi, Visual Studio, etc has some varying functionality).

---

I just had to go through a file that had tags with a varying width attribute I needed to whack, ie:

width="1"

width="23"

width="456"

With grep it was a quick search with the following (the grep stuff is in red bold):

width="[^"]*"

---

Then I had to whack a bunch of opening and closing paragraph tags:

<[/]*p>

---

Lastly, there were a slew of span tags, ie:
<span style='font-size:10.0pt;font-family:Arial'>John <span class=SpellE>Nyquist</span></span>

To whack those:

<[/]*span[^>]*>

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.

Overflow

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.