IE : A truly bizarre specimen!

[Pennimus]

I've been having some serious issues with a blog page that is output from MySQL in Internet Explorer. At first, I thought it must be something to do with the php/mysql side of things but having copied the outputted source and pasted it into a static HTML page, I'm still seeing exactly the same issues.

The weird thing is, this page doesn't use any different styles than the rest of the site really, yet the behaviour is so totally wrong I can't quite believe it.

The urls below are all located at http://www.board-crazy.co.uk

- Here is the actual dynamically generated page : /newsite/blog.php?id=22
- And the static HTML I copied from the above : /newsite/ietest2.html
- And an example of a page that actually works : /newsite/index.php
- View /newsite/blog.php?id=22 in firefox to see how it's supposed to look.

You'll notice that on the malfunctioning pages the left borders disappear, and the content itself doesn't even appear to be there until you scroll down then back up again. Some bits appear in random locations and some never appear at all.

Actually hopefully you won't notice that and it will turn out to be a bug in my IE, but somehow I think that's just wishful thinking.

I believe the only difference in terms of classes/ids used in the screwed up page is the addition of <div id="add"> which I have commented out in other test versions to no avail.

I would dearly appreciate any help with this. As you can tell by the date in the blog, I've been working on this since early December and to find it not working when I put the finishing touches to it is a bit of a downer :(

Regards,
Adam

[harbingerOTV]

I think you may have written the problem in this post. You have


<div id="add">


If I'm not mistaken you can't start any ID or Class with a numeral or a, b and something else. Try just simply renaming your id="add" to id="plus" or something and see if that fixes anything.

[drhowarddrfine]

There is nothing wrong with his id and you can start an id with any letter.

[Bio2hazard]

It probably won't fix the problem but its worth fixing anyway:
<a href="http://del.icio.us/post?url=<?php echo $url?>&amp;title=Board Crazy - <?php echo $title?>" title="Post This To Your Del.icio.us Bookmarks"><img src="layout/delicious.gif" alt="Post To Delicious" />Post To Del.icio.us</a></li>
<li><a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=Board Crazy - <?php echo $title?>&amp;u=<?php echo $url?>" class="popup1" title="Add This To Yahoo My Web 2.0"><img src="layout/yahoo.gif" alt="Add To Yahoo! My Web" />Add To Yahoo! My Web</a></li>

As you can see, the php tags there don't get parsed resulting in inproper URL's. :)

One thing to always renember: PHP / MYSQL can only output HTML code. If your design is f00ked, then it is never php itself. Perhaps its html that gets outputted trough php, but its not php itself. If you copy and paste thesource out of a php file you get an 1:1 replica ( a 1:1 replica of what you see that is )

- Felix :)

[Pennimus]

I've had a bit more of a chance to experiment with things.

As suspected, the php non parsing error wasn't causing the problem (although thanks for pointing that out BioHazard, now fixed).

I've been playing around with applying position: relative to virtually everything, with mixed results. What it has eventually achieved is causing the content to actually appear everytime now. I believe this is a fairly common IE bug.

What was causing the problem of the disappearing border is an interaction between the border divs (#grey and #container) and whatever sits in the #content div. I hadn't noticed this before but the error does actually happen on a number of other pages in IE. The common link between them? The content wasn't long enough to extend beyond the bottom of the #rightcol div on the right. I noticed that is I scaled my window on one of these short pages so that the content does go beyond the end of the right column, the border magically popped into existence.

Solution was to add a few hundred pixels of padding to the bottom of the #content div ensuring that it would be tall enough to sit beyond the right column regardless of content.

Not ideal, but it gets the job done.