IE8 - Display of one page affecting another

HTML & CSS
1

I have a page which displays as expected in all browsers that I have tried, including IE8.

But, in IE8, if I visit another particular page first and then enter the URL of my page, the display is slightly different. So far as I can see there is an additional space immediately below an H1 element at the top of the page.

So, the rendering of my page is affected by which page I have visited before.

Any thoughts?

2

We’d need to see this in action to advise. Can you provide a link?

3

Thanks Ralph.

My site is here. Unfortunately, I can’t share the link to the previous page that sends things awry because it’s behind a corporate firewall.

This is what it looks like initially:

But after visiting the other page and then retyping the URL, I see this:

It looks as if the margin and/or padding after the H1 element has increased, meaning that the header DIV grows taller than the height it is supposed to be.

The exact version of IE where this happens is 8.0.7601.17514.

Hope that helps! Clues welcome (and although I can’t see why one page should affect another, maybe there is a simple CSS fix). I’m not keen on absolute positioning, but am struggling to find a way to get the footer as I want it without using absolute on the DIVs.

4

I can’t say exactly what’s going on there, but my hunch is that it has to do with inline elements (like span and img) sitting alongside block elements (like h1). It’s better not to do this. So always make sure an inline element is wrapped in a block element in the presence of other block elements. In the past, before I knew this, I did get similarly odd results, with margins (or at least vertical spaces) seeming to appear and disappear somewhat randomly.

5

The second picture is the same as the display you get in IE7 so it might be something to do with your firewall controlling the way that the site is being viewed.

Wrap the section that Ralph mentioned in a div and float it right with a width and that will cure IE7 and most likely your IE8 issue.


<h1> Diner Points </h1>
				[B]<div style="float:right; width:300px">[/B]<span id="SiteMap"><a href="#SiteMap_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="http://www.dinerpoints.com/WebResource.axd?d=gBk14ZC87frMGApLh3AaTJMBDRWzOWZ-ixWLwSZpERLDK_zmOY4qpJbOC3pGB2A0FWdbB4rfFMrHbWWGXhjJNLq5_uw1&amp;t=634413663177885782" style="border-width:0px;" /></a><span>Home z</span><a id="SiteMap_SkipLink"></a></span><a href="#Menu_SkipLink"><img alt="Skip Navigation Links" src="http://www.dinerpoints.com/WebResource.axd?d=gBk14ZC87frMGApLh3AaTJMBDRWzOWZ-ixWLwSZpERLDK_zmOY4qpJbOC3pGB2A0FWdbB4rfFMrHbWWGXhjJNLq5_uw1&amp;t=634413663177885782" width="0" height="0" style="border-width:0px;" /></a>[B]</div>[/B]

(inline styles for example only - add a class instead as per usual)

6

Firstly Ralph for the clue about block and in-line elements. That led to me tidying things up a bit, but ending up with this (yes, have a good laugh!):

Then thanks to Paul for causing me to realise that pressing F12 in IE would be a sensible thing to do - which led to me finding that the SharePoint page was shoving IE8 into IE7 mode - and once there, it didn’t want to come out again. Also for the suggestion of adding widths to the DIVs.

Between you, the problem is solved. Thanks very much for your help!