Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: IE 7 hiding div

  1. #1
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts

    IE 7 hiding div

    Hi

    I am having a problem with building a client website.
    Link here
    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

    Andy
    Last edited by ahayzen; 06-10-2010 at 11:28 AM.

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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:

    Code:
    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:

    Code:
    <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;">
    	</form>
    
    </div>
    <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:

    Code:
       <!--[if !IE]>-->
    		<!-- Second Loop -->
    ..
                <!--<![endif]--> 
    		<!-- 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.

  • Users who have thanked Scriptet for this post:

    ahayzen (06-10-2010)

  • #3
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Ok thanks. I'll try your suggestions. But why doesn't the w3c validator pick up any of these problems?

    Andy

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by ahayzen View Post
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ahayzen (06-10-2010)

  • #5
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Thanks for your help guys.

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

    Andy

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Ah OK whatever works then I guess but you are still overcomplicating it!


  •  

    Posting Permissions

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