I'm encountering a strange problem. I was working on converting a PSD to CSS / HTML. I'm using some PNG-24 as image replacements for logos and such. While working on the file, the CSS is embedded in the HTML HEAD
I finished working, all images and styles worked great. I then transferred the CSS into a linked stylesheet. All of a sudden, the image-replaced PNGs don't work (just don't show up) but ALL the other styling is fine.
If I then copy and paste the CSS from the file, BACK into the HTML and embed it in the HEAD it all works fine again...
anything i'm missing? Not sure why only 90% of the styling would work in the linked file and more-so, that fact that linking the stylesheet is making only certain rules not work..
nevermind -- as I wrote this i realized the relative links for the images were bad when i moved the CSS. It really helps writing it all out like this :)
Have you checked Firebug to see if the styles for the images are listed?
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.
I've been looking for an answer for 3 days straight now (i did sleep a few hours though).
I'm using a wordpress theme that integrates font awesome icons smoothly. But i wanted to alter these icons and use my own, but they won't show in Firefox but do show in Safari, Chrome etc.
I'm using this css code to alter the icon to my own icons:
.fa-euro:before {content:url(http://nip10.nl/xtra-icons/icon-2.png);}
.fa-glass:before {content:url(http://nip10.nl/xtra-icons/icon-1.png);}
.fa-bell:before {content:url(http://nip10.nl/xtra-icons/icon-3.png);}
.fa-coffee:before {content:url(http://nip10.nl/xtra-icons/icon-4.png);}
You can see the website here: www.nip10.nl
Hope someone can tell me how i can alter the css code so the icons also show in FireFox.. I've tried anything from naming images to .jpg files etc. etc..
You should validate your HTML. See here: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nip10.nl
I'm going to guess that the problem is that firefox is running into this error
Line 1069, Column 26: Element style not allowed as child of element
div in this context. (Suppressing further errors from this subtree.)
And failing to parse the embedded style sheet. You should also not embed your large stylesheets like that. Make them external style sheets. Once that's done, find where your HTML error is that's causing the validator to think you don't have the style sheet in the head tag and it should fix itself.
On a blog post on my website, I decided to share some of my code using a GitHub Gist, since I thought it would be an easy way to apply code formatting and syntax highlighting to my code.
I've embedded the Gist in the post, but for some reason my website's CSS has overridden the CSS of the Gist and so I've ended up with code which is all grey and in a serif font. I assumed that since the stylesheet in the Gist is being linked to after my main stylesheet link, it would be fine, but this seems not to be the case.
How can I make it so that my main stylesheet won't modify the styling of the Gist?
Edit: Here is the page where the problem is occurring, the Gist is near the bottom.
Are you using the embed option? There would be one located on the left sidebar the says "embed this gist" which uses different ids from your css stylesheet so it wont conflict.
You can also rename your selectors on your website, the second stylesheet takes priority not the first.
I got a problem on my Website http://achensee.info/ when loading in IE7.
At first, everything works perfect, and you can see the correct styles for the header and some HTML elements. However, after the main stylesheet and a little time later, IE7 strips all styles from the Website and displays it without CSS.
So, the files are loaded, but applied. Is this a common problem, or is there a way to fix this?
Could it be that too many styles cause the IE7 to crash the CSS view?
Thanks for your help and greetings from Austria :)
The problem is your call to the ie8.js file. It uses an AJAX call to your CSS files to reapply all styles, but its probably broken (as it never got past beta stage and was last touched in April of 2010).
what happens to them? are they loaded by the browsers?
should I split my CSS files into more stylesheets, so only images the css/images that are used are loaded on the page?
Seeing as people are saying the same thing I said in my comment I guess I should have added it as an answer.
I was going to recommend firebug, but I believe the images are not downloaded until you reference them in the html. You can confirm this using chrome or ie or firebug developer tools. as far as splitting the css, I would only do so if you have an excessively large css file, or you need to split it up for different css files for browser capability i.e. you have styles that are ie7 or ie 8 specific
Browsers will only download images that are actually used on the page. So images that are specified in CSS as background images will not be downloaded unless that CSS rule is applied on the page.
You can use Firebug or other similar programs to see what is loaded by the browser; however, I believe the answer is that since the DOM element is never created, the image is never requested from the server. No bandwidth or loading time is wasted (other than a few more bytes of CSS, but that shouldn't be too much overhead.)