css background border issue

[greed83]

Hey all. Having issues with some css. I have a div that uses a background-image and i'm getting some mixed results in how it is displayed. Here is the code:


div#content {
border-top: #fea100 solid 20px;
background-image:url(../images/blank_portfolio.gif);
background-position:top left;
background-repeat:no-repeat;
background-color:#FFFFFF;
padding:1em 1.5em 0em 0px; /* bottom padding for footer */
z-index:0;
}


The issue is that firebox treats the bottom of the top border as the div edge for positioning, and internet explorer treats the edge as the top of the border. How can I use CSS to handle this discrepancy? I've done some Google searches and came up empty handed.

Cheers,
Graeme :confused:

[Centauri]

If the div has "HasLayout" triggered in IE, then the position works as per FF. This can be triggered if the div has a width or height assigned, but if neither of these can be used you need to be more cunning :div#content {
border-top: #fea100 solid 20px;
background-image:url(../images/blank_portfolio.gif);
background-position:top left;
background-repeat:no-repeat;
background-color:#FFFFFF;
padding:1em 1.5em 0em 0px; /* bottom padding for footer */
z-index:0;
min-height: 0;
}

* html #content {
height: 1%;
}The * html rule applies only to IE6 setting a height that it will ignore anyway, and the min-height will trigger HasLayout in IE7 whilst having no other effect.

Article on HasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html).

[turboraketti]

Is your page in quirks or standards mode? (I.e. does the html document have a decent doctype). It sounds a little like it could be a box-model issue.

As a emergency exit you could use something like:
_background-position: 0 20px; /* affects only MSIE6 */
or
#background-position: 0 20px; /* affects all MSIE versions */

[Centauri]

This is not a box-model problem (I tested with full valid doctype) - this is a HasLayout issue.