CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromegoogle-chrome-devtools
MaxHof
MaxHof

Reputation: 21

Chrome DevTools: Computed style different from css rule?

How is it possible that my DOM element has a "border-top-width" of 0px when i defined 4px in my CSS file.

When i inspect the element with Chrome DevTools i see that the computed style tells 0px, whereas the uppermost css rule is 4px. And it isn't even crossed out.

First i thought maybe the CSS file isn't loaded at this time, but when you look at the "border-top-color", you can see that it works (color red is set and displayed).

Where could the 0px come from, what does override my CSS file setting?

Has anyone seen such a behaviour in ChromeDev Tools?

Image of Chrome DevTools "Computed" Tab

EDIT: Wow you guys are quick, thanks so far! This is the html element. all the computed css properties are in the added picture.

<div id="PageStyleTest2_MeasurementSystemSelector_styled_ddList_11" data-brease-widget="widgets/brease/ListBox" style="width: 150px; height: 120px;" class="breaseListBox breaseWidget widgets_brease_ListBox_style_default">
    <ul>
        <li style="height:40px; " data-brease-value="metric"><span>Metrisch</span></li>
        <li style="height:40px; " data-brease-value="imperial" class="selected"><span>Imperial</span></li>
        <li style="height:40px; " data-brease-value="imperial-us"><span>Imperial U.S.</span></li>
    </ul>
</div>

All computed css styles:

Added Picture with all computed css styles

Upvotes: 2

Views: 1772

Answers (1)

MountainDrew
MountainDrew

Reputation: 473

Adding border-style: solid; to the element's CSS will fix this.

(Although this isn't an answer to the question, it does solve the example problem presented, and is probably what most people landing here are looking for.)

Upvotes: 2

Related Questions