View Full Version : Resolved IE 7 hiding div

Jun 9th, 2010, 09:31 PM

I am having a problem with building a client website.
Link here (http://www.longcroftallotments.org.uk/)
Here is the problem:
In Internet Explorer 7 if you hover over one of the items such as 'Association background' then if you click on 'Request Membership'. Now let the page load.
Now the problem is that IE 7 seems to hide the 'scroller' div for some odd reason and I'm not sure why. It just displays a white background?!?! (Some IE 7 user may have to click on the center of screen to create the problem.)

Thanks in advance


Jun 10th, 2010, 12:38 AM
Hi Andy,

I took a bit of time to look into this and found the site is pretty poorly coded, infact when I found one problem I uncovered another so I was very surprised that the site manages to look as desired in most browsers!

Your first problem is that on your #scroller and #lbar you have set this:

position: absolute; top:0; left:0; right:0; bottom: 0;

This makes no sense whatsoever and is not at all needed since you are using floats and margins anyway. Even if you were using absolute positioning to have top:0 and bottom:0 makes no sense unless it's some hack of some sort! But get rid of this anyway..

Secondly in-between the #lbar and #content DIV's you are adding:

<div style="width:120px; float:right; height:20px; text-align:left;">
<form name="Printer friendly" action="http://www.longcroftallotments.org.uk/index.php?printversion=true" method="post" target="_blank">
<input type="submit" value="Printer Friendly" style="width:110px;">

<br style="clear:both;">

The highlighted line here will make the #content drop because you are clearing the floats. Just put the printer button in the content DIV and keep the clearing line break if you like just make sure it's within #content.

Thirdly some of your conditional comments are wrongly formatted, therefore different browsers can see different chunks, for example within your menu where you have:

<!--[if !IE]>-->
<!-- Second Loop -->
<!-- End Of Images -->

I'm not an expert on conditional comments as they rarely need to be used, but shouldn't the endif should look like <![endif]--> not <!--<![endif]--> . You have it correct in some places and wrong in others.

Fourthly you are missing your closing head tag (</head>)

I'm surprised it doesn't break more in more browsers but there's some help towards a more compatabile page..I reckon the positioning is the problem in IE7, removing this then causes the expected float drop which I found, which then found the conditional comments error as FF was rendering additional items.

Jun 10th, 2010, 10:41 AM
Ok thanks. I'll try your suggestions. But why doesn't the w3c validator pick up any of these problems?


Jun 10th, 2010, 11:23 AM
Ok thanks. I'll try your suggestions. But why doesn't the w3c validator pick up any of these problems?

Andy The validator and all browsers except IE consider anything in between <!-- --> as a comment and just ignore.

Jun 10th, 2010, 12:28 PM
Thanks for your help guys.

I fixed the problem by changing the position:absolute to position:fixed


Jun 10th, 2010, 07:48 PM
Ah OK whatever works then I guess but you are still overcomplicating it!