Why is my CSS working in Chrome, but not IE8?

Question

There's a <div> on the right side of my site that displays properly. It says "Look at the new Hunt Group Hunter". If you open the same site in IE8, that <div> is missing. I am not sure how to account for IE8.

Here's the CSS I have for this object.

#hg {
    text-align:center;
    font-size:180%;
    width: 210px;
    height: 150px;
    position:absolute;
    margin: 240px 0px 0px 920px;
    }

#hg_hunter {
    width: 168px;
    height: 148px;
    position:absolute;
    margin: 80px 100px 0 62px;

    }

I'm lost here because this is basic <div> placement.

Any ideas?

PS - IE8 is our corporate browser. I can't do anything about that.

Judging from your doctype, it looks like you are triggering *quirks mode*, which can cause IE to act in a non-standard way. http://en.wikipedia.org/wiki/Quirks_mode — cimmanon, Jun 07 '13 at 20:27
The image contained in that DIV also does **not** display for me in Firefox 21.0. — Derek, Jun 07 '13 at 20:42
@meager - You're going through and editing a lot of my questions. Do you have some advice to avoid these edits in the future. It's a bit embarassing... — Millhorn, Oct 29 '13 at 13:45

score 0 · Accepted Answer · answered Jun 07 '13 at 20:28

0

change

margin: 80px 100px 0 62px;

to

margin: -80px 100px 0 62px;

works on Chrome and IE for me then

answered Jun 07 '13 at 20:28

exussum

18,275
8
32
65

You were on the right track here. I also added this `` and it works like a charm in both browsers. – Millhorn Jun 07 '13 at 20:46
I *think* it forces a chrome frame but I'm not sure. – exussum Jun 07 '13 at 20:54
The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. Take a look at this stack thread... [IE Rendering Definitions Explained](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge) – Millhorn Jun 07 '13 at 21:22

score 0 · Answer 2 · answered Jun 07 '13 at 20:31

I can't test it in IE8 here (mac only), but have you tried using top, bottom, left and right in stead of margin? In my experience IE8 is not very good with margins, definitly when positioning absolute. I suspect your div is just somewhere of screen...

Why is my CSS working in Chrome, but not IE8?

2 Answers2