IE8 rendering problems - browser fault or genuine CSS fault?

HTML & CSS
1

I was asked by a colleague about IE8 and the standards opt-out meta tag malarkey today. I said that I didn’t expect the company’s various sites to break, as we’d built to standards (for the most part) for some time, with the exception of the banking service which is getting very long in the toothe.

Regardless, I thought I’d take a look at some pages in IE, and there were some problems. The thing is, these issues do not show in other standards-capable browsers (incl Firefox, Safari, Oper and also IE6/7), so if I spot an error in IE8 beta 1, how do know whether it is:

  • a genuine problem with the CSS that all the other browsers have, to date, been less fussy about
  • a problem just with the beta version that can safely be ignored (for now) on the basis that IE*'s rendering engine may not be as per final version and therefore errors are to be expected or
  • a problem in IE8 beta, which will also be a problem in IE8 final … and is going to require a horrible IE8-specific CSS tweak.

How does one know?

For info, the problems I spotted were as follows:

http://www.nationwide.co.uk/default.htm - broken tab on right hand side
http://www.nationwide.co.uk/creditcard/ - layout of left-most panel all wrong - uses abs positioning but is over other items
http://www.nationwide.co.uk/signon/default.htm - the header layout is broken (the blue area is not appearing flush left, causing other problems)

The annoying thing is that the header in the last example was only recently re-worked by me as part of another project and I was able to remove 8-year-old table based markup and image-based navigation (with rollovers) for something much cleaner, so it’s annoying to see it break in IE8.

So, how does one know whether to say “It’s OK, it works on all other browsers, so it must be an IE8 problem that will be fixed in the next beta version” or say “Oh crap, the CSS on here must be broken and I didn’t know before now”

IMPORTANT: the CSS on nationwide.co.uk is an absolute mess, I will say, in that it has suffered what a lot of sites like this do - layer upon layer upon layer of new styles and duplications thanks to multiple people updating. It’s really nasty to debug, and I’m not asking anyone to do this, honestly! I’m just after an opinion about whether weird layout problems that show up are indicative of CSS problems or browser rendering engine weirdness. I hope that makes sense

2

How does one know?

You don’t know and that’s why I won’t do any bug fixes until the version is complete.

I never test live sites on beta versions and will only start testing when the version is finalised in the same way that IE7 had a finalised version before it was released. There’s just no point in trying to hit a moving target.:slight_smile:

You could of course report your problems using the Report a webpage tool.

Or check all the other bugs that have been posted.

I don’t really see a point in checking live sites unless you are a beta tester because you can’t really bugfix until you have a stable and finalised version. Its worth keeping an eye on things but I wouldn’t make changes yet.

In your broken nav page the problem seems to go away if you increase the width by 1px

e.g.


#page {
   [B]width:755px;[/B]
 text-align: left; 
}

You can see the result here.

http://www.browsercam.com/public.aspx?proj_id=426187

I haven’t added up all the dimensions up but you should check that they all add up exactly. I don’t think you have a width on the first tab so it may be that the text is making it 1px too big.

3

The same thing is also evident in FireFox if the text is increased by one step, so this problem is not really an IE8 specific one.

4

That was kind of my thinking, but I know that wheels can turn slowly internally, so I’m trying to get a bit of a head start where I can.

As for the header page on the bank, I’ve saved a version here that appears to be erroring only for IE:

http://lloydi.com/temp/header-test-case/header.htm

(font size changes are not what’s triggering here)

But, like you say, it might just go away with Beta 2, whenever that turns up.

My thinking was that if all other browsers render it OK, then it is most likely an issue with IE8 rendering engine in this version and I’ll keep fingers crossed on that!

5

As for the header page on the bank, I’ve saved a version here that appears to be erroring only for IE:

That looks like a different issue to the other header where content was too wide.

I think this issue is that you have not specified a left position for the absolute header and therefore IE8 will place the left at auto which it thinks is somewhere along the page. Older IE versions have a similar bug where auto depends on the text alignment and if you use anything except text-align:left then auto on an absolute elements is affected by the text alignment value.

Try this


#header-nav {height:3.6em;min-height:3.6em;position:absolute;top:40px;width:100%;font-size:1.2em;font-weight:bold;clear:both;padding:1px 0 0 0;[B]left:0[/B]}

I haven’t installed IE8 so this is just checked on the remote viewer in browsercam.

But, like you say, it might just go away with Beta 2, whenever that turns up.

I will wait until the current version is updated before I start playing with it for real. I’m sure there will be minor tweaks and fixes needed but hopefully nothing too serious. The beta version of IE7 broke a lot of sites but the final version was pretty good and very few adjustments were needed so fingers crossed this is the same.:slight_smile:

6

Yep, it’s a known problem - fixed width container + scalable text inside tabs = esaily broken tab layout. Templates are in build for new CMS that solve that particular problem, but the CMS changeover drags onnnn and onnnnnn.

Thanks - I’ll give that a go, but am still not sweating too much about it. As you say, next version may resolve these kinds of glitches.

7