This is for all you Internet Explorer fans (and a nice laugh for all the haters).
I don’t know how many of you saw the exploded black blog of yesterday. Obviously if you did, you can see this now and I fixed it. If you didn’t, then I’m betting you either use Explorer or you visited late yesterday afternoon. Here’s the long story.
I made this (the one that you see) design up in Photoshop. I really like it. I think its pretty and vector-y. Since I use only Internet Explorer (IE) at work, that’s what I designed the blogger template in. All fine and dandy. Until, of course, I looked at it in Firefox. I don’t even know why I had to open Firefox. But as soon as I saw the stacked, black, exploded page with really no trace of what it should look like in it, I about had a fit. It had taken me a long time to code the design into blogger. It took me until this afternoon to make Firefox and IE look the same. It didn’t take too awful long to get the Firefox version to look ok. But, and here’s the frustrating part, there still was a 8 or so pixel difference in IE that was throwing the alignment off. When I’d fix it in IE, Firefox would push everything to the right. When I’d fix it in Firefox, IE would push everything to the right. I learned a valuable lesson. IE has no idea how to handle margins and padding correctly. It also will accept and implement crap code (I did it on purpose as a hack). I’ll explain.
I was missing a “}“ initially. IE was like “Whatever” and Firefox was like “Nope. I can’t handle this” so it exploded the page. I found and fixed that fairly easily. Then I was left with the problem of the right column inching itself over 8 pixels. I tried every combination of margin and padding on every div box that I could think of. When one would work, the other wouldn’t. For a while I was over thinking it; adding something more complicated than I needed to (I was adding a div box just to space the columns correctly trying to float it without stacking it. After multiple failed attempts at it, I realized that I could get rid of the dev box, remove padding and margins from another and just make the other wider with the background set to repeat-y). Yay! It was much nicer code. But the problem with Firefox/IE and the 8 pixel drift was still there. This is when I learned the second lesson.
Adding a float:left to the css fixed the drift in IE but created one in Firefox. Getting rid of the float fixed it in Firefox, but messed it up in IE. After trying to figure out a way to have Firefox ignore the float style, I found an interesting tidbit of info. IE is stupid. It ignores errors in code. Firefox is smart. It ignores code with errors. Awesome, I just needed to code something bad enough that Firefox will ignore it but good enough that IE will still recognize it. So, I deliberately messed up on commenting the float out. // instead of /*. Firefox ignored it because it is not a correct command and IE accepted it because it has no idea what it is doing.
With all the money Microsoft has, you’d thing that they would come up with a browser that I can’t trick with a backslash.
Links:
- I think hamsters are cute
- The cat in the middle’s face is priceless in the second picture from the bottom.
- This cat totally looks like the Grinch
- These are the cutest rabbits I have ever seen.
- Dog training for dummies
- Wolverine
No comments:
Post a Comment