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.
Related
Normally a crossed rule means it is overridden by other rules somewhere, but in dev tool every now and then I see a dominating CSS rule being crossed-out, making me confused. See above picture. Please noted that changing the color in the crossed line actually affects the element on the page. Why is this?
In some cases, a style will be shown as struck-through if it exists in an matching rule but is commented out, or if you've manually disabled it by unchecking it within the Chrome developer tools. It will also show as crossed out, but with an error icon, if the style has a syntax error.
I have a weird issue. I am using the Bones theme in Wordpress, and simply trying to put a style on my home page menu.
The site is h*Xp://www.advanceditsolutions.net/nearitest/
The CSS I’m trying to use is this:
.home ul#menu-pages {
display: -webkit-box;
}
I have it in both of the media query sections, min-width:481, and min-width:768. I’ve also tried it outside of the media query scope, no luck. I can’t figure out why it doesn’t get picked up though. I inspect it on the site, and nowhere do I see the display CSS.
What sucks is, the placement is fine is most browsers, but Chrome it's all jacked up.
:: scratches head ::
1) First of all, you're using vendor prefix -webkit- that will work just on specific browser(s).
2) Check if the value is correct. Here is the list of all possible values for display property. Are you sure that -webkit-box is a correct value that can be applied to display?
Maybe instead of telling that the CSS you want to apply, doesn't work, share the larger context, a screenshot and tell us exactly what you want to achieve.
3) Do you use some developer tools, like Chrome Dev Tools, Firebug or something similar to apply and test styles? It's handy and can save you bunch of time trying to figure out what's wrong...
I can see it is working within the min-width:768 media query. You only have it included once in the stylesheet though from what i can see.
Two critical issues here are:
1) This css will only target the home page because you've used '.home' as part of your selector.
2) You've used the '-webkit' vendor prefix so it'll only work in browsers that run on that engine and support that property. I would recommend against this. You are probably better off using a flex display type.
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 have some css code that only hides a certain element if another element's value is 0
#type_46[value="0"] ~ .exercise_dur {
display: none;
}
This works in every browser except ie7 (ie9 in ie7 mode/ie7 document mode)
When troubleshooting using ie dev tools, If I look directly at the styles list, I see:
[value='0']#type_46 ~ .exercise_dur
Which obviously breaks the selector and causes it not to work. If I manually (in the dev tools) correct this, it works perfectly without any issues.
Has anyone experienced this problem? If so, is there a workaround other than hiding the element in the javascript?
EDIT: (can't answer my own question yet so I have to edit)
It appears that the problem is that ie7 is not dynamically updating the css. When the code is initialized, it doesn't work because the value is not set before the css loads. It updates if I force it to (i.e. change the code or disable/re-enable the style) but then doesn't update (even if I change the value) until it is forced again. ie7 is not a huge priority for this project and hiding the element is not absolutely necessary, so I think I'm going to leave this one for now and implement it in jquery if necessary later.
Thanks.
Support for the general sibling selector in IE7 is buggy at best. I recommend figuring out another way to select your elements, or use jQuery.
Read more.
I am frustrated. I have one website where my drop-down CSS menu works and another where it doesn't.
Their stylesheets differ wildly and, although I have tried to manually copy the menu styles from one to the other, but with no success.
Is their any tool which will let me (like FireDebug) click on a page section (the menu) and then copy the rules which affect that section - ignoring those which are hidden by other rules - so that I can post them into the second site's stylesheet.
It seems that rather than having multiple styles affecting the menu and trying to sort out which have precedence, I'd like to have some software sort it out and generate a single combined rule ... if you see what I mean.
Both FireBug and the inbuilt Chrome Dev Tools show you what styles are being utilised by the selected element. I don't work with FireBug much, but I know the Chrome Dev Tools will cross out overrided styles and even show default user-stylesheets where applicable. It's also kind of nifty when inline styles are applied, eg for a table the "frame" attribute, as it converts these to CSS and displays it as part of the styling ;)
Sounds like you've got problems with accidental inheritance. Try to make sure your CSS selectors are only referencing the elements you want to style. Otherwise things get messy, and stuff like this happens.