Bugs in IE: dotted border and z-index

HTML & CSS
1

Hi,

Why does IE (I am on IE7) behave so odd when comes to dotted line and z-index in the examples below?

http://quack-project.net/tmp/4/index.php

Is there any method to fix this or have I coded the css incorrectly??

first example,

<div style="
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	border-top: 2px solid #000;
	border-bottom: 2px dotted red;
	width:100px;
	height:100px;
	background-color:#fff;
	
	z-index:100;
	position:relative;
	">
	
</div>

<div style="
	border: 2px solid #000;
	width:200px;
	height:100px;
	background-color:#ccc;
	
	z-index:99;
	position:absolute;
	margin-top:-2px;
	">	
</div>

second example,

<style>
#menu {
	overflow:visible;
	}

#menu li {
	float:left;
	border: 0px dotted blue;
	position:relative;	
}

#menu a {
	display: block;
	}
	
/*level 1*/

#menu  > ul > li {
	float:left;
	}

#menu > ul > li > a {
	padding:10px;
	background-color:#ffffff;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	border-top: 2px solid #000;
	border-bottom: 2px dotted red;
	position:relative;
	}
	
/*level 2*/
	
#menu > ul > li > ul {
	position: absolute;
	margin-top:-2px;
	z-index:99;
	border: 2px solid green;
	display:block;
}

#menu > ul > li > ul > li {
	float:none;
}

#menu > ul > li > ul > li > a {
	padding:10px;
	width:200px;
	border-bottom: 2px dotted green;
}

</style>

<div id="menu">

<ul>	
	<li><a href="#" style="z-index:100;">Menu 1</a>
		<ul>	
			<li><a href="#">Sub Menu 1.1</a></li>
			<li><a href="#">Sub Menu 1.2</a></li>
			<li><a href="#">Sub Menu 1.3</a></li>
		</ul>
	</li>
	
	<li><a href="#" style="z-index:1;">Menu 2</a></li>
	
	<li><a href="#" style="z-index:1;">Menu 3</a></li>

</ul>	


</div>

many thanks,
Lau

2

Hi,
It does not appear to have anything to do with z-index in this case.
Rather it looks like IE6/7 do not place the div’s BG color underneath the dotted border like other browsers do.

You can see what is going on by setting a red BG color on the body and commenting out the negative top margin on the lower div.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100&#37;/1.4 arial,helvetica,sans-serif;
    background:red;
}
#top {
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    border-bottom: 2px dotted red;
    width:100px;
    height:100px;
    background:#fff;
    z-index:100;
    position:relative;
}
#bot {
    border: 2px solid #000;
    width:200px;
    height:100px;
    background:#ccc;
    z-index:99;
    position:relative;
    /*margin-top:-2px;*/
}
</style>

</head>
<body>

<div id="top"></div>
<div id="bot"></div>

</body>
</html>
3

Think on this - notice how background-color is applied behind the border, but background-image isn’t if you have it set to no-repeat?

4

yes it is true that ‘IE6/7 do not place the div’s BG color underneath the dotted border like other browsers do’ - what a pain with fit in IE! :injured:

5

Huh, I could have sworn it didn’t… though it’s been so long since I had it as an issue I could be thinking CSS1.

http://www.w3.org/TR/CSS1/#formatting-model

Which doesn’t say. CSS2 added a lot of clarifications that contradicted what IE had already done by building off the draft version of the spec… Which is why we’re still dealing with this mess of inconsistency. (and why I still say CSS3 shouldn’t be used on production pages)

6

Actually the specs do explicitly say in the first line of the specs :slight_smile:

“background” refers to the background of the content, [URL=“http://www.w3.org/TR/CSS2/box.html#box-padding-area”]padding and [URL=“http://www.w3.org/TR/CSS2/box.html#box-border-area”]border areas

The background goes under the borders.

I remember testing these for the reference.

The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support transparent borders.

IE7 and under though have haslayout issues here:

Internet Explorer for Windows versions up to and including 7 will only apply the background from inside the border’s edge when the element in question has a layout. If the element does not have a layout, the background-color or background-image will slide under the borders as per the specifications.

Regarding the tiling of the background image then this is also covered in the specs and in the reference as the initial background position is 0,0 which is defined at the edge of the padding box (which means rather awkwardly that the initial position is inside the border but the image will eventually be repeated into that area if background-repeat is set.

If no background-position has been specified, the image is placed at the default top-left position of the element (0,0), which is located within the top-left corner of the element, just inside the border at the outside edge of the padding box.

Whether that is a sensible approach is another matter as an image will be repeated into the area under say dotted or transparent borders and will look very bad :slight_smile: (In those cases a negative background-position should be used to start the image in line with the border).

7

Fun part of this one is that like many thing, neither way of doing it is incorrect; see – the specification doesn’t actually say where the background should go in relation to the border.

IE’s way actually makes MORE sense – background should be on the element inside the border, since border is supposed to be around the element not on it. If anything, the behavior of putting the background under it is more akin to the ‘quirks mode’ broken box model in behavior.

But since the specification doesn’t actually say…

8

… then it’s a browser “Free for All”

I do agree with you Jason, IE7 seems to make more sense and give us what we would expect here.

Obviously this only happens when there is a dotted or dashed border. On top of that all browsers render the pattern differently too.

With 10px dotted borders on all fours:

  1. FF gives us some cutesy little hearts (mitered dots) in the corner
  2. IE gives a single dot starting in the corner (as I would expect)
  3. Opera gives square dots, starting in the corner like IE
  4. Webkit gives square dots mitered in the corner like FF

Similar results with dashed borders but FF makes a mess of them, it appears to layout the border in a clockwise order without averaging the gap before it turns the corner.

EDIT: Those results are only based on the dimensions I used below, they are subject to change with different dimensions and border sizes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dotted/Dashed Border Test</title>
 
<style type="text/css">
body {
    margin:0;
    padding:20px;
    background:#CCC;
}
div {
    width:200px;
    height:100px;
    background:#fff;
    border:10px dotted #F00;
}
.dash {
    margin-top:20px;
    border:10px dashed #F00;
}
</style>
 
</head>
<body>
 
<div>dotted border</div>
<div class="dash">dashed border</div> 

</body>
</html>