Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-settings.php on line 472

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-settings.php on line 487

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-settings.php on line 494

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-settings.php on line 530

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 611

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 728

Strict Standards: Redefining already defined constructor for class wpdb in /home/edelabar/ericdelabar.com/wp-includes/wp-db.php on line 306

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-includes/cache.php on line 103

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/edelabar/ericdelabar.com/wp-includes/cache.php on line 425

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-includes/theme.php on line 623

Strict Standards: Redefining already defined constructor for class WP_Dependencies in /home/edelabar/ericdelabar.com/wp-includes/class.wp-dependencies.php on line 15

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method GoogleSitemapGeneratorLoader::Enable() should not be called statically in /home/edelabar/ericdelabar.com/wp-includes/plugin.php on line 311
Border Weirdness in Internet Explorer at Eric DeLabar

Border Weirdness in Internet Explorer

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.)

ie_correct.gif

But in IE, we get this:

ie_bug.gif

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?

2 Responses to “Border Weirdness in Internet Explorer”

  1. Kai Chan Vong:

    I was a bit suprised you set your background-position to left. Is that because you’re using a certain CSS editor?

    By default I always leave defaults unless positioning something for a reason with either a PX/EM unit or Left,Right,Top… etc.

    June 12, 2008 10:07 am

  2. admin:

    The CSS originally came from Dreamweaver, not quite sure if it was put there on purpose or as a default, since I’m a hand-coded-CSS guy myself. I do have a tendency to always specify “top left” because I usually just use the background element to change all properties at once. I’ve found this works the best cross-browser.

    June 12, 2008 10:37 am

Trackback URI | Comments RSS

Leave a Reply