less css not working properly on server - css

So I recently bought a theme that uses less css, I tested it on my local wamp server and everything worked fine in ie chrome and chrome mobile.
I then proceeded to upload it to my online server and everything worked fine in chrome, ie and then when I tested it on chrome mobile it didn't load the css, but if I use opera mobile on the same phone it loads fine, so clearly the fault is with the server but not sure what the problem could be,
Any suggestions, ?

Check your .htaccess file on your web server to check if there is any kind of caching enabled,
If there is you need to remove these data stores / caches so that the browser downloads the new content rather than rendering the cached (old) version of the CSS.
To do this on chrome select Chrome and the Clear Browsing Data
p.s. Its worth trying this even if you .htaccess draws a null just to be sure...

Related

amazon AWS endpoint URL displays differently than opening file locally, where to start?

I am building a website.
I built it locally, it works both in Chrome and in Firefox (when navigating the files locally)
I uploaded the files to amazon s3
and here's where I get some funky behavior.
if I use the amazon endpoint url to access the site:
it doesn't display properly in chrome, but it does in firefox. (what I mean by doesn't display properly is that parts of my css aren't being loaded in chrome, but they are being loaded in firefox)
if i navigate the local files on my machine:
it works just fine in both chrome and firefox. Everything is displayed perfectly fine and all of the css gets pulled in and rendered.
I guess what I'm curious about is, would behavior like this be an issue with Chrome or with Amazon AWS?
If parts of my css aren't even being pulled in by chrome (as in, when I open the developer tools, the css lines don't appear and I just get the default css associated with tags), it seems like this would be an issue with either chrome or AWS.
but when I use navigate the files locally in chrome, everything works just fine. So now I can eliminate Chrome as the culprit and point the finger at AWS.
But then when I use the aws endpoint in Firefox, it works just fine again...
So AWS isn't to blame either?
Im just curious why I'm getting different behavior based on how i choose to open the files, even though the files are the same both locally and on amason s3
UPDATE: So I sent an invalidation through cloudfront distribution.
Now when I visit the domain that I own and run the site off of, everything works both in chrome and firefox.
But the Amazon AWS Endpoint is still displaying improperly in Chrome despite the fact that the regular domain works... In the end, nothing is broken when the end user visits the site or when I edit the site locally, so it seems that the amazon endpoint is to blame.
If anyone has any ideas, now I'm just curious what the hell is happening inside of AWS

My website doesn't look good on my local webserver on ie8 & ie11, but it looks good on google chrome

My other issue is that I am trying to run it in my local webserver (Window Server 2008), and the website seems to have a problem with IIS7 I guess because when I run it on iE (8 & 11), the menu doesn’t look good, and the slider too, but when I run it on google chrome, in my local webserver, the problem goes away. Do you think it would be any solution to work something around it, because I need to run it in ie. I tried hosting it with goddady and doesn’t seem to have any of these problems. Any advice is appreciated thanks
If Javascript is an option you could use the modernizr library.
It backports the modern html and css that you are using to work on older browsers.
Without you posting any code or detailing your server configuration that's about all the advice that can be given.
When I run it on Internet Explorer my navigation bar, doesn't work properly and some other elements do not show. But with google chrome everything works good. In the beginning I thought it was a browser issue so I hosted with Goddady and it worked perfectly with ie8 - ie11. So it doesn't make it a browser issues, it something between ISS7 & Internet Explorer (because even with ie11 doesn't work). Thanks

My ASP.NET website is not displayed correctly in Internet Explorer 10 after server deployment

I've created a website using ASP.NET (C#) Framework 4.0
When running on my local IIS (in debug/release - before and after deployed) - the website is displayed correctly - as intended (checked on Internet Explorer 9, 10, Chrome and FireFox)
After I've deployed the website to my server (Windows Server 2008 DataCenter - Amazon hosting) - and only in IE 10 - the website is NOT displayed correctly - spacing is sometimes wrong, background colors sometimes disappeared, links not working properly, padding/margin is missing in some of the places and more... - it seems like the styles/CSS are partial... On other browsers (Chrome/FireFox/IE9) - it is displayed correctly (as intended)
I've tried to add the compatibility meta tags to IE=9 - didn't work (by the way, in IE10 - if I open the F12 tool - and change the Browser Mode to IE9 - it works!, but if I just change the Document Mode - it doesn't seem to help)
Why is Internet Explorer 10 evil??? Has anyone encountered this issue? any suggestions?
Thanks a lot! :)
As you write you are using F12 tools. My experience is that with Developer Tools running IE10 often does not apply all CSS rules (especially in at the end of external files). Refreshing the page or closing F12 tools usualy solves the problem. Also if you know which style is not applied it helps to disable and enable it again.
i have passe through a similar situation and some things just don't stay they way i want in every browser, so perhaps the better way out is to create CSS hacks tos specific spacing or styling issues you may have encoutered.
http://www.impressivewebs.com/ie10-css-hacks/
After a lot of searching and frustration, I've found the solution to my problem (here: http://www.nuget.org/packages/App_BrowsersUpdate)
Apparently the website should be updated to allow IE10 compatibility...
In your solution - install the ASP.NET Browser Capabilities Update using the following command in the "Package Manager Console" (can be started from "Tools"->"Library Package Manager" in your VS):
Install-Package App_BrowsersUpdate
(this will add ".browser" files to your website and few lines in your "web.config" file)
Rebuild and re-deploy your website and that's it! now my deployed website looks as intended on IE10!
(I still don't understand why it worked correctly on my localhost and not on the web server but at least the problem is solved)

Strange display behavior with IE8 on localhost vs dev server

Just started a site, using standard html/css - nothing fancy. Just divs to create a framed look. The server code is asp.net (4.0).
When I debug the program locally out of visual studio 2012, the page looks exactly as I designed it in all of my browsers (ie8/ff/chrome). When I publish it to my dev server and open it in IE8, the layout is messed up (i.e, my login box is now at bottom of page instead of center). However, if I open that same page on the dev server with firefox or chrome, it looks correct.
I've tried deleting all the files and republishing. I've viewed the source behind both the working (localhost) and broken (dev server) and it is identical.
Any ideas or additional troubleshooting steps I can try?
Thanks.
Edit:
Screenshot: http://i.imgur.com/tNiIFCz.png (side by side of dev vs localhost)
Masterpage: http://pastebin.com/c94Pinih
Css: http://pastebin.com/Txtac3kw
Login page: (the page that is messed up in IE8): http://pastebin.com/BN5bBamP
You could try:
make sure all of your resources are being loaded correctly (IE8 can do this, but other tools are available)
validating HTML/CSS
checking your render modes locally vs in production. If this is the issue, you can probably use the X-UA-Compatible meta tag to force a specific version of the IE render engine.
checking for any page/script errors
checking that the source in production matches the source when viewed locally
checking differences between IIS
Also by "standard html/css", I assume this is HTML4/CSS2? Do you have a link to check out?
Removed the top level div and it worked. Still not sure why it worked in ie8 on the local box, but not the dev box.

2 servers, same website on both: IE shows two slightly different version

I'm getting a weird issue involving IIS and IE, and I'll try to describe it clearly.
I have a regular html-css-js/jquery website that I've developed locally. Now that it's ready, I'm trying to deploy it on a server.
Once it's hosted on the server, I see two problems in IE only:
The rendering is slightly different: there's a few pixels of additional white space all around my website (so the contents is actually more 'compressed' than when viewed locally).
Some JS issues: I'm using the Impromptu jQuery popup plug-in, and the callback I specify in its 'loaded' event pre-populates its forms fields. In FF it works, but in IE the fields don't get populated until I close the popup and open it again. This worked locally on all browsers.
As weird as it sounds, the text in my jQuery popup dialog does not seem to have the 'ClearType' technology applied. The text is like '1 pixel thin' and not anti-aliased like everywhere else.
I have uploaded my website to another server and it runs perfectly fine. The issue is that I need to put it on the first server and I don't know what's wrong. Both servers are on Win 2k3 with IIS 6, .NET 3.5.
Any pointers as to what is going wrong? Thanks a lot.
Make sure that the "security zone" in the Internet Explorer status bar is the same when viewing the site between the 2 servers.
Use the IE developer toolbar to debug your css. Could also be a caching issue if it looks like an older version.
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535

Resources