0

I noticed that while working in visual studio (2013) on a site using bootstrap (3) when previewing changes (localhost iisexpress) everything looks normal/as expected - specifically rounded edges, horizontal lines in menus, and font smoothing.

However, after publishing (file system), those elements disappear. The corners are hard, the lines in the menus are gone (and replaced with big space) , and the fonts don't seem to be smoothed.

both times I'm viewing/previewing in IE 11

The server is 2008 R2, IIS is 7 with .net 4.5 installed

Is there something I need installed on the server to make css3 work?

((I'd post an image, but I don't have enough rep, hopefully the link will work))

link to flickr image

update Sorry, I should've posted that I did notice , via inspector, that when running under localhost the style is properly identified as 'boostrap.css', however the server side version shows 'css (1)' I also see that the serverside version has the very same elements underlined (red squiggle line) whereas the localhost version doesn't.

OH!!! I started poking around in the other tabs of the inspector .. and notice that serverside document mode was set to '7 (Default)' - localhost (as launched by visual studio) is set to 'Edge' -- I changed it on my browser, and it all looks perfect. SOOOOOOooooo is there a way to force the rendering? or is it a client/browser setting?

tracer
  • 45
  • 3
  • 12
  • if you inspect the elements, are the proper styles being applied? Or is there a difference. – Mike May 28 '15 at 19:29
  • Is there any error in your developer view of browser that suggests a 401 or 404 error? – Aram May 28 '15 at 19:31
  • CSS Should be handled by your browser. Server settings shouldn't make a difference if the files are the same. Have you checked the styles in developer tools? Right click on one of the affected elements and select 'Inspect Element'. Are there any differences in the Style tab between server & localhost? – Seth May 28 '15 at 19:33

3 Answers3

2

Thanks for the help .. after finding the document mode difference - I found a solution here: How to set IE11 Document mode to edge as default?

note: i started with a visual studio 'template', it had in Site.Master: 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

I tried just adding ,IE=edge, chrome=1" and that didn't seem to do the trick. So I replaced it with :

<meta name="viewport" http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

and it's working -- not sure if I loose anything without the <meta name="viewport" http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> ... but I'm purty dang happy right now :)

Community
  • 1
  • 1
tracer
  • 45
  • 3
  • 12
0

I had the same and I found that css style tried to load external resources such as font file. I copied css file, linked in to html file but there were not additional font file so some styling were not applied correctly.

Downloading missing resources into proper local directory solved the problem

Damian
  • 437
  • 5
  • 11
0

In my case the problem is caused by browser cache memory. there was already a folder on server like 'localhost/project', I deleted that and uploaded another project with same name. both projects have 'css/style.css' file.

When I press the refresh button, browser only refreshed index.php but not css/syle.css

So I browse to 'localhost/project/css/style.css' and refreshing did the job...

Chirag Sukhala
  • 53
  • 1
  • 14