Inheriting with shorthand

Forum Moderators: not2easy

Message Too Old, No Replies

Inheriting with shorthand

gasell

12:40 pm on Jul 12, 2007 (gmt 0)

Why isn't 0 applied?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css" media="screen">
div{
border:5px solid #000;
}
div.class{
border-width:0 inherit;}
</style>
</head>

penders

4:24 pm on Jul 12, 2007 (gmt 0)

div.class{ 
border-width:0 inherit;}

This CSS is invalid, you have given border-width two values, 0 and 'inherit'. The CSS should just read border-width:0; to override (not inherit) the style of the parent.

A value of 'inherit' (used on its own) attempts to inherit the value of its parent (5px I assume?) - which is the default action in most cases - and is not what you want.

Also, I wouldn't actually name a class 'class'. Even if it is valid(?) It will only end up being confusing.

Xapti

1:42 am on Jul 13, 2007 (gmt 0)

why is it invalid? I assume he wants the top and bottom border thickness as 0, and left and right as inherited.

Either way, if that's not working, just try rewriting it as border-width-top, border-width-bottom, etc.

penders

7:12 am on Jul 13, 2007 (gmt 0)

why is it invalid? I assume he wants the top and bottom border thickness as 0, and left and right as inherited.

Dang, of course - thanks for the rectification - sorry, not sure why I wasn't thinking 'short-hand' notation there?!

However, it still fails the W3C Validator with "Too many values or values are not recognized"!? But

border-width:inherit;

validates and

border-width:0 5px;

validates, so is it a bug with the validator?

penders

8:43 am on Jul 13, 2007 (gmt 0)

In fact the W3C Validator fails with the same error if you try to set multiple values, incorporating 'inherit', when using any short-hand notation?! eg.

padding:0 inherit;

margin:10px 5px inherit 0;

both fail. (But

margin:inherit;

is OK)?

penders

10:06 am on Jul 13, 2007 (gmt 0)

Actually, the CSS2.1 W3C definition does state:
URL: [w3.org...]

'border-width'
Value: <border-width>{1,4} ¦ inherit

Which does indicate 'inherit' can only be used on its own.

Also, in Appendix C - C.1 Changes from CSS2 - C.1.1 Errors
URL: [w3.org...]

Shorthand properties
Shorthand properties take a list of subproperty values or the value 'inherit'. One cannot mix 'inherit' with other subproperty values as it would not be possible to specify the subproperty to which 'inherit' applied. The definitions of a number of shorthand properties did not enforce this rule: 'border-top', 'border-right', 'border-bottom', 'border-left', 'border', 'background', 'font', 'list-style', 'cue', and 'outline'.

Ok, I'm not sure that I understand why though - can anyone explain/provide an example...?

gasell

11:12 am on Jul 13, 2007 (gmt 0)

I actually tried out several things other than border-width after I had trouble with a textarea that didn't seem to be of right width. I finally realised that inherit was causing troubles. Textarea having padding with two values including inherit failed, but margin didn't! So in the end I just specified padding-left and padding-right to overwrite general textarea style for that one specific textarea. But I was also left quite curious about why is this happening.

One cannot mix 'inherit' with other subproperty values as it would not be possible to specify the subproperty to which 'inherit' applied.

That is sort of explaining but if you simply define two px values for shorthand then it is possible to specify and if one of them happens to be inherit then it isn't?

Maybe someone could explain because I'm not getting the difference here either.