Long story short I have an application running in a production environment that contains all of my stylesheets. I am now faced with using these stylesheets on another separate server. This all works fine without any issues in every browser except ie8 (ie9 even works). The external stylesheet appears to be working until it calls a resource using a relative path.
For example the following does not appear in ie8:
#header-region #menu .navbar-nav > li > a {
background: #5f9bbc url("../img/diag_pat_trans.png") repeat;
}
The only reason I can think that this would be happening is if every other browser is looking at the stylesheet and when it runs into a relative path it is using the fqdn from which the script was obtained and traversing from its root by whatever realtive path, then when we get to ie8 it is simply obtaining the script code and throwing it in the browser, then when it hits any realtive paths it freaks/ignores!?!?
Curious if anyone else has ran into this issue? Yes the ideal thing would be not to support IE8, but I'm in a position where that is not possible. Any further insight into this would be greatly appreciated :)
I was on the right path with the issue having something to do with cross-domain interaction and IE8. Upon further digging I ran across this post where the user was using a respond-proxy.html page to load respond.js, which resolved this issue.
Related
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
Since this morning i've a strange problem:
IE8 freeze completly with a certain css file active; if i comment out the file, the site is loading fine, so it's definitly this file.
Also, Chrome and firefox won't accept only some classes in the same css file (??).
The classes simply won't appear in the chrome inspector.
I've read again and again the file, but i can't find any errors.
The website is still hosted on localhost.
HERE is the link to the css file.
In any case it's a weird problem.
Thanks in advance for helping.
Nothing looks abnormal.
So the best method might be to test blocks of code from that file to find the root of your problem.
I would first test on another computer's IE8 to see if the problem exists or is an isolated incidence.
Then, I'd test by removing half of the CSS code and find out if the other half still works and then vice versa. Instead of looking through your entire CSS line-by-line, formulate an easier, testable solution.
After another look on the file i've found the problem: there was missing a media query bracket before
#media (max-width: 360px)
But still cannot understand why IE8 is freezing without an { (??)
The problem
I just found a very strange issue with background-images in Firefox and Opera: the rule simply doesn't get computed.
The rule doesn't get shown in the inspector list, the images in background doesn't get even loaded in network monitors. But everything is ok in the css file being loaded, tough... the rule, the selector, everything just fine.
The same page works ok in all other browsers, except these two.
Wonder if anyone had this experience earlier. Thanks.
Examples
I could manage to reproduce the error in jsfiddle.net as suggested by Vucko and monkey. I got two fiddles: one working and one crashing. The crashing one is more closer to what I have here in context. Hope it helps.
PS.: Just note that the crashing one actually works in browsers other than Opera and Firefox.
Just remove the last line in your CSS code.
#myprojectname > #page1 > .beginning:after > h2 > div.
Tested in opera and mozilla.
Did you supply a relative URI like in background-image: url(img/picture.jpg)? Relative URIs are always resolved with the CSS file as the root.
Means, if you have the following file layout:
/css/style.css
/img/picture.jpg
/index.html
You have to write background-image: url(../img/picture.jpg) instead.
Setting the base tag <base href="/" /> won't help you, since the setting does not transfer.
The site I am currently working on is http://rattscallion.com/ I am focusing my efforts on getting the site to look proper in IE.
I was having trouble getting the frame on the pages (look at /murals.html for the page I'm working on first). IE9 said that the inline-style stated that the background-image was "none," so it crossed out the original background image. I figured it might be getting this from somewhere on the main stylesheet so what I did was make a new frame that only exists in IE and style it only in the IE stylesheet. Unfortunately this also doesn't work...it still says that an inline-style is setting the background-image to "none", but there is no such thing!
I double-checked and this is happening in IE9 standards mode. So why is this happening? Can anyone help figure out how to "force" it over what IE perceives as the inline style?
Well there's your problem:
CSS was ignored due to mime type mismatch
normalize.css
If you check the network calls the normalize.css is received as text/plain instead of text/css. You should install static content (under server roles) in your IIS as for some weird reason it's not installed by default. I'm betting one WHOLE dollar you're using IIS.
You could have just copy pasted the normalize.css into a server side css file so it's not accessed remotely.
I got it working by doing the following:
remove #framePos img{ display: none; } from styles-ie.css
remove unitpngfix.js - the png filter fix was for ie6 and serves no purpose on ie9 (it's actually one of the reasons the frame does not show)
Note: the frame.png pic is place in lots'o'places as background so you should consider a little clean up of the css files
Another Note: unitpngfix.js replaces the frame.png with the clear.gif and places transparency filters on every png element. So tinkering on css will not do anything until you remove the js.
I'm having a problem where I have a background image that will show up perfectly fine when I'm using it in dreamweaver, but once I upload my site and the CSS files and everything it won't show.
Here's my CSS code:
.ELSsubbg {
background-image: url('../images/NTG_images.jpg');
background-repeat:no-repeat;
background-position:top left;
}
Any help would be great.
Because you are using a relative path in your CSS, where the stylesheet is looking for the image may be different than where you are seeing it when you go to it directly in the browser.
Try using an absolute path to your images directory instead of a relative one. Assuming you can see the image in your browser at http://www.website-name.com/images/NTG_images.jpg try removing the dots to make the path absolute from the root of your website.
background-image: url('/images/NTG_images.jpg');
Have you uploaded the image? Have you uploaded it to the right place? Is the CSS looking for it where you think it should be?
The easiest way to answer these questions is to use the browser's developer tools (eg Firebug) to watch the network traffic your page generates. Look for the request where it tries to load the graphic. Is it giving a 404 error? Probably.
If you are getting a 404, look at the URL it's calling to find out why. The answer should become clear.