2

The issue is best explained with pictures, but you can try it for yourself here:

http://pastehtml.com/view/b3y7e9uz6.html

Simply compare ie7 to (ie8 or ff or chrome). It looks like this in modern browsers:

Modern Browsers

and like this in ie7:

ie7

What is causing it to be offcenter in ie7?

Alex KeySmith
  • 16,657
  • 11
  • 74
  • 152
Jonah
  • 15,806
  • 22
  • 87
  • 161
  • Posting the .css would be helpful. – Mahesh Aug 15 '11 at 14:44
  • Because you don't have a DOCTYPE declaration, the browser is running in quirks mode, you may wish to add a doctype to make browsers run in standards mode. Just in case IE7 is simply interpretting the quirks mode worse than others. – Alex KeySmith Aug 15 '11 at 14:47
  • Scrap my last comment I just added a doctype and fixed the broken tag and still not working in IE7... so not to do with the doctype. http://pastehtml.com/view/b3yazy3mt.html – Alex KeySmith Aug 15 '11 at 14:50
  • @Mahesh, the css is in the post I linked to. – Jonah Aug 15 '11 at 14:53

1 Answers1

4

As soon as you remove the position: absolute everything corrects itself, minus the red border; however, that is extremely easy to solve by applying the appropriate borders to the sides you want them on.

If you must keep the position: absolute add left: 0 and that appears to correct it as well. IE7 probably requires a left/right or gets slightly messed up as it doesn't know where to position it.

Akkuma
  • 2,215
  • 3
  • 16
  • 21
  • Yep your problem is that you don't specify where it should be positioned. Best to add one of `top` or `bottom` and one of `left` or `right` to specify where it should position itself. Also, as @Alex Key says, you could probably do with a DOCTYPE (please use the elegant ` ` - no reason not to - http://stackoverflow.com/questions/5629/any-reason-not-to-start-using-the-html-5-doctype). – Robin Winslow Aug 15 '11 at 14:53
  • 1
    Good spot on the position : absolute, just had a play with that myself. Interesting stuff, I hadn't seen that before so did a little googling and came across this http://www.quirksmode.org/css/contents.html#t28 – Alex KeySmith Aug 15 '11 at 14:54
  • @Alex Key What in particular did you come across in there? – Akkuma Aug 15 '11 at 15:05
  • @Akkuma. Not a huge amount on quirksmode unfortunately just a mention that there are bugs in IE7 (that I didn't know about) when positioning absolute inside a relative container. Not really the link that was interesting more that a bug / behaviour I didn't know about. Thanks for pointing it out. – Alex KeySmith Aug 15 '11 at 15:24