diffrences between local site and server. the html and css the same

Hi
something bizzare and i can't find why it happens.
on my local machine i have the html and css and all looks great. but when i upload it to the server the sname element doesn't look the same.
by the way when i play with firebug on the local site every rule makes a different, but on the server if i uncheck or check some rules it doesn't have any effect.
it is a ul that is created via an ajax call. again html and css are exactly the same. here is the code:

            ul{
                list-style: none;
                display: table;
                margin: 2.5em auto 0;
}
                li{
                    display: table-cell;
                    padding: 0.2em 1.5em;
}
.badge{
    padding: 4px 7px !important;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
     transition: all 0.2s linear;
     margin-bottom: 1em;
    &:hover{
        border-radius: 0;
        box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);
     }
}
.sname{
      margin-right: -35px;
    margin-top: 20px;
    text-align: center;
    word-wrap: break-word;
    width: 100px;
    font-size: 1.2em;
    font-weight: bold;
}

Open in new window

i am attaching images one from the locale and one from the server. any idea what's going on there?

on the server the sname element is wrong

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 85

Dave BaldwinFixer of ProblemsCommented: 2016-01-24

You are probably loading 'custom.css' from an external file. I suspect that what you are seeing is the browser cached an old version and since the name remains the same, it loading the old version from cache and not loading the new version from the server. This is a common problem. Load 'custom.css' in your browser from the server and refresh that page. Then go back to your HTML page and you should see the newest version.

LVL 1

derridaAuthor Commented: 2016-01-24

hi
first thanks for answering. i have cleared the cache several times and tested on several browsers. still the same. also, as i said, the new css is there when i check in firebug.

i just can't understand why on my local site in firebug i change values and it is reflected and on the server side it is not. no matter if i change values or disable a rule it is uneffected.

Firebug is only in Firefox and has nothing to do with the server. You're getting confusing. If you see the 'new' CSS in Firebug when you are looking at the code on the server then you should see the effects in your page on the server.

yes, that is what i don't see. the new css is in firebug when i check the page on the server, yet when i try to change values or turn off it has no effect. by the way, the same in chrome dev tools, i just prefer firebug.

ok went another way. positioned the sname element absolute.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

derridaAuthor Commented: 2016-01-28

fixed it

diffrences between local site and server. the html and css the same

Who is Participating?