It's on a simple asp.net web project. There's a Styles folder in the project and in that folder are four css files all pretty simple. Main.css has this:
body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 85%;
width: 700px;
height: 900px;
margin: 0px auto 0px auto;
padding: 10px;
border: 2px;
background-color: green;
}
The green (it was originally white) shows up in IE but not in Chrome. I reference the css files in the ASPX file:
<link href="Styles/CheckOut.css" rel="Stylesheet" type="text/css"/>
<link href="Styles/Main.css" rel="Stylesheet" type="text/css" />
The green was only one test. I made other changes to the css files and none showed up in Chrome. Aside from the css issue, the app performs fine in Chrome as well as IE.
The Page Inspector reflects the css files; but Chrome does not. There are a couple of similar seeming questions here but none address my issue, AFAIK.
When you refresh the page in Chrome, do you have dev tools open? And if you do, do you have "Disable cache (while DevTools is open)" checked? I've found that Chrome is pretty aggressive about caching stuff, so if you're not seeing your changes this might be something to look into. (You can verify if that checkbox is marked by hitting F12 on Windows or option-command-I on Mac, and clicking on the widget wheel. It's the first checkbox under "General".)
Related
I'm working on a site that needs full-page scroll-snaps for portfolio items. I got the snap-scroll and HTML smooth-scroll set up and working fine. I then added a link to a Google Font in HTML and set some text to that font in CSS. The font displayed as expected, but it seems to disable the scroll-snap behavior.
I've tried multiple Google fonts and have had the same result each time. It seems that it only disables scroll-snap when the font is correctly installed.
HTML...
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css">
CSS Below...
body{
scroll-snap-type: y mandatory;
color: #222;
}
.tech-list-header {
font-size: 1.333em;
font-family: 'IBM Plex Sans';
}
#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
/* background-repeat: no-repeat; */
background-size: cover;
margin: 0px -10px;
position: relative;
min-height: 90vh;
scroll-snap-align: start;
scroll-snap-stop: normal;
}
It seems like I should be able to use Google Fonts and Scroll-Snap in tandem, but I can only get one working at a time... Any thoughts? Thanks!
There was a similar question with an answer here: https://stackoverflow.com/a/52886080/1173898
But, to expound on that - the root issue seems to be a conflict between scroll-snap-type and a #font-face declaration. When you link to Google Fonts, all you're linking to is a short CSS file that is composed of one or two #font-face declarations.
Specifically the issue is with a any #font-face declaration with a src: rule and a url(...) value. Which, unfortunately, is pretty much all of the time, and this includes Google Fonts stylesheets.
The other SO answer mentions that it’s Chrome only. However, I've seen the same broken behavior in Firefox.
The way around this, as alluded to in the other SO answer, is to add a wrapper element, inside the <body>, like so:
<body>
<div class="wrapper">
<div id="#bgimg-1">
<div id="#bgimg-2">
<div id="#bgimg-3">
</div>
</body>
CSS
.wrapper {
scroll-snap-type: y mandatory;
}
...
#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
...
scroll-snap-align: start;
scroll-snap-stop: normal;
}
Fonts in the latest Chrome, Opera, Safari and Firefox look fine but in IE9 they look blurry and small in comparison. On other sites they look alright though?
Is there anything I can change in CSS to make them all look the same? Mainly the size as it makes the whole website look odd...
I'm using the following CSS:
margin: 0px;
padding: 0px;
font: 11px Verdana, Arial;
line-height: 13px;
Declaring
<!DOCTYPE html>
will make IE9 behave just that bit better.
I would look in HTML5 Boiler Template. They've already solved all these little quirks and created a nice boilerplate for people to use.
I´m working on a web application, now the css is working perfectly with Opera, Chrome, Firefox and Safari. I just have some specific problems with IE8 and IE9.
My doubt is, what is the best choice, write an exclusive css for IE or just incorporate specific lines for IE?
This works with Chrome, Firefox, Safari and Opera:
#table{
width: 60%;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
Code for explorer:
#table{
width: 60%;
margin-top: 60px;
margin-left: 20%;
margin-right: auto;
}
I´m looking for the fastest choice on load.
Thanks in advance.
I find it easiest to isolate the tweaks into an IE-specific stylesheet, and then use conditional comments (which only IE understands anyway) to load them after the normal CSS.
Here's an example from one project of mine (an ASP.NET MVC2 project):
<!--[if lte IE8]>
<link rel="stylesheet" type="text/css" href="<%: Url.Content("~/content/ie-fix.css") %>" />
<![endif]-->
I feel so stupid, like I'm missing something really obvious but I have checked everything a bunch and can't figure out what's wrong. I'm trying to use CSS3pie to make rounded corners in ie8, but it just won't take.
I have the path set up relative to the html document, not the css. It's in a folder called pie, so this is what i'm using in the CSS:
#recommended-acc {
float: left;
width: 472px;
background: url(../img/cont_bg.png) repeat;
margin: 10px;
padding: 0 10px 6px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(pie/PIE.htc);
border-radius: 5px;
border: 1px #d8d8d8 solid;
}
Does anyone know more about css3 pie who could maybe advise me on what I'm missing? I've tried it on a ton of different elements and it hasn't worked once.
A few things to try:
Use a leading forward slash in your path:
behavior: url(/pie/PIE.htc);
This will make sure the path is correct in case you are on a page with more than one URI segment, like http://example.com/pages/archives/mypage.html. WIthout the leading forward slash, it would be relative from mypage.html and not the root directory (which it should be).
Try to force hasLayout (obscure IE thing) by adding position:relative; or zoom:1 to the element. This is often the issue, the HTC file is referenced correctly but the styles won't apply without it.
Read the known issues page carefully and make sure you aren't experiencing any of the other multitude of common problems.
I too had these problem in my earlier days.
You've to keep the pie.htc file generally in the root of the project folder.
I know the following solution is a little weird but you could try it
Try adding an alert or console in the pie.htc file and place the file in each folder until it gets rendered.
HOW to make sure your HTC file loads..
put below <script type="text/javascript"> alert("test");
this alerts test when the file loads
put in the complete url in your css file behavior: url("http://www.yourwebsite.com/test/PIE.htc");
WHen you load the page an alert shows up :)
this means you are sure the file loads :)
now shorten the behavior: url("relative to the CSS-FILE/PIE.htc"); and make sure you still get the alert
remove the alert =)
You are now 100% sure it is using the HTC file
I struggled with this, All I can suggest is try this.
Use the Javascript version with jQuery
<!--[if lt IE 9]>
<script type="text/javascript" src="js/PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
<script type="text/javascript" src="js/PIE_IE9.js"></script>
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css"/>
<script>
$(function() {
if (window.PIE) {
$('.Circle').each(function() {
PIE.attach(this);
// alert("Attached");
});
}
});
</script>
<![endif]-->
Now in your CSS, with the .Circle class or any class which is using the CSS 3, give them:
zoom: 1;
position: relative;
One other note I have found when using jQuery & the migrate plugin - some are "finicky" these work.
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
With luck, that will do the trick.
Guys i found the problem you where looking for.
First of all I used 2 different web host. 1 of my own and 1 of the company.
I made my full css3 responsive webdesign hand coded on my own website.. which I needed the PIE.htc file to get the rounded corners working for all IE versions and I succeeded!.
However when I uploaded the same files to the web host of my company it didn't work anymore.
And it turns out that they doesn't support .htc files.
So I scratched my head and didn't get it right either, but then I discovered that this provider will work with the PIE.php file.
So if for you this doesn't work;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.htc);
Than this does;
.bg {
border-radius:60px;
width: 80%;
height: 85%;
position: fixed;
top: 10.2%;
left: 18%;
z-index: 1;
border:3px solid #fff;
background:#fff;
behavior: url(pie/PIE.php);
Just change the PIE.htc to PIE.php and it will work.
Ok, I am currently directing my style sheets as listed below:
<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>
On the Site.css I have a certain ID with a background-image:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
background: url('../images/topbackground.gif') no-repeat;
}
On the mobile.css I thought I could simply change it to "none" or another image, somewhat similar to this (I've tried several variations at this point):
#container {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #ffffff none;
z-index: 30;
}
However, it doesn't seem to be working. The background still shows on the mobile version of the site. I've been looking at it in both Opera Mini and the Android SDK Emulator. The mobile version of the site is picking up all other properties from mobile.css, just not background-image changes.
I know it's got to be something obvious at this point that I am just oblivious to. Any help would be appreciated.
this is because you load mobile.css before you load Site.css. (in the example you have made).
I thinks its working if you juste insert site first then mobile.css ..
If you need to keep it that way for some reason you gonna need to use !important afters the statement.
Here you can find a working example:
http://jsfiddle.net/2EaQb/