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 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    HTML 5 code doesn't work

    Hi,

    Please see URL: http://backstageweb.net/newsite/

    The scroller "pages" are coded in HTML 4 like this (the 'hello' link; this page has the original coding from the template page):

    Code:
    <div class="section" id="home">
    	<div class="content" id="page_one">
    		<p>Lorem ipsum ...</p>
    	</div><!--end 'content'-->
    </div><!--end 'home' div-->
    with this CSS:

    Code:
    .section { min-height: 800px; padding: 40px; }  /* ---scroll applies to ALL sections---*/
    	
    #home {background:url(../images/bg_home.jpg) top center fixed no-repeat; background-size: 100% 800px;}
    
    #portfolio {
    	background:url(../images/bg_bluespot.jpg) top center fixed no-repeat; background-size: 100% 800px;
    	}
    That works. But when I try to do this:

    Code:
    <section id="home">
    	<div class="content" id="page_one">
    		<p>Lorem ipsum ...</p>
    	</div><!--end 'content'-->
    </section><!--end 'home' section-->
    with this:

    Code:
    section#home, section#portfolio, section#terms, section#contact { min-height: 800px; padding: 40px; }  /* ---scroll applies to ALL sections---*/
    	
    #home {background:url(../images/bg_home.jpg) top center fixed no-repeat; background-size: 100% 800px;}
    
    #portfolio {
    	background:url(../images/bg_bluespot.jpg) top center fixed no-repeat; background-size: 100% 800px;
    	}
    ...it doesn't work. Why not?

    Thanks,

    John

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    What browser are you trying it in? As HTML 5 hasn't become a standard yet the support for the various new tags it has proposed varies between the different browsers.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    johndove (04-29-2013)

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Felgall,

    Latest version of Firefox (20). Should be good with HTML5.

  • #4
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    What doesn't work? I just tested it myself, and it works fine.
    My signature :)

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    The version of it that's up there is html 4 and id does work fine. Maybe I should re-code the page in html 5 and put it up so you can compare.

  • #6
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    before I do that, in IE, it's not going to work until IE10, right? If that's the case, it's pretty much a moot point.

  • #7
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,139
    Thanks
    7
    Thanked 257 Times in 256 Posts
    It should work in IE9+

    Dave

  • #8
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    compare this (html 5) with the original

  • #9
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,139
    Thanks
    7
    Thanked 257 Times in 256 Posts
    Hard to tell the differences, with your different backgrounds on the pages. Could you use the same backgrounds, or point out what the specific difference is you're referring to?

    Dave

  • Users who have thanked tracknut for this post:

    johndove (04-29-2013)

  • #10
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    What's not working? The background? You're not referencing the same background for HTML5.

    Original version:
    Code:
    #home {
    background: url(../images/bg_home.jpg) top center fixed no-repeat;
    background-size: 100% 800px;
    }
    #portfolio {
    background: url(../images/bg_portfolio.jpg) top center fixed no-repeat;
    background-size: 100% 800px;
    }
    HTML5 Version:
    Code:
    section#home {
    background: url(../images/bg_audience2.jpg) top center fixed no-repeat;
    background-size: 100% 800px;
    }
    section#portfolio {
    background: url(../images/bg_bluespot.jpg) top center fixed no-repeat;
    background-size: 100% 800px;
    }
    The "bg_bluespot" picture doesn't even exist actually.
    My signature :)

  • Users who have thanked ttkim for this post:

    johndove (04-29-2013)

  • #11
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    see my original post in the thread. HTML 4 markup vs. HTML 5 markup.

    this:

    Code:
    <div class="section" id="home">
    	<div class="content" id="page_one">
    		<p>Lorem ipsum ...</p>
    	</div><!--end 'content'-->
    </div><!--end 'home' div-->
    v. this:

    Code:
    <section id="home">
    	<div class="content" id="page_one">
    		<p>Lorem ipsum ...</p>
    	</div><!--end 'content'-->
    </section><!--end 'home' section-->
    with different CSS too.

  • #12
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    @ttkim - the NAV buttons aren't working.

    I know, not worried about the bkgrnds, just the nav.

  • #13
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Oh, I see. It's <div class="pageScrollerNav topNav light">. Thanks guys.


  •  

    Tags for this Thread

    Posting Permissions

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