In Chrome DEV tools check the Content Type for the css file.
If it is not text/css you may have a incomplete Nginx configuration.
Check the default Nginx conf file usually in /etc/nginx has the Mimetypes listed as below in the http section:
http{
include /etc/nginx/mime.types;
sendfile on;
}
Nginx Docs
https://www.nginx.com/resources/wiki/start/topics/examples/full/
A way to vertically center content on a webpage using the css table property.
html {
height: 100%;
}
body {
display: table;
width: 100%;
height: 100%;
}
#childtobody {
display: table-cell;
vertical-align: middle;
text-align: center;
}
IE7 and IE6 will by default add padding to input button object depending on width, to remove the extra padding, add the following css to your input object:
overflow: visible;
If you have z-index issues, particularly with drop down menus in IE7 this conditional script may help.
<!--[if IE 7]>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
})
</script>
<![endif]-->
To add stylesheets for specfic Internet Explorer versions you can add the blocks of code below to the head section of your HTML code. Make sure the code is placed beneath your main css declarations.
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-all.css" /> <![endif]-->
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]-->
You can also use other operators to target various version at the same time:
lt = less than
lte = less than or equal to
gt = greater than
gte = greater than or equal to
! = not equal to
& = AND [if (gt IE 6)&(lt IE 7)]
| = OR [if (IE 6)|(IE 7)]
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> <![endif]-->
An iOS will automatically see some numbers as telephone numbers and will format the number bypassing any css styling your website might have. You can stop this by altering the Apple specific meta tags. Place the code below in the head section of your webpage.
<meta name="format-detection" content="telephone=no">
By default html input boxes will have a inner shadow style applied on iPad and other iOS devices. You can remove this styling by adding the following css code to a html input object.
-webkit-appearance:none;