css working different - inside tag or in separate file . css

Asked

Viewed 89 times

0

I built a basic file with a simple menu. I simplified it to the maximum to try to find the problem and I can’t.

The problem is that when entering the site, the animation specified in the Transition css starts to work automatically by zooming the buttons and changing their colors, but only when importing the file . css If I use the tag to insert the css, the animation doesn’t work unless the cursor overrides the button.

Below with all the content together, working as I need, just with the :Hover

<html>
<head>
<style type="text/css">
.escolha{background-color: #999; color: #fff;}
.escolha ul { list-style: none; margin-left: -40px;}
.escolha ul li {background-color: #999; padding: 10px 0; cursor: pointer;  transition: all 0.5s ease 0s;}
.escolha ul li estado{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li cidade{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li:hover {background-color: #6ab4c6; transition: all 0.5s ease 0s;}
.escolha ul li:hover estado{background-color: #0088a4;}
.escolha ul li:hover cidade{padding: 10px 10px 10px 20px;}`
</style>

</head>

<body>
<div class="escolha">
    <ul>
        <li><estado>SP</estado><cidade>São Paulo</cidade></li>
        <li><estado>SP</estado><cidade>São Caetano</cidade></li>
        <li><estado>PR</estado><cidade>Curitiba</cidade></li>
    </ul>
</div>

</body>
</html>

Below with separate files, importing . css, where the animation takes place

.escolha{background-color: #999; color: #fff;}
.escolha ul { list-style: none; margin-left: -40px;}
.escolha ul li {background-color: #999; padding: 10px 0; cursor: pointer;  transition: all 0.5s ease 0s;}
.escolha ul li estado{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li cidade{width: 50%; padding: 10px; transition: all 0.5s ease 0s;}
.escolha ul li:hover {background-color: #6ab4c6; transition: all 0.5s ease 0s;}
.escolha ul li:hover estado{background-color: #0088a4;}
.escolha ul li:hover cidade{padding: 10px 10px 10px 20px;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylepaginas.css" media="screen, handheld" />

</head>

<body>
<div class="escolha">
    <ul>
        <li><estado>SP</estado><cidade>São Paulo</cidade></li>
        <li><estado>SP</estado><cidade>São Caetano</cidade></li>
        <li><estado>PR</estado><cidade>Curitiba</cidade></li>
    </ul>
</div>

</body>
</html>

I tried using jsfiddle to test but the error does not happen, only in localhost and online version.

If anyone has a solution, I’ll thank you very much.

html css tags style

  • Guy the way you explained could not understand the problem... testing know code here when the page loads nothing happens, but when you put the mouse the animation works normally... what is the problem in fact?

  • The problem is that, in the version that imports the css, the buttons simply animate themselves, without occurring the Hover. It’s as if they don’t have any specification and, after importing css, they grow and acquire the correct colors. ???

  • I tested the two modes here and the operation was the same, IE, animations only work in the Hover, as it should be.

  • @Varalstudio and what is the correct way that should be the functioning? Explains better...

  • It should only work with the Hover. When I use import it works more or less like this: The buttons appear without any formatting, only text in black and without background and simply grow until they are in the final formats, with gray background and blank text. This "grow up" that wasn’t supposed to happen. I don’t know if I can link to the site where I took the test...

  • Either you are importing the wrong . CSS or the . CSS that you are importing has other styles and properties that are disturbing the CSS that you presented here.

  • I thought of that possibility, so I erased all other information and left only what mattered. I did some tests here and found that it is a unique problem of Chrome, whether on Windows, MAC or android.

  • If the link is not deleted, follow: http://varalstudio.com.br/teste/teste1.php Every time I update, the animation happens again.

  • The one below works: http://varalstudio.com.br/teste/teste2.php Here the css is inside the <style tag>

  • This line seems wrong Transition is usually outside Hover, remove Transition aaqui and test .escolha ul li:hover {background-color: #6ab4c6; transition: all 0.5s ease 0s;} remove Transition: all 0.5s Ease 0s from that class

  • The error persists. Did you test the links? Appeared what I am trying to explain?

Show 6 more comments

1 answer

0


It may sound crazy, but I don’t know why I could only solve the "bug" by putting the CSS link inside the <body>. And Yes is allowed to put CSS inside Body as you can see here It’s good practice to insert CSS tags at the end of the body of Body?

See the code of Gif and when I give the refresh etc. In Chrome solved, and in Firefox seems not to happen the problem.

In short your HTML has to stay that way to avoid Bug

.....
</head>

<body>

<link rel="stylesheet" type="text/css" href="css/stylepaginas.css" media="screen, handheld" />

<div class="escolha">
    <ul>
        <li><estado>SP</estado><cidade>São Paulo</cidade></li>
        <li><estado>SP</estado><cidade>São Caetano</cidade></li>
        <li><estado>PR</estado><cidade>Curitiba</cidade></li>
    </ul>
</div>

</body>
.....

  • Really crazy. The problem goes away. In this case it is a solution that I will use, but I wonder if, with more complex programming, it would be feasible. Valeu, hugocsl....

  • @Varalstudio I could not find another solution that would solve the problem... And strangely in a larger project it may not happen, because there seems to be no right reason for what happened.... Not that I have identified. If you think you have solved the problem remember to mark this icon below the little arrows next to my answer. You can remove it later if another answer appears that you think more complete

  • 1

    Thanks. I didn’t know about the .

  • @Varalstudio is a way to keep the site organized, and even with an accepted answer another person can answer tbm, one thing does not prevent the other. But so the question does not get in order via with no accepted answer even at having been solved. Vlw the force

  • 1

    Thank you. I always used the site but searching for the questions and answers of others. It had never happened to need to ask directly, so I had not realized the complete operation of the site.

Browser other questions tagged html css tags style

You are not signed in. Login or sign up in order to post.