mark.veerman.com

« January 2005 | Main | April 2005 »

March 10, 2005

CSS and Internet Explorer

I've recently been troubleshooting a number of problems with IE 6.0 and CSS. I thought it might be nice to document the main IE bugs that I experienced and some workaround hacks that I found online. My project is for an intranet, so thankfully, older IE bugs prior to version 6.0 don't concern me.

IE CSS Bugs

• Quirky percentages in Visual Formatting Model
If the necessary height or width of a containing box isn't known at a particular point in page rendering, the box will be positioned according to information up to that point. A hover event will cause some boxes to be RE-positioned according to rendered information from the WHOLE page.
• IE Three Pixel Text Jog
• IE/Win Guillotine Bug
• IE Float Model Problem
• IE doubled float-margin bug
• Duplicate Characters Bug
I think this might be more aptly named, phantom shadow box. This one was weird. A mysterious box would appear below a div and contain duplication of the last few lines of preceding content. Also, any links in the phantom shadow content actually worked (at least partially). My duplicate characters were not triggered by comments between floated divs, but floated and hidden divs with display: none. After much consternation, I realized that I didn't need to float those divs. Removing the floats solved the problem.

IE CSS Hacks

• The Holly Hack
Apply a small 1% height to a floated container in order for it to expand to contain the intended content. Ironically enough, this works due to another IE bug that forces a container with an explicit height to expand in order to contain all content. Normal behavior would be to explicitly size the container according to it's height regardless of content.
• Asterix html Selector Bug (aka The Tan Hack)
Preface id name with * html in order to prevent non IE browsers from reading.
• Mac IE Hack
Uses comments to hide chunks of code from IE for Mac.
/* start hide from ie mac \*/
Anything here will be hidden from a Mac
/* end hide from ie mac */
• ! important
You can cause IE to ignore a line in a stylesheet by putting !important at the end of a stylesheet specification. This is *supposed* to override inheritance for that element, but IE will just ignore that line.
margin-top: 0 !important;
margin-top: -4px;

Other resources

Most of the solutions that I found came from Position Everything. This was a great site that has very clear examples and explanations of IE bugs. They have two great pages that list all of the above bugs and many more here, and here. I've just highlighted the bugs that I personally experienced.
hasLayout is is a proprietary Microsoft HTML property that can help to solve float problems with IE
Meyerweb is also a great site for CSS articles.
I joined the css-discuss list which is a great resource.
While I avoided the duplicate characters bug by just removing the floats, I didn't determine this course of action before finding a number of different triggers for the same bug detailed in the positioniseverything document.

• http://www.bingbangboom.us/projects/cssFixes/floatRowIE6/
• http://www.wubbleyew.com/blog/showblog.asp?blogID=247

As a funny side note, I just checked my blog in IE - for the first time I think, and the right nav was entirely below the content. Oops.

Posted by mark at 3:57 PM | Comments (1) | TrackBack

Popups from a bookmarklet

I use del.icio.us to store my bookmarks. There's a bookmarklet that I use to conveniently post pages to del.icio.us. However, with Firefox, the popup would always popunder, so I'd have to Alt-Tab to it every time.

Here's the original javascript for that bookmarklet from the del.icio.us post page (added line breaks).

Here's the new javascript (added line breaks):

This is pure conjecture, but I think the default behavior of Firefox is to put the focus back to the page you were currently on when running a bookmarklet. When I tried to just add w.focus(), it would popup the page for a millisecond, and then Firefox would put it back to the background. By adding a 10 millisecond timeout to the focus it allows Firefox to finish it's default behavior, and then I re-focus the post to del.icio.us popup.

Posted by mark at 11:46 AM | Comments (1)

Firefox bookmarks

While trying to solve another problem, I discovered another cool feature of Firefox.

If you open the properties of a bookmark you'll see a keyword field. This allows you to assign keywords to often used bookmarks. For example, I could assign the keyword 43 to my bookmark for http://43things.com/people/view/markveerman. Then, all I have to do is type 43 in the browser address bar and voila.

Where it gets cooler is that I can use variable substitution in the bookmark url. So, for the 43 things bookmark above, I could change the location of my bookmark to http://43things.com/people/view/%s. Now, when I want to access that bookmark, I just type 43 markveerman, or 43 aharbick or any other person on 43 things that I might want quick access to.

I'm not sure how much I'll *really* use this, but can think of quite a few uses where it might helpful.

Posted by mark at 11:02 AM | Comments (0)

March 8, 2005

Fish

Since my kids aren't old enough to walk a dog, I decided that fish might make perfect pets. So, a couple weekends ago, while Courtney was out of town, we purchased a 10 gallon tank, two Tetra's, and a small catfish. It all went really well and thankfully they're still alive and seem to be doing well. For some odd reason James had no inclination to name them despite much prodding. Emma (2 years old) just wanted to give them milk and change their diaper. So, our nameless fish remained as such until this morning when out of the blue (pardon the pun) James announced that their names were Broccoli, Doodle (Tetras), and Bang (Catfish). I'm thinking that his least favorite might be Broccoli...

Posted by mark at 2:26 PM | Comments (2)

I'm getting old

A couple weeks back, my 1989 Jeep Cherokee experienced catastrophic engine failure. This, a stinking week after paying $1000 in repairs. I had a friend who knew a guy (I know, it sounds pretty shady) who had a line on some good used cars. He did, and I ended up with this cool 1984 Volvo DL for cheap. It's only got 147,000 miles on it which is pretty low for a Volvo and everything works great. I owned a 1982 Volvo DL when I was in college and really loved it. Oddly enough, driving around in this 20 year old relic has made me feel young again. Until ...

This morning, I was taking my 4 year old son to pre-school in his inaugural ride in my "new" car. As he was climbing into his car seat, he stopped and looked at the window crank (or whatever you call the fossils that open and close your car windows), and said, "What's that for daddy?" When I told him he promptly had to raise and lower the window several times. I then reminded him that daddy's car was really old, and that it was entirely possible that the support for the entire window could break and send the window shattering into the door. He stopped playing with it, and we were on our way.

It got me thinking, how many other things will James just take for granted ... cell phones, remote controls, TIVO. It reminds me of the line from Shawshank Redemption when the older prisoner with the pet crow gets released after a lifetime of imprisonment, and says something along the lines of, "the world up and got itself in a big hurry (horrendous paraphrase)." While this may seem like an odd quote - and a bit off point, it seems that for every generation there are certain status quos/standards that are just assumed. Expectations that place us at a fixed point in history and from which we we derive our identity. And the fact that someday, in the vein of "When I was a boy we walked to school in the snow, barefoot, uphill, etc," I'll say to James, "When I was a boy we rolled up our car windows MANUALLY," makes me laugh.

I've got a few more years to polish my story and make it sound tougher.

Posted by mark at 1:54 PM | Comments (0)