Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Why is a style overridden?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #167335
    rkb
    Participant

    I am trying to get a page to auto adjust when additional content is added to the page. I have determined using Chrome (CTRL-SHFT J or Inspect element) that if I change one element listed in the element.style, namley ‘height: 180px’ to ‘height:auto’ I get the effect that I desire. I notice that the container has just this style (‘height: auto’) but it is crossed out. How do I determine why this is crossed out and what element to put the style on so that the effective CSS style is ‘height: auto’ and not ‘height: 180px’?

    Thank you.

    #167336
    Paulie_D
    Member

    Perhaps you could share a link?

    A div will have auto height unless told differently…it sounds like you need to remove the height:180px declaration instead of trying to add a new one.

    #167397
    rkb
    Participant

    That seems to be the problem. In the Chrome devtools window there is a style element.style that is set to height: 180px but there is no equivalent entry in the styles.css file. If I change this instead to ‘auto’ then I get the effect that I would like. The problem is that I don’t know where to put the ‘height: auto’ style. The next entry down shows the styles for #demo .results but the height: auto style is crossed out. I cannot see anywhere in the CSS file that I have put a hard-coded value of 180px. It seems that this value is computed somehow.

    #167398
    Ed
    Participant

    If Chrome Dev Tools telsl you a style is set on element.style, that means it’s set inline on the HTML (usually by JavaScript). To override that, you’d need to create a rule in your CSS file that’s even more specific.

    I think the only thing more specific than inline style is a rule (the selector doesn’t matter but for your own sanity make it something that only hits the stuff you want) with !important on the end.

    Example:

    article .body p {
        height: auto !important;
    }

    However, I expect that rule’s being set in some JS or jQuery as most plugins will modify your CSS using inline styles. If this is the case, you should undo the style in the plugin’s configuration so you don’t need to use the !important override.

    We can’t help you much if you don’t show us a page with the problem.

    Further reading on CSS specificity.

    #167401
    Paulie_D
    Member

    Gonna say it again…

    Perhaps you could share a link?

    #167544
    rkb
    Participant

    The web app is not on a public site right now it is internal and not accessible. When this problem is solved it may be on a public site that I can post a link to.

    #167562
    Paulie_D
    Member

    The problem is that I don’t know where to put the ‘height: auto’ style.

    So you don’t have access to the CSS stylesheet?

    Using “inspect element” will tell you the line number of the rule you need to change…get that, open the stylesheet in your favourite editor, make the change, save the file and that’s it.

    #167569
    rkb
    Participant

    I do have access to the CSS stylesheet. That brings me to the point of this discussion. As close as I have been able to get I define the style attributes like:

    #demo .results {
    margin-bottom: 40px;
    height: auto;
    }

    I then run my application and it doesn’t seem like the style is applied, so I fire up Chrome developer tools and ‘Inspect Element’ on the element that I would like styled. On the right-hand side I see the element selector just as I specified it in the style sheet but the attribute height: auto is crossed out. Just above this entry is a selector for ‘element.style’ with a single entry ‘height: 180px’. If I change this entry from ‘180px’ to ‘auto’ I get the results that I want. But there is no selector in the style sheet for ‘element.style’ so I am not sure where I should put ‘height: auto’ so it gets applied to ‘element.style’. If I change my style sheet like:

    #demo .results {
    margin-bottom: 40px;
    height: auto !important;
    }

    I see the height: 180px line in the element.style selector in ‘Inspect Element’ crossed out and again I get the results that I would like. I would like to avoid putting ‘!important’ in my style sheet if possible.

    #167573
    Alen
    Participant

    I see the element selector just as I specified it in the style sheet but the attribute height: auto is crossed out. Just above this entry is a selector for ‘element.style’ with a single entry ‘height: 180px’. If I change this entry from ’180px’ to ‘auto’ I get the results that I want.

    element.style in DevTools refers to inline styles applied to that element. Inline style will take precedence over any style you apply via style sheet. That is why your declaration is being crossed out.

    Look in your HTML code and see if the element you’re trying to modify has any inline styles… something like:

    <div style="height:180px;"> if so, remove the style="height:180px;" part.

    Another possibility is that JavaScript is adding the inline styles.

    Hope that helps,
    -Alen

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.