- From: Steve Comstock <steve@trainersfriend.com>
- Date: Sun, 9 Aug 2020 05:38:02 -0600
- To: Marat Tanalin <mtanalin@yandex.ru>, Ian Hickson <ian@hixie.ch>, Anne van Kesteren <notifications@github.com>, "annevk@opera.com" <annevk@opera.com>, Simon Pieters <simonp@opera.com>, Ian Jacobs <ij@w3.org>, Mark Davis ⚖ <markdavis@google.com>, Bert Bos <bert@w3.org>, Léonie Watson <tink@tink.uk>, Scott O'Hara <sohara@paciellogroup.com>, "patricia@vivaldi.com" <patricia@vivaldi.com>, "shwetank@barrierbreak.com" <shwetank@barrierbreak.com>, "terence.eden@digital.cabinet-office.gov.uk" <terence.eden@digital.cabinet-office.gov.uk>, "bruce@brucelawson.co.uk" <bruce@brucelawson.co.uk>, "sangwhan@iki.fi" <sangwhan@iki.fi>, "xiaoqian@w3.org" <xiaoqian@w3.org>
- Cc: "public-html-comments@w3.org" <public-html-comments@w3.org>
In my stylesheet I had the entry
<div>
no attribute list; so the browser would assume the
next element name's attribute list would also apply
to <div>. Changing this entry to
<div> {}
solved the problem.
However, I'm a little unsure of this because after the
<div> entry are a list of class definitions:
div {}
.one {border: groove 9px #B00060; max-width: 50%;
padding-left: 6px;}
.contentContainer {display: block; position: relative;
clear: both; margin: 0px; padding: 0px; }
.
.
.
But, in any case, the page works as desired now.
Thanks for your help.
Kind regards,
-Steve
On 8/8/2020 9:15 PM, Steve Comstock wrote:
> On 8/8/2020 4:47 PM, Marat Tanalin wrote:
>> Some other styles on your page apparently have higher specificity than
>> your class.
>> Inline styles (`style="..."`) have highest specificity (except styles
>> with
>> `!important`), that's most likely why they work while class styles don't.
>
> Yes, one would think that, wouldn't one?
>
> But the structure is simple:
>
> <body>
> * font-family: Arial, sans-serif;
>
>
> <div class=contentContainer>
> * display: block; position: relative; clear: both;
> margin: 0px; padding: 0px;
>
>
> <div class=contentColumn>
> * margin: 5px 4px 4px 18%; width: 80%;
>
>
> <div class=Rlinearound>
> * margin-left: 6em; width: 60%;
> border: black 2px solid;
> padding: 12px; border-radius: 1em;
>
>
> Kind regards,
>
>
> -Steve
>
>
>
>> 08.08.2020, 23:37, "Steve Comstock" <steve@trainersfriend.com>:
>>
>> Well I've had a very unsettling experience, although
>> I'm sure the keepers of the standards and the code
>> can clarify what's happening.
>>
>>
>> Basically, I had a paragraph in an HTML document that
>> I wanted to have indented, less than full width, with
>> a border around it, with rounded corners. Seems, well,
>> not totally simple but, straightforward.
>>
>>
>> But what occurred was:
>>
>> * If I created a class with the properties I want
>> (I called it "Rlinearound") and then coded a
>> <div class="Rlinearound"> element, it was ignored
>>
>> * If I changed the <div> element to use a style
>> attribute instead (with the exact same set of
>> properites), it worked
>>
>>
>> I've attached some images of the various pieces
>>
>> * StyleDef.jpg shows the class defintion
>>
>> * UseClass.jpg shows the code using the <div class=
>>
>> * ResultUsingClass.jpg shows the result when I used
>> the <div class= version
>>
>> * UseStyle.jpg shows the code using <div style=
>>
>> * ResultUsingStyle.jpg shows the result when I used
>> the <div style= version
>>
>>
>> So, I've ended up with the result I wanted, but I am
>> totally baffled why using class= did not work, and I'd
>> like to understand what's going on.
>>
>>
>> Current Windows 10, current Firefox.
>>
>>
>> Thanks in advance for any guidance / suggestions / answers
>> you can give me. I'm more than willing to try some
>> experiments, and I've tried quite a few so far, I just
>> can't figure this out.
>>
>>
>> Kind regards,
>>
>>
>> -Steve Comstock
>>
>>
>
Received on Sunday, 9 August 2020 11:38:41 UTC