ansaurus

Question

What is wrong with this simple CSS in IE?

Answer 1

A:

One solution is to put "position: relative" everywhere, but this breaks other things in my page.

Sam 2008-12-15 09:26:24

Answer 2

+2 A:

Sounds like you're in transitional quirksmode which is EVIL.

Strict solves this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

annakata 2008-12-15 09:30:22

Tried it out... put it in before <html> and it's still broken.

Sam 2008-12-15 09:35:35

+1 but just adding there's a range of doctypes that will take you out of quirks mode http://en.wikipedia.org/wiki/Quirks_mode

Greg 2008-12-15 09:37:04

@sam - works for me, the only switch being the doctype from transitional - post the rest of your markup?

annakata 2008-12-15 09:37:59

That's all... just the doctype and <html><body>[what i wrote]</body></html>

Sam 2008-12-15 09:43:30

caching? try it in a new html doc?

annakata 2008-12-15 09:58:23

Answer 3

A:

You are missing a semicolon in the inner div. I have seen some very weird behaviour if the last semicolon is omitted.

<div style="border: 1px solid black; background: green;">green background</div>

Not sure what version of IE you have, but this works in IE7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
  <head>
    <title>Test</title>
  </head>  
  <body>
    <div style="background: yellow;">
     <div>
        <div style="border: 1px solid black; background: green;">green background</div>
      </div>
    </div>
    <div style="margin-top: 100px;">
      IE gives me a yellow background, unless i take away the border of the green 
      background div.
    </div>
  </body>
</html>

Gamecat 2008-12-15 09:31:36

In opera it looks, fine. In IE it is wrong.

Gamecat 2008-12-15 09:46:55

Answer 4

A:

You need to "give layout" to the first div. You better do this using IE6 targeted styles:

<style>
   * html .haslayout {
       display:inline-block;
   }
</style>

...

<div style="background: yellow;" class="haslayout">

This is a known IE6 issue with the hasLayout attribute. Read more on it here - http://www.satzansatz.de/cssd/onhavinglayout.html

Eran Galperin 2008-12-15 09:57:50

FF and IE-trans do different things with that inline-block though. Though I think it's better to fix the problem not the symptom, you're quite correct and haslayout could be more easily given with zoom:1.0; if the OP really can't use strict.

annakata 2008-12-15 10:02:24

I've modified it to use IE6 specific rules

Eran Galperin 2008-12-15 10:06:31

not a fan of conditional rules? (Not nitpicking, I'm not sure about best-practice myself)

Jimmy 2008-12-15 22:47:10

I'm not a fan of using multiple stylesheets. This rule targets IE6 only and solves the problem

Eran Galperin 2008-12-15 23:42:57

hasLayout seems to be the source of a lot of IE bugs, this included, and this presents a nice handy way to add "layout" to any element.

Sam 2008-12-16 08:23:12

Answer 5

A:

The answer is verry easy, because you nesting diverent div's, and none off them has a height, so there is a overflow for IE6. do this:

<div style="background: yellow;height: 1%;">

and it will work just fine.

2008-12-15 22:44:05

ansaurus

tags:

views:

answers:

What is wrong with this simple CSS in IE?

related questions