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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    content loading at bottom, repositions to top once loaded

    Hi,

    I'm building a simple portfolio gallery and am having trouble determining why the content is loading at the bottom of the page and then "jumping" into place once all images are loaded. This occurs in all browsers I tested on both the Mac and PC which were Mac - Firefox 3.0.5, Safari 3.2.1, Opera 9.6.3. PC-IE 6 and 7, Firefox 3.0.5, and Opera 9.27. I'm new to JavaScript and new to using unordered lists in CSS. Any help is greatly appreciated.

    Here's the link to the sample page:

    http://www.royaltin.com/MZ09/marla/recent.html

    Thank you for any guidance you can provide.

  • #2
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    In this part of the code of your page:
    Code:
    <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");
    
        <!--[if lt IE 6]>
    	<style media="screen,projection" type="text/css">
    	#gallery { display: block; }</style><![endif]-->
    	</script>
    remove IE conditional comment out of the <SCRIPT> tag and see it that works for you, like this:
    Code:
    <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");
    </script>
        <!--[if lt IE 6]>
    	<style media="screen,projection" type="text/css">
    	#gallery { display: block; }</style><![endif]-->

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up resolved

    Awesome. Thanks very much for the suggestion. I actually re-worked the whole layout yesterday and got rid of margins in the ul and that fixed everything. Thanks for taking the time to look at my code. Much appreciated.

    results are here:

    http://royaltin.com/MZ09/marla/recent.html

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    Margins weren't the problem, the conditional comment in its original form was It was inside the script tag, and wasn't really counting as a comment, applying DISPLAY:BLOCK to your #gallery not only in IE6 [overwriting previous DISPLAY:NONE]. If you write it as it was, your gallery now appears on the left and then jumps to its position when its fully loaded.
    Anyway, glad everything works, and I also learned something [didn't know that you can put STYLE tag inside SCRIPT and it is going to be parsed and applied while throwing an error, at least in FF].


  •  

    Posting Permissions

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