A Cake For Firefox

Cake For FirefoxFirefox recently released Firefox 2.0. There was a little slip-up with that release though, it hit some FTP servers earlier than it should have.

Anyway, the Internet Explorer team at Microsoft sent a cake to the Firefox team, congratulating them on their release of Firefox 2.0. Pretty weird huh? One would expect the cake to be full of poison, but that’s not the case. It’s simply a “job well done” present from the IE dev team to the Firefox guys.

It’s nice to see archenemies sending such nice gifts, even if it is Microsoft that’s involved. Can you feel the love?

CSS Changes For IE7

The Internet Explorer development team has posted a list of CSS changes made in Internet Explorer 7. There’s lot of good ones, lots. My favorite of all of them is PNG transparency. Transparent PNG’s will now show up correctly in Internet Explorer! yay!!

Other major changes include :hover for all elements and the implementation of position:fixed. Super. Welcome to the 21st century Internet Explorer.

Wrapping Text Inside Pre Tags

I sometimes display little snippets of code on this site. For example, here, here, and here. To do this, I use the Code Markup wordpress plugin.

If you’re using Firefox, you may notice the long lines in my Digg Integrator fix post. It’s not really a problem for me having those really long lines in Firefox. Why? Because Firefox still displays my sidebar correctly. Internet Explorer is a totally different story though. When there’s long lines like that, my sidebar will appear at the very bottom of the page in IE.

The long lines are caused by use of the pre html tag. The pre tag preserves spaces and line breaks in a chunk of text. Perfect for displaying snippets of code. However, some lines of code are quite long and will run off the page. This is exactly why my sidebar was getting pushed to the bottom of the page in IE.

So, I set out looking for a method to wrap text contained within pre tags. Google found exactly what I was looking for. Wrapping text inside pre tags is quite easy, all that’s required is a simple addition to your css:

Quite simple. After adding that CSS, the text in pre tags still doesn’t wrap in Firefox, but I don’t care because Firefox displays the rest of my page as it should. Now, when you view a page in IE with a long line, the text is wrapped and my sidebar content appears at the top of the page instead of the bottom.

For consistency sake, let’s make these long lines wrap in Firefox too. This is extremely simple. It only requires adding a few characters to the CSS shown above. For text wrapping in Firefox, use this CSS:


Notice the only difference between the first and second examples is the addition of “!important” to the third line in example 2. After adding that little bit, your text between your pre tags should wrap well in basically every browser that’s currently in use.

UPDATE 3/10/2007

If you can’t seem to get the css above to work, give the css below a shot. I just set a width on the pre tag. When the width is set to 100%, you’ll get a horizontal scrollbar when viewing in IE7. That’s why I’ve set the width to 99%. The code will display just fine in IE6, IE6, and FireFox when width is set to 99%. I have not tested Opera. Try this updated CSS if you’re having issues with the original CSS from above.

UPDATE 6/4/2008

Markku Laine posted some css in a comment that seems to work better than the original css I posted. It works in IE, Safari, and FireFox. Try using Markku’s css below if the previous examples don’t work for you.

Update 1/20/2011

Some code Max posted in a comment also seems to be working well for many people. It may be worth trying as well: