Eric DeLabarWeb 2.0 from a Web Purist and J2EE Developer

While helping a friend rework his Vintage Board Games site (rework not live yet), we came across an interesting IE bug. In a nutshell, in some cases, IE was placing a CSS background image relative to the outside of an element’s border instead of the inside.

The simplified markup of the bug and CSS are as follows:

1
2
3
4
5

<div class="content">
	<div class="left"></div>
	<div class="right"></div>
	<div style="clear: both;"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.container {
	width: 420px;
}
.content {
	border: solid 10px #3570d6;
	background: white url( background_invert.gif ) left center no-repeat;
}
.left {
	float: left;
	width: 200px;
	height: 300px;
	margin-left: 25px;
	background-color: green;
}
.right {
	float: right;
	width: 100px;
	height: 200px;
	margin-right: 25px;
	background-color: cyan;
}

Basically, it’s a two column layout with the columns wrapped in a div that has a large border. (That div also has a background image set on it. The .container div seems extraneous in this example but was a requirement for the layout.) The desired rendering of this markup should look something like the following: (Note: the black/brown box is the background image.)

But in IE, we get this:

If you don’t trust my images, please try for yourself.

We quickly found two solutions to this problem, the first involved altering the alignment of the background image to be center instead of left:

3
4
5
6
7
8

...
.content {
	border: solid 10px #3570d6;
	background: white url( background_invert.gif ) center center no-repeat;
}
...

This is how we actually solved the problem on the site. The second solution I found while attempting to narrow down the cause of this problem. For this solution we simply set a min-height on the .content div:

3
4
5
6
7
8
9

...
.content {
	min-height: 1px;
	border: solid 10px #3570d6;
	background: white url( background_invert.gif ) left center no-repeat;
}
...

I’m assuming this is some sort of hasLayout issue and giving the div a min-height (height in IE6, accomplished with conditional comments in my example) also gives it layout, but I honestly have no idea what causes this. Anybody have any thoughts?

Now that I have some content, and a nice habit of writing every day, I’ve started concentrating a little more on how this blog looks, especially since the May 1st reboot is only 8 days away!

To start, since this is a blog mainly about writing some form of code or another I needed a good way to do some syntax highlighting. My requirements were pretty simple, it should require very little manual intervention beyond the <code><pre></pre></code> tags, it should support HTML, CSS, JavaScript, Java, and possibly Ruby and PHP, and line numbers would be nice. I found all of this in the wonderful wp-syntax plug-in by Ryan McGeary based on the GeSHi Generic Syntax Highlighter.

Setting it up was a breeze, as usual for WordPress plug-ins, upload, unzip, and it works. Creating the markup was also pretty simple, since all of my code blocks were already wrapped in <code><pre></pre></code> it was just a matter of adding the appropriate lang attribute to the pre element. I did however, run into one minor problem, I had all of my HTML code escaped to to use < and > instead of < and >, but one quick search and replace in MarsEdit for each post, and that was solved as well.