Home/ Questions/Q 250333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T21:30:08+00:00

I noticed that a site I’m maintaining had a little layout bug in FF/IE8/Chrome

  • 0

I noticed that a site I’m maintaining had a little layout bug in FF/IE8/Chrome (on this page for example) – the image in the top left hand was a little high, straying into the header at the top.

I wondered why I hadn’t notice it when I took over the site, but I realise it has only since I upgraded IE7 to IE8 that it had become apparent – obviously the problem will have long since exist in ‘proper’ browsers.

For these ‘proper’ browsers, this absolutely positioned image need the top attribute to be set to 59px, as opposed to the 56px that IE7 (and below) require.

A solution is easy, but a) I want to understand the problem first, and b) I would like to consider a range of solutions (I know there will be more than one). With that in mind…

  • What is the cause of the problem?

A lot of positioning problems were due to the erroneous IE box model, but I thought this had been fixed by IE7. Is it a box model issue that still affects IE7 or is it something different?

  • What is the best solution?

A number of sources suggest that using condition comments to include a IE7 patch CSS file is the way to go:

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

Straightforward, but I’d rather not have to insert that into the header of every single page on the site (but of course I will if I have to).

I know that there are numerous CSS hacks that could probably do the job, but there is a school thought that says that CSS should be avoided because they are harder to maintain, especially as new browsers emerge. I can certainly sympathise with this mindset; however, this site is getting redeveloped entirely in within 3 months so I’m looking at a short-term solution. If I were to choose to employ a CSS hack, what do I need to do to change the behaviour for IE7 and below?

I’ve also read that good reset stylesheets can avoid many of these problems, so for a laugh, I applied Eric Meyer’s Reset Reloaded stylesheet – as expected, it borked the site significantly.

So to recap, what exactly is the problem; what is the best long-term solution, and what solution would be easiest to deploy, give the short-term nature of the problem?

CSS (‘Banner02’): http://new.eminox.com/_lib.css/content.css

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">

    to:

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

    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!

    • 0