Once again, a journal entry is borne from frustration.

I write these journal entries using WordPress, which is a very easy-to-use blogging solution.

Since I sometimes write about code, I decided to install the Code Markup WordPress plugin. It works very well, and I am enjoying it a great deal (thanks, Bennett).

However, one problem I kept encountering was overflow… when a line of code was so long it would break my layout.

A quick bit of CSS fixes this in most browsers:

pre {
   overflow: auto;
}Code language: CSS (css)

But once again, our friend Internet Explorer 6 said “No! I don’t want to play that way!” Grrr…

It turns out that if your content area has any padding and is also using a fluid sizing method (in my case percentages), the code area will expand beyond the boundaries of your content DIV. Yes, the old box model issue.

Solution? Set a specific width for the pre block element, but only do it for IE… Firefox and other browsers don’t suffer from the box model problem.

The pre block element’s width can be set to a fixed width, but in my case that defeats the purpose of a fluid layout. Then again, if I stick with percentages but set the width to too high of a percentage (“too much” depends on how much padding you’re using), I’d still have issues. Setting a width of 100% will only work if the pre block element has no padding, which would be pretty ugly!

For my purposes, setting pre to 96% width with 1em of padding works out fairly well:

pre {
   margin: 1em 0;  /* left and right margins set to zero */
   padding: 1em;
   background: #FFF;
   border: 1px solid #CCC;
   overflow: auto;
}

/* for IE 6... using "star" hack */
* html pre {
   width: 95%;
}Code language: CSS (css)

Similar Posts