• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Fixed Style properties: border-color error

Arty

Well-known member
#1
There is a bug in style properties parser. When I try to assign different colors to each border, it puts them all as value for "border" shortcut, creating complete mess.

This is code I'm assigning inside property when editing template via WebDav:
Code:
    border: 1px solid @primaryMedium;
    border-color: @primaryMedium @secondaryMedium @secondaryMedium @primaryMedium;
or this
Code:
    border-width: 1px;
    border-style: solid;
    border-color: @primaryMedium @secondaryMedium @secondaryMedium @primaryMedium;
This is result in CSS output:
Code:
border: 1px solid rgb(47, 110, 165) rgb(171, 55, 55) rgb(171, 55, 55) rgb(47, 110, 165);
And this is what I see when I reload same template via WebDav:
Code:
    border: 1px solid @primaryMedium @secondaryMedium @secondaryMedium @primaryMedium;
 

Jake Bunce

XenForo moderator
Staff member
#2
Confirmed.

The parser doesn't correctly handle multiple values for border-color, border-style, or border-width. Here is my own more overt test case. Enter this CSS:

Code:
	border-width: thin medium thick 10px;
	border-color: @primaryMedium @secondaryMedium @primaryMedium @secondaryMedium;
	border-style: dotted solid double dashed;
Upon save it writes out this property in shorthand which is invalid:

Code:
	border: thin medium thick 10px dotted solid double dashed @primaryMedium @secondaryMedium @primaryMedium @secondaryMedium;
The border shorthand only accepts individual values for each of the three border properties. It needs to break it up into border-top, border-right, etc.