I would like to know why some CSS properties are not applied as expected to html elements. I am not trying to fix a particular issue but I am looking for a general approach to be followed.
inspector screenshot
As seen in the above screenshot, I have a media query to be applied when the width is equal to or exceeds 40 rem.
But the width that I want to be applied to the plan class is 30% which is not applied but instead a width of 100% defined as a property of the plan class is still applied.
Though the inspector shows the property crossed out, is there any tool to find out the reason it is not applied?
The list of styles is shown in reverse order of how they are applied.
You can see that the top set of styles is the style property, and it is empty.
The next one is .plan and sets width: 100%.
The next one is .plan inside the media query, and is overridden because of the previous one.
You can see a simple view, but focused on specific properties, but looking in the Computed tab and clicking the triangle next to the property you are interested in to expand the list.
See The Cascade in the CSS specification for an explanation about what order properties are applied in.
Related
I'd like to reset a <button> to browser defaults in the high contrast mode of our website. Simply removing the styles is not an option as I would have to change a lot of code.
I thought this would be an easy task by assigning initial to every changed CSS property. Turns out, it doesn't work: while some properties are actually reset, the browser won't apply its original background-color and border and, in the case of Chrome, the text color when the button is disabled.
Is there a way to do this or can I only approximately reconstruct the browser defaults? And what is initial for if not for that?
JSFiddle showcasing the problem.
While some properties are actually resetted, the browser won't apply
its original background-color and border
It looks to me like the OP is looking for the revert value functionality.
See the spec regarding revert - one of the CSS-wide property values:
Rolls back the cascaded value to the user level, so that the specified
value is calculated as if no author-level rules were specified for
this property on this element. ...
Unfortunately, the revert value is currently not well supported.
Caniuse on revert actually nicely summarizes (and also hi lights the difference between revert and initial)
A CSS keyword value that resets a property's value to the default
specified by the browser in its UA stylesheet, as if the webpage had
not included any CSS. For example, display:revert on a <div> would
result in display:block. This is in contrast to the initial value,
which is simply defined on a per-property basis, and for display would
be inline.
I suppose your html for high contrast mode has a parent with a class... let's say as an example you have the class "highcm" at body
You could change your actual css sheet where you have styled your buttons to something like:
body:not(.highcm) .youractualclass button {
color: red;
}
This way just your button with not "highcm" at body will be styled while the rest will be rendered browser defaults
I have the same page in two chrome tabs. This page has a configuration that if you change it, some styles are modified.
The problem i have is that a particular style should not be changed but in fact it does. This is a line-height style.
The problem i'm having is that in one page the line-height is 14px and in the other is 18px and the same thing happens with font-size.
I search in the computed section of chrome developer tools but i can't found the source of that change because the line-height and font-size says inherit but all the values bellow are strikethrough. So my question is more in a general way to know where this values are been set?
- Open Chrome Web Inspector.
- Select the "Element" where you want to check the line height.
- On the right hand side, you will find "styles".
- Now scroll on the "styles" to find all the "line-height" styles from different styling files.
You will see Inherited From section there.
Example:
"Inherit" means the element gets its value for line-height from another (parent) element. I guess you modified such a parent element. You can avoid this by giving your element an exact value for line-height with !important.
.your-element{line-height: 14px!important;}
I want to get all style properties of a specific html part(div, form, table, ...) and its children. I know how to search for style of any page element, using any browser(chrome, firefox, etc..). Should I look one by one for its children to obtain all css? Is there a way to get all css at one time related with an element and its children ?
The easiest way to do this is to use the Computed Style tab in the Chrome or Firefox web inspectors as this will allow you to see not only the explicitly defined styles of the element(s) in question but will also show you inherited styles from the cascade.
Otherwise you basically just need to copy ALL relevant style definitions from the element(s) and all of their parent and ancestor elements.
If there's a case for using MVC for responsive websites, this is it:
I'm working on a site that is mostly ASP.NET WebForms, which is undergoing a redesign to use responsive markup. It is impractical to convert everything to MVC, so I have to make do with the existing controls.
On a particular form page, we have two combo-boxes on the same row; these have CSS classes appropriately set to specify the width at 48% of the parent element. The trouble is that since we're using the asp:DropDownList, the control is rendered with a style attribute having width:275px;, which overrides the width set in the CSS class.
In codebehind of the composite control containing these DropDownLists (particularly the RenderChildren method override), I've tried calling [control].Style.Clear(); prior to calling the base method. This has no effect; even adding:
[control].Style.Add(HtmlTextWriterStyle.Width, "inherit");
causes the element to be rendered as:
<select style="width:275px;width:inherit;" class="input-half first" id="longAndComplicated" name="longAndComplicated">
Note the two width declarations, when ideally there shouldn't be a style attribute in the first place.
I've had a poke in Reflector at the source, and couldn't find where this hard-coded width is being set; I gather that the style setters are being copied from somewhere further up the ASP.NET hierarchy.
As a lucky guess, I tried:
Setting Width to an empty string on the <asp:DropDownList> ("inherit" causes a Parse error)
Explicitly specifying Width="48%"
Setting EnableTheming="false"
None of these has had any positive effect, with the rendered style attribute still having width:275px;.
Where is this width magically being set from? How can I override this behaviour, ideally without having to create a derived class inheriting from System.Web.UI.WebControls.DropDownList?
Many thanks.
I have better Idea, fix the width and do not inherit the width, as that will inherit width from parent and over-ride the width element defined with width:275px; so that will be meaning less.
I have created a fiddle, works fine in chrome, the select tag has fixed width,
If sub element size will increase it will automatically grow.
Please check fiddle
If your question is referring to CSS class class="input-half first" then the style defined in element style is the one what is applied at last and will have high priority compare to class, better create new class, and assign it.
Hope, I have answered in right context as you have written many things with reference to ASP.net control, but I don't think that should be problem in majority cases.
Doh - I figured out what it was.
It turns out that the containing composite control defined properties along the lines of DropDown1Width and DropDown2Width. These 'cleverly' set the Width property of the underlying DropDownList controls, which were used during the DropDownList.Render() method.
Fortunately I don't have to go subclassing DropDownList, though in hindsight the lack of definitive web search results suggested the problem was likely to be somewhere in our own codebase.
I say "defined", as I have since removed these redundant properties (and their corresponding assignments in various ASPX files).
I am a newbie (very much so), so my question might be dumb, but I couldn't find the answer.
For a contact table on a webpage I have set the height of 30px, but when I look at it in Google Developer tools, the height value is crossed out. I've tried to find out what causes my value to be overriden, but no luck. The developer tools shows that the value is overriden, but it doesn't show where.
So, the question is: How do I find what overrides my values in CSS?
In Chrome, your styles will inherit from any parent styles - either in the same style sheet or, if you have any, in other attached style sheets.
When a style inherits attributes either from parent elements or other classes, its predecessors will be listed in the Style Browser*, listed from nearest styles to most distant. So for example, if you have a paragraph that has a class assigned to it, but that paragraph is contained within a parent div that also has its own styles, your Style Browser will show the class name of that paragraph at the top (including all the class attributes), followed by the div's classes and so on up your DOM.
To discover which style is overriding your height value, scroll down through the Style Browser until you find a height attribute that isn't crossed out. You will also see the style sheet (including the line number) that contains the style that is affecting your page's appearance.
*You can open the style browser by right-clicking within a web page and selecting "Inspect Element".
You have to read the styles from the bottom going up.
You should find your CSS rule for the table in the styles section. Going up from that point you should be able to see which are the modifications that override your rule and display the element as depicted in the "Computed style" section.
If you dont find anything please give a look to your inline styles.
It would be easier to explain if I can look at some sample code...
The applied style is shown in the top and then the overridden ones are shown crossed out as you scroll down. So, the overridden value should be somewhere above the one which has been crossed out.