Content overflow on refresh of dynamic content (IE)

**WildScot** · Mar 27, 2011 08:02

Hi,

I'm really stuck with this and have spent all day reading up and experimenting with {overflow:hidden/auto;}, clearfix hacks and empty {clear:both;} divs but all to no avail.
The problem is only obvious in Internet Explorer 7 & 8 (I'm not even looking at 6

). I have a page with a Google map and directions gadget (Map and directions for Edinburgh bus and coach parking: Pringle's Coach Park) but whenever I use the directions gadget the resulting directions spill off down the page below the footer.
Using overflow:hidden simply hides the relevant info and map, adding class="clearfix" to the parent div and a declaration in my styles.css has no effect.
I'm pulling my hair our here!

**Rayzur** · Mar 27, 2011 21:08

Hi, Welcome to SitePoint

I reloaded your page several times in IE7/8 and I could not recreate the problem. Nothing spilling over the footer for me.

Did you get this fixed already?

**EarlyOut** · Mar 27, 2011 21:18

I'm definitely seeing the problem in IE9, though I can't offer any solution. But at least it's clear that you're not experiencing something unique to your PC.

Just loading the page doesn't reveal it. Enter a starting point, like Culloden, Scotland, and hit "Go" to get directions.

**Rayzur** · Mar 27, 2011 23:03

Enter a starting point, like Culloden, Scotland, and hit "Go" to get directions.

Yes, I see it now. IE does not seem to be redrawing the page.

The problem will most likely be with that iframe. I see they (google) have IE in compatibility mode with the IE=EmulateIE7 meta tag in the iframe page. That's not going to be helping things any.

**WildScot** · Mar 28, 2011 01:51

Thanks for looking over this for me. That's exactly the problem behaviour - when the directions are loaded it spills off below the footer. Predictably it seems to work fine and redraw the page on every other browser I've tested.

I can set overflow:auto on the parent div and this gives me scroll bars within the page but it's still pretty ugly, the footer respects its position but the white background doesn't extend properly and basically... It's a mess.

I'm thinking that I may be stuck here as it's external code that I'm embedding thus I can't have full control? Problem being it's a pretty important function for the site and one which I'd demonstrated to the client before I'd really tested it on the page.

Can anyone think of anything else that may be worth a try?

**noonnope** · Mar 28, 2011 03:48

What is there to try?

It's not really a redraw, it's a completely different page. And that page is having problems, not the first page.

Since you use AP divs, of course the footer will not account them and thus create an overspill impression. Put your divs back in the flow.

**Paul O'B** · Mar 28, 2011 05:02

Hi,

I don;t know if it has any bearing here but IE always has had problems with dynamic content and mis-positioning elements and the usual solution is to cause a re-flow of the page dynamically after the content has been added.

Usually this can be done by setting a classname on an element.

e.g.

Code:

<script type="text/javascript">
function fixIE() {
   var el =  document.getElementById("wrapper");  
    el.className = el.className;//reflow
}
</script>

The problem would be is that you need to call that function after your iframe has been resized so you will need to work out where and how to call it. Usually you would just add it to the end of the script but I'm guessing that you don't have access to that script.

**Victorinox** · Mar 28, 2011 05:40

Possibly not related to the problem but worth addressing:

On all pages there are two opening html tags one with an xmlns attribute, despite the HTML 4.01 Transitional DOCTYPE, and one without.

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>

Meta elements in the head use a mix of HTML and XHTML tag closing. If the document is HTML then only > is required rather than />.

Code HTML4Strict:

<meta name="Description" content="Location map and directions for Pringle's Coach Park, 70-74 Bangor Road, Edinburgh" />
<meta name="Keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

**WildScot** · Mar 28, 2011 05:56

Thanks again for your attention guys. I'm relatively inexperienced and appreciate any help I can get.

@noonnope, I understand your point about absolute positioning and removing the divs from the flow but as far as I'm aware I'm not using absolute positioning on any of the divs. Perhaps I'm missing something?
If it helps the stylesheet is visible here: http://pringlescoachpark.com/styles/style.css (it could do with some tidying up!).

@Paul O'B, that sounds an interesting solution. Unfortunately I don't have any control over the script it's a Google Gadget from here: Driving Directions Gadget. I'm pretty clueless about javascript, although I do have the Sitepoint book which is next on the list

. Can you give me any pointers as to how I might implement this?

@Victorinox, oops, my inexperience shines through. I had tested my code and was aware there were a few issues which I was planning to review/repair once I had completed the main elements. I'll get on to that now.

I'm know this isn't news to anyone but it's frustrating when it renders correctly in every other browser I've tested. I'm determined to get there though.

**Paul O'B** · Mar 28, 2011 07:13

Originally Posted by WildScot

Thanks again for your attention guys. I'm relatively inexperienced and appreciate any help I can get.

@noonnope, I understand your point about absolute positioning and removing the divs from the flow but as far as I'm aware I'm not using absolute positioning on any of the divs. Perhaps I'm missing something?
If it helps the stylesheet is visible here: http://pringlescoachpark.com/styles/style.css (it could do with some tidying up!).

Yes, I think noonnope just looked with fiebug and saw the curvy corners elements that are absolutely placed for the round corners. Maybe it would be worth disabling the curvy corners for testing and eliminating that as a cause.

**noonnope** · Mar 28, 2011 07:29

Guilty. On the charge of using Firebug.

Not guilty on this case though.

This is what IE developer tool reveals, inside the div "clearfix curvyIgnore" with id "main", for its two child divs:

Code:

position: absolute; padding-bottom: 0px; background-color: #ffffff; padding-left: 0px; width: 960px; padding-right: 0px; background-repeat: repeat; direction: ltr; height: 883px; top: 15px; padding-top: 0px; left: 0px;

position: absolute; text-align: justify; padding-left: 60px; width: 840px; padding-right: 60px; top: 0px; padding-top: 15px; left: 0px;

The second inline is for div "autoPadDiv", the parent for iframe.

There are quite a few inline for position:absolute.

**WildScot** · Mar 28, 2011 07:54

You, gentleman, are a pair of geniuses! (Genii?)
Disabling the curvy corners script on that page has solved the problem.

OK, I'll need to go and have a look at what this means to the wider site and explore exactly how this is being caused.

My first instinct is that if I remove the curvy corner styling for the #main (parent of the iframes) div on this page, this should do the trick. I'll probably create a new div declaration #main_location or similar to use on this page and use images top and bottom to style the corners if need be - does that sound like a reasonable approach?

I can't tell you how happy I am to have this sorted out. I've probably learnt a valuable lesson about disabling scripts when error testing too. Ah well, another inch up the learning curve.

Thanks again folks.

**Paul O'B** · Mar 28, 2011 10:33

Yes it sounds as though it the absolutely positioned elements that the curvy corners are adding that are causing the problem. IE always has problems with absolute positioning and dynamic content as I mentioned above.

It's probably best if you create a reduced test case and see if its one specific element that's the trigger or just the whole general routine.

**WildScot** · Mar 28, 2011 13:58

OK - Damn you Internet Explorer!!

After many, many hours I have what I need up and running. In case it's any help to anyone else I'll stick a quick summary below but if I could just check one more thing I'd appreciate it.

Will it cause any harm to have empty divs in the page code with no declaration in the main style sheet?

In order to maintain the curvy corner effect on that page but without the overflow from the expanding iframe (caused by the absolute positioning from the curvycorners.js) when the driving directions are loaded I've resorted to a conditional style-sheet for <IE9 which will hopefully recognise the border-radius declaration - I'll need to set up another virtual machine to test that.

In the page html I've added divs before and after the #wrapper and before and after the #main content block. These have png images with curved corners set as background, same with the footer.

These divs only have declarations in the false_cc.css file which will only be called by <IE9. This also adjusts the margins etc on various elements to make it all fit. I'm hoping these are simply ignored by any other browsers without any adverse effect.

I don't know if this is a monstrous hack or a respectable workaround but it seems to work and shouldn't cause issues with other browsers.

Thanks again to everyone above, I'd still be beating my head off a rock without that pointer about the positioning.

**noonnope** · Mar 28, 2011 14:12

Glad to see you've sort that out.

If Genii was for me... than it's correct only as a translation!

Paul does deserves the title fully, though!

Using empty divs for rounded corners it's one thing done before successfully. I didn't look, but it should be OK.

User Tag List

Thread: Content overflow on refresh of dynamic content (IE)

Thread Tools

Display

Content overflow on refresh of dynamic content (IE)

Bookmarks

Bookmarks

Posting Permissions