SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8 - Display of one page affecting another

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    We'd need to see this in action to advise. Can you provide a link?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <h1> Diner Points </h1>
    				<div style="float:right; width:300px"><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></div>
    (inline styles for example only - add a class instead as per usual)

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •