ansaurus

Question

Positioning Bug <IE8 - Why? Best workaround?

Answer 1

+2 A:

Actually, I think your problem isnt with the positioning of 'banner02', instead it is with the height of 'banner01' div across the top. I opened the site in FF and IE7 and lined up the top edge of the page. The image 'banner02' is in exactly the same height position, but the header div 'banner01' was taller in one browser than the other. I also think IE7 was running in 'quirks mode' which was slightly changing the box model.

To make FF and IE7 look the same (sorry I dont have IE8 installed, and this is my work PC so I can't go install a much to check them all), I made 2 changes:

1) ~~change the DOCTYPE from:~~ <-- this probably isn't neccecary. see my comment below.

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

to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

2) define a height for 'banner01', because none was previously set (in Global.css):

.banner01 {
  width: 770px;
  height: 48px;
  background-color: white;
  border-color: #555555;
  border-style: solid;
  border-width: 10px 0 1px 0;
}

(banner 02 is at 59px, so we choose a height of 48 because 48 + 10px top border + 1px bottom border = 59px)

That cleared it up for me... but again, I only tested it in 2 browsers. Hopefully that helps!

rally25rs 2009-06-17 13:55:48

I went back and looked at the DOCTYPE and put it back to what you originally had, and banner01 and 02 still lined up, so I think you can ignore my #1 above. Sorry! I guess it depends on what IE8 likes...

rally25rs 2009-06-17 14:01:13

Technically that page isn't coded properly since the doctype says HTML and the code is XHTML. In practice it doesn't matter much because browsers use tagsoup parsers.

Mr. Shiny and New 2009-06-17 14:10:07

On the positive side, your suggestion renders fine in IE7/8/Chrome2/FF3.5. So how come explicitly defining the height of banner01 made such a difference? I would have (foolishly) expected both to be the same height if rendering the same content.

CJM 2009-06-17 14:21:10

@Mr Shiny - You are right, but the trailing slashes are happily ignored in empty elements. However, trust me when I say that this page is a work of art compared to the site originally delivered by the supplier (a marketing company).

CJM 2009-06-17 14:24:47

@Rally: I'm curious why you (originally) suggested regressing to a Transitional stylesheet... Also why you thought that it would run in quirks mode on IE7 - AFAIK it should be running in almost-standards-mode on IE7 (though I haven't explicitly confirmed that today).

CJM 2009-06-17 14:29:20

@CJM: Yeah I think I was wrong to suggest the doctype change, which is why I struck it out. I didnt fully edit/remove it from my suggestion just because I feel like that would be covering up my mistake ;) I had made that doctype change first, and it looked like it had a positive effect in IE7, without the height of Banner01 being set, which is why I originally stated it. As to why IE7 and FF werent rendering the contents of Banner01 to the same height; I'm not sure, I didn't dig that deep into it. My first guess was box model stuff which is why I messed with the doctype.

rally25rs 2009-06-17 16:01:54

Well it's working... I just wish I knew *why* it is working! ;)

CJM 2009-06-17 16:58:19

does that mean you want to mark my answer as the solution? ;)

rally25rs 2009-06-17 20:39:33

Don't be hasty - I need to consider all the other answers too!

CJM 2009-06-18 12:54:08

ansaurus

tags:

views:

answers:

Positioning Bug <IE8 - Why? Best workaround?

related questions