Thursday, May 03, 2007

Pesky peculiarities of CSS

Readers of Alex's blog, Complications Ensue, will have spotted his use of screenplay formatting in a recent post.

He borrowed that from me (see previous post for an example), and the process seemed hunky dory until some users of Internet Explorer v.6 on Windows (henceforth IE6) complained that all they saw was a green browser window.

Somehow, the use of my screenplay style sheets wonked the page display of Alex's blog in IE6. While the reader's complained of a green page, what was actually happening was that the top row of Alex's table-based layout - two orange cells flanking a large green one - was extending downward far beyond the bounds of space and time. Well, close to it, anyway.

Alex used the readers who complained to test things. The way I set up my CSS screenplay format, I have a .screenbox class that I use for a div. One of the properties in that class is width, with a value I set to 400 pixels. Alex narrowed down the problem to the width property. His IE6 users had the problem when the width property was present, and the page looked fine when it was absent.

I have machines with Windows XP here at home, so I tested out subtleties in the CSSes. Alex's testers reported that the problem was present when the value of width was measured in pixels or as a percentage of div width. My testing revealed a problem only when width was a percentage value. Even extra wide values in pixels rendered correctly.

I have no idea why this problem exists, but I didn't have to know why to find a fix.

There's a cottage industry that uses bizarre browser bugs to find ways to disable certain style sheets and/or content in certain browsers. I found a solution that's specific for IE6, as follows:

.screenbox {
list-style: none;
  fakefake: ";
  fakefake: "";

width: 432px;
  /*";/* IE */
background: #eee;
border: 1px solid #333;
padding: 5px 14px;

The bold and indented lines are the hack. They force IE6 and only IE6 to ignore all properties inside them. The "fakefake" properties can be any word that's not a valid property. Again, I don't know why it works, but it does.

If you have any insight into what is happening, please let me know. I think the tables have something to do with it, but I can't figure out exactly how.

Let this information flow freely unto the Googling masses....

Bonus mystery:

Last summer, the Angels drafted a high-school catcher named Hank Conger. Here are a few photos of him:

And one from the back to complete the set. Conger is supposed to be 6'0" and 205 lbs. But does he have a sense of humour? I don't know. That's the mystery. The tags to the following YouTube video are "hank" and "conger". Is this the same guy? What do you think?


Anonymous Anonymous said...

this was a high school project for a president campaign in our government class, yes thats him, for a school project, you guys are crazy

May 30, 2007 1:04 AM  

Post a Comment

<< Home