/    Sign up×
Community /Pin to ProfileBookmark

css3 not working

Copy linkTweet thisAlerts:
Apr 07.2014

A friend is using the following css3 code at [url]http://www.lapearldesigns.com[/url] — 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>
[/code]

We cannot figure out why this is happening.

Any help would be appreciated

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyApr 07.2014 — 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 [B]<style>[/B] block in the [B]<head>[/B] tag of the page that includes your animation CSS which is only found on the later of the two pages.
Copy linkTweet thisAlerts:
@auntniniauthorApr 07.2014 — thanks Sup3rkirby

We will try to see what's happening on server
Copy linkTweet thisAlerts:
@robertsullivanApr 15.2014 — 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.
Copy linkTweet thisAlerts:
@auntniniauthorApr 28.2014 — 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.
Copy linkTweet thisAlerts:
@deathshadowMay 08.2014 — 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...
×

Success!

Help @auntnini spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...