www.webdeveloper.com
Results 1 to 6 of 6

Thread: css3 not working

  1. #1
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267

    css3 not working

    A friend is using the following css3 code at http://www.lapearldesigns.com -- which does not run the background cloud animation when first connecting to URL. But it does work when linking to HOME from another page on site.

    Code:
    <style type="text/css">
    html {
        height:100%;
        margin:0;
        background-color:#2a5e8d;
        background-image:url(Aimages/cloud.png);
        -webkit-animation: slide 40s linear infinite;
        -moz-animation: slide 40s linear infinite;
        animation: slide 40s linear infinite;
     }
    body {
        height:100%;
        margin: 0;
        background-image:url(Aimages/cloud.png);
        -webkit-animation: slide-one 40s linear infinite;
        -moz-animation: slide-one 40s linear infinite;
        animation: slide-one 40s linear infinite;
     }
    
    @keyframes slide {
        0%   {background-position:0 0;}
        100% {background-position:2560px  0;}
     }
    @keyframes slide-one {
        0%   {background-position:1280px 0;}
        100% {background-position:3840px  0;}
     }
    
    @-moz-keyframes slide {
        0%   {background-position:0 0;}
        100% {background-position:2560px  0;}
     }
    @-moz-keyframes slide-one {
        0%   {background-position:1280px 0;}
        100% {background-position:3840px  0;}
     }
    
    @-webkit-keyframes slide {
        0%   {background-position:0 0;}
        100% {background-position:2560px  0;}
     }
    @-webkit-keyframes slide-one {
        0%   {background-position:1280px 0;}
        100% {background-position:3840px  0;}
     }
    
    @-o-keyframes slide {
        0%   {background-position:0 0;}
        100% {background-position:2560px  0;}
     }
    @-o-keyframes slide-one {
        0%   {background-position:1280px 0;}
        100% {background-position:3840px  0;}
     }
    </style>
    We cannot figure out why this is happening.

    Any help would be appreciated

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    The problem is that you are essentially looking at 2 different pages. When you view the homepage from any external URL you are going to 'http://www.lapearldesigns.com/' while using an internal link brings you to 'http://www.lapearldesigns.com/index.html'. It might seem that the index file would be the default page loaded but there is something else going on in the back (server-side) which I cannot see and thus cannot explain.

    But viewing the source code of each page confirms that there are differences, including a <style> block in the <head> tag of the page that includes your animation CSS which is only found on the later of the two pages.

  3. #3
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    thanks Sup3rkirby

    We will try to see what's happening on server

  4. #4
    For this make main index.html file in which you have to put your code. and run your next all the pages through your index,html page then there will be change in contents but there will be no change in the background and the background cloud animation will also not change. And also link all the files from index. html file.

  5. #5
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    Figured it out. Back circa 2000, if index was created on MAC it was index.HTM, while PC windows created index.HTML (or vice versa). For some reason (cannot say why), I created both index.HTML and index.HTM pages (as an alternate). In recent years, the index.HTML page was the priority one that downloaded when you went to a URL. Now, in the last few months, this has changed and the index.HTM page was downloading.

    Don't know if this is a "Browser" or "Server" thing?

    The 2 pages for http://www.lapearldesigns.com were similar -- except for the CSS3 cloud animation. The navigation bar did not indicate that it was index.HTM that was downloading so I was confused. The links back to the Home page were specifically to ../index.HTML so that loaded the CSS3 animation version.

    Thanks to all for the help.

  6. #6
    Not so much a browser thing, as a stupid thing...

    The three leter extension wasn't so much a mac thing, as it was a DOS -- scratch that, let's point the finger at the right place -- CP/M legacy thing. (if you really want to go back that far). The original FAT filesystem couldn't support more than 8 letters of filename and 3 letters of extension -- the aptly named "8:3" naming convention. Since that meant you couldn't use .html as a filename, people used .htm back when things like Windows 3.1 still mattered.

    Really though for anything written after ~1998ish there was no excuse for it, but people continue to often do so right up to this day -- be it from blindly copying what someone else is doing, to just plain ignorance.

    In any case, if you have anything that's just .htm at this point, fix it to drag it kicking and screaming into this century. It doesn't really do any harm, but the inconstancy can bite you in the backside given enough time.

    ... as you just discovered the hard way.

    Fighting legacy practices that do more harm than good at this point is a constant battle; particularly with so much web related stuff still having it's head wedged up 1997's backside. You'd THINK 17 years would be enough for it to fade, but NO...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles