Chad 25

This map displays fine on other browsers, even IE8.

Here's the CSS for the map:

#map { position:absolute;top:205px;right:0;bottom:0;left:0;z-index:999;height:100%;display:inline-block; }

The height:100%;display:inline-block; are my attempts to get it to work in IE7 (it only made it worse, and by the time you see this question, I'll probably have removed it).

So what gives!? It's not nested in a relative position element, it simply doesn't display correctly. Is there an ie7 bug with this: position:absolute;top:205px;right:0;bottom:0;left:0?

Driving me crazy!

UPDATE:

Can someone check with IE7? I'm using a small JavaScript hack to make it look right, I think. According to LitmusApp.com, it looks better... but appears to extend the page height a very long way. Not sure if that is only because of the method used to access the page or not. The url to hit is at the top of this question.

Thanks in advance!

3 answers

0
points
This was chosen as the best answer

IE7 and all IE versions are known to have these position bugs, either you can try changing the doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Or using conditional comments in the head tag

<!--[if IE 7]>
              <link href="styles/IEstyles.css" rel="stylesheet" type="text/css">
    <! [endif]-->

And in your IE 7 css, just change the top right ttributes so it is where you want :)

Hope that helps.

Answered over 6 years ago by Kyle Sevenoaks
  • Testing now... thank you for the quick response. brb Chad over 6 years ago
  • Made the doctype change, IE7 still seems to only want to show half the map. If you look at the link in IE7, you'll see the map doesn't extend all the way to the bottom of the screen. Does IE7 not like the left:0;bottom:0;right:0; method of expanding the map to near full-screen? Chad over 6 years ago
  • I saw the map, this is an odd one.. TRy changing the display to block. Kyle Sevenoaks over 6 years ago
  • Did you use conditional comments too? IE7 doesn't like a lot of positioning things. Kyle Sevenoaks over 6 years ago
  • Not yet, unfortunately I can't get to my dev workstation for a few hours. I'll work on some conditionals on a page-by-page basis - see if we can get this thing working. Thank you for the suggestions. Chad over 6 years ago
  • made a small js hack, can you check in IE7 to see if it's rendering correctly? Chad over 6 years ago
1
point

From memory, IE only supported using one of left or right on positioned objects. (It must want you to use width instead). I'm guessing that IE8 now behaves like other browsers have for years.

A reference for my memory: http://css-discuss.incutio.com/wiki/Absolute_Layouts

Answered over 6 years ago by Richard Grevers
  • made a small js hack, can you check in IE7 to see if it's rendering correctly? Thanks! Chad over 6 years ago
1
point

SEems to be working ok for me :)

Answered over 6 years ago by Kyle Sevenoaks
  • Thank you! I can now move on in development... lol, phweew! Chad over 6 years ago
  • No problem :) Kyle Sevenoaks over 6 years ago