I've looked in Firebug but can't find why a CSS background property is being cancelled out. I've looked if there is a more specific rule but nothing. Please find the image snippet, as follows:
Maybe somebody has a suggestion?
Firebug will make you think a shorthand property like background or margin (maybe font) was cancelled out when in fact only one property was modified by a later/more specific rule
Use the Computed tab (close to the Style one) to see what's going on.
For each individual property, you'll be able to see which one is more specific and which ones were defined somehow but are cancelled out for real.
It may be a rule with !important modifier for example (meh) or usually a margin-top over a margin and the 3 other properties still with the values set by margin.
Related
I want to center a div in the middle of the screen. That's why I am overriding some CSS rules. I wrote the rules again and set !important. (Please see the printscreen. The discussed rules are marked in red.)
As you can see the old rules are crossed out now but it still doesn't work. It only works when I manually uncheck the rules. (Yellow Checkbox on the left)
I checked it out in Firefox and the overridden rules are not crossed. This means the issue is probably related to the override.
What is the difference and how can I fix that?
Everything that's checked is active; all things are checked by default when you open the inspector and you can uncheck individual property-value pairs to temporarily disable them, either until you refresh or check the box again.
Everything that's crossed out is something that's currently being overwritten by another property-value pair somewhere else, either in the same selector or in another selector somewhere. It is being overwritten because a value is either the same but written second (like a shorthand property used after a specific one), or it could be overwritten because there is a more specific selector somewhere with the exact same property somewhere.
Safari/Chrome Developer Tools indicate that a CSS rule is overridden by something else by striking it through, as shown in the image.
Sometimes I find myself in a situation where I can not figure out from the CSS files what causes this rule to be ignored. But surely Safari itself must know as it strikes it through.
Is there a way to know what overrides such a rule?
Look at the one which isn't striked out, higher up on the list.
Alternatively, view the computed styles. They will be the definitive applied styles.
When you inspect an element, you can show the 'box'. Just bottom of that, you have a 'filter' which should show you every properties being applied to your element.
If you click on a property, it will give you the file and the line number.
Developer Tools will list all rules for an element. Just read through all the CSS rules that apply, and check for a non-struck-through one with the same name.
Go to Elements >> Computed and you'll get the stylesheet that defines the rule you're looking for.
Go to the Computed tab of Chrome Developer tools. Find wanted property and expand details.
i have an issue where im using css to make a div appear circular on screen but it only works if the background image property is set first
normally that wouldnt be an issue if the image wouldnt need to be dynamicly inserted using PHP code
i created 3 jsfiddles to document my problem
https://jsfiddle.net/2wr2wajw/
No issue, background set first
https://jsfiddle.net/zvq3r0pd/
Issue,background doesnt get resized properly
link3 jsfiddle.net/x8g05uph/
Same issue as above, i would have expected the style code to be executed first
SO, whats the issue and whats the solution? thank you
EDIT
Found out adding the additional styles in the html code works, but thats not very nice and unnecessary to rewrite css code for everyone tag
thats what class selectors are for right?
link4 jsfiddle.net/q7sdwbfk/
not nice
The reason your code is not showing up properly in each scenario is because you are using the background shorthand property, which in turn is overwriting previously set values.
For instance, in example 2, you are setting the background-size prior to setting the background shorthand. By setting the background shorthand, you are overwriting the background-size property.
If you don't want to load them in order so that they don't get overwritten, don't make use of the shorthand background. Instead, utilize background-image, background-repeat, etc. This sets each property individually and will not cause anything to be overwritten, unless the property is called explicitly again.
Here is the updated fiddle for your example 2, utilizing individual properties instead of shorthand.
I have a Blogger template which is wider than the screen-width and causes the horizontal scrollbar to be displayed. I want to change it so that it fits and no scrollbar is shown. But the problem is I don't know what is causing this. I have downloaded the template file and in my code editor looked for all width properties and changed all 100%s to 90% and pix width values to value-100, but still the page is as before.
In finding the effective rule/rules in a such cases, what else should I look for/do? What is a comprehensive procedure to check things to find the rules?
Instead of changing the width, try adding the CSS property overflow: hidden to everything you think might be causing the issue and then remove them one-by-one until the scroll bar reappears and you'll have the culprit. You might need to add it to html and body as well. If the scrollbars aren't revealing any actual content, you can leave the overflow: hidden on the culprit to resolve the issue.
It might not be a width property that's causing the problem - there might be a block element inside your template that doesn't wrap or float that might be stretching out your container if the widths of the containers are defined using percentages.
Define the root container using a fixed width and this should eliminate many of those sorts of issues. Try that first and let us know if it works.
Procedure:
1). Understand the box model and how this varies on IE. It is just as likely that a problem "width" may actually be caused by padding, margin, or even border as width.
2). Check the rendering in other browsers. If you can reproduce the problem in FF get Firebug and use that to find out the calculated dimensions of the element in question, and tunnel down through it's children which may well be causing the issue. Chrome has a similar debugger to Firebug iirc, but I'm not familiar with it.
3). If that doesn't tell you what the problem is, start removing rules or whole patterns from your CSS until the problem goes away (or remove everything and add it back in piecemeal until the problem returns) - at that point you know what is causing the issue, if not why, and you can always update the question to ask us why when you've identified it.
hth
(Apols if any of this was already obvious)
Well, % always begins with "100". See the percentage of width of body tag is set to 100%. then according to it, just set other component % as per the requirement in your display.
Personally I do believe that, use of % is better then 'px'. If you know CSS, then try to change 'px' to % as per the requirement.
It seems that the component has min-width style and overflow property set to auto. You may want to set it to visible and do it in FireBug Firefox Page Inspector first, to see the effect alive before making post edit. If you just want to adjust the whole post width, blogger has standard interface. You can also edit the template manually
I'm currently working with a set of links that are getting their background images replaced when they are focused, hovered over, and non-focused; but right now I also need to fix it so that when you hover a focused link you'll get yet another result. My searching hasn't found anything and my experiments with anything like:
a:focus:hover { background:url(image.url) no-repeat;}
have met with less than desired results. Does anyone know of way to simply do what I'm trying for?
This should work, but focus won't work in IE without a valid doctype, so I doubt :focus:hover will fare any better.
Solution found, that method does work; but only when you remember to include the class and sub-class names that you are applying to an item.