Border-width problem

HTML & CSS
1

This does not look like the bottom image, and I’m just talking about this image.

What am I not getting right in this code?

<div style="width:18px; height:50px;
background-color: #ffffff;
border-left-width:16px;
border-left: thick solid #00ffff;
border-right: thick solid #ff00ff;
border-right-width: 16px;
"></div>


 onmouseover="this.style.backgroundColor='#ffffff';
this.style.width='18px';this.style.height='50px'
this.style.borderLeft='thick solid #00ffff';
this.style.borderLeftWidth='16px';
this.style.borderRight='thick solid #ff00ff'
this.style.borderRightWidth='16px'"
2

Your problem is that you set a width of 16px on the left border, but then override that in the next rule with “thick”. I’m not sure how wide “thick” is generally rendered, and I suspect it varies by browser.

border-left-width:16px;
border-left: thick solid #00ffff;

Combine those two rules to

border-left: 16px solid #00ffff;

1 Like
3

Thanks.

I was working off a really old code so it was difficult to get.

<div style="width:18px; height:50px;
background-color: #ffffff;
border-left: 16px solid #00ffff;
border-right: 16px solid #ff00ff;
"></div>
1 Like
4

If you look at the problem code using developer tools, you can see that the border-left-width:16px; rule is crossed out, meaning that it isn’t being applied; something else is overriding it. Later rules take precedence over earlier rules, so it’s then quite easy to track down the problem.

3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.