When in the Element section, in the right panel, a CSS set of properties is detected twice:
Same CSS file, same line number, I have only one file named commonCSS. It happens for some elements but not for all. What is going on?
EDIT: I tried it with Firefox & Chrome so it's not browser related.
Stupid me: it was called twice in the source... Jeez, this code I'm maintaining is so awfully badly written.
Related
I fought this issue for several hours today, and thought I would share the issue and solution. The solution could help for a few searches:
Why is the first selector in my CSS file ignored by browsers?
Why is the first line in my CSS file ignored by browsers?
Why is the universal selector ignored by browsers?
I didn't believe I had touched the CSS for my web project, however I had been making some updates, and changing some configurations. All of the sudden, the styling was way off. With the inspector in the browser, I found that my CSS reset wasn't applied.
My CSS file begins with:
* {box-sizing:border-box;font-size:100%;line-height:1.5em;font-family:'Open Sans', sans-serif;vertical-align:baseline;word-wrap:break-word;word-break:break-word;margin:0;padding:0;border:0;-webkit-tap-highlight-color: rgba(0,0,0,0);}
I had already found that it was not the universal selector that was ignored... because if I add a line with html {}; above it, the universal selector becomes active again.
I thought it might be the first line that was ignored... so I changed html {}; to a commented line... and then the first selector on the following line no longer worked.
Somehow the CSS file had been saved beginning with a Byte Order Mark.
This was not visible in Visual Studio Code or vim, but it was subtly visible in Chrome's inspector:
That red dot as the first character of the first line is a Byte Order Mark. Editing it out in the inspector resolved the issue (for that load instance).
I'm not sure how it snuck into just one file... but it was simple to remove with vim:
Open the file in vim: vim <filename>
Remove the BOM with :set nobomb
Save and Exit: :w:q
Hope this helps someone else save some time!
Note: It may be possible that the way the file was served is the issue. It was output by Drupal using print file_get_contents();, and an extra newline may have been inserted before the BOM. Perhaps if the BOM were actually the first character, it would have been fine?
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.
This is what I see on the inspector:
There's like a left highlight in two rules, which are the ones Firefox is making up,
if I look on the computed styles I see this:
And finally this is how the original CSS looks like:
So Firefox it's changing the position and width rules somehow.
Anyone can explain me why is this happening and how to avoid Firefox changing those rules?
(In Chrome, Safari works fine)
The "left highlight" is used to indicate a style rule that has been modified within the Developer Toolbar since the page loaded. Reloading the page and/or restarting the browser should repair the rules from your stylesheet.
If you're still encountering the issue after this "quick fix", my next advice is to search your stylesheet(s) for position: absolute, disable them one at a time, and re-test. It's very unlikely Firefox is changing your style rules on its own.
You might also find it easier to postpone minifying your CSS while you're debugging. That way you'll get more useful line numbers to reference vs. having every rule cited as being on master.css:1.
Finally, you might find it advantageous to use shallow selectors in your CSS rather than deeply nested selectors like the one you've shown. This will help avoid specificity conflicts, which was likely the original cause of the issue you're encountering.
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 { (??)
I have a custom cursor that is using an image. My original code:
cursor:url(../images/drag_mini_bg.png);
I then discovered that Firefox requires you to define a default backup in case the image is not found, and changed it to:
cursor:url(../images/drag_mini_bg.png), default;
This worked for Firefox and Chrome, but not IE. I read that IE uses a different source for the path than other browsers and implemented this solution:
cursor:url(../images/drag_mini_bg.png),url(/images/drag_mini_bg.png),default;
(The second url is relative to the html file rather than the css file that this code is included in.)
This didn't seem to help, so I found out about this bug and changed the image to a .cur file:
cursor:url(../images/drag_mini_bg.cur),url(/images/drag_mini_bg.cur),default;
However, it is still not showing up in IE. Anything else I can try?
Most of what you've read is correct, but I'll make a few amendments:
Firefox does indeed require the additional parameter to be added. My understanding is that the ideal value for this is auto. But if default works for you, use it.
As you've been told, IE can only display cursors of the .cur file type. PNGs and GIFs do not work.
However, I've never heard anything about IE using a different path; the same path has always worked fine for me in all browsers (when using a CUR file, of course). You might want to provide a reference to where you heard this, but I'd suggest that dropping the second URL may solve your problems.
There's a good site called Quirksmode that has a lot of browser compatibility tables. In particular, they have a very thorough table covering CSS cursors, which shows exactly how to format it to make it work in all browsers, with examples and notes about the quirks.
Hope that helps.
If you're still trying to figure this out 8 years later...I'll add that some browsers have a maximum image size, so maybe yours was too big. I believe you want to keep it under 32x32 pixels.