![]() |
![]() ![]() |
![]() |
Sentinel166 |
![]()
Post
#1
|
Novice ![]() ![]() Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 ![]() |
Hi,
I have an issue of what is probably stacking context ? Not sure. Here position:absolute or fixed do not work, only relative. I do not understand, there is contain or contain-type properties anywhere in my css sheet, nor isolation:isolate. Only "position" property and z-index. If you want the complete code I can provide. CODE blockquote { line-height:1.2; position:relative; p:first-child {text-indent:1.5vw} margin: 0 1vw; > ul ul {padding-left: 5vw;} font-size: .8em; font-style: oblique; > p {margin-inline:0;margin-block:$interline*.5} strong {color:$normal-strong-color;} &::before{ line-height:0; content: open-quote; font-size: 4rem; position:absolute; top:1.5*$interline; left:-1.5vw; } blockquote::before { top:2rem; left:-1rem; } &::after{ content: close-quote; font-size: 4rem; position:absolute; right:2px; line-height:0; } } What it looks like with position:relative: ![]() |
Christian J |
![]()
Post
#2
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,686 Joined: 10-August 06 Member No.: 7 ![]() |
There seem to be several CSS syntax errors, the W3C CSS Validator should indicate most of them: https://jigsaw.w3.org/css-validator/#validate_by_input
|
Sentinel166 |
![]()
Post
#3
|
Novice ![]() ![]() Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 ![]() |
There seem to be several CSS syntax errors, the W3C CSS Validator should indicate most of them: https://jigsaw.w3.org/css-validator/#validate_by_input Sorry but that tool's completely useless imho... I fed it QUOTE .image{ outline: $frame; outline-offset:-1px; clear:right; position:relative; z-index:1; max-width:50%; width:auto; height:auto; img{max-height:500px; z-index:2; object-fit:scale-down; height:auto; margin:auto;} float:right;} and it's literally yanking out all the img part, without explanation. This post has been edited by Sentinel166: Jun 18 2023, 05:18 PM |
Christian J |
![]()
Post
#4
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,686 Joined: 10-August 06 Member No.: 7 ![]() |
Sorry but that tool's completely useless imho... I can agree that the error reports are a bit cryptic. ![]() QUOTE it's literally yanking out all the img part, without explanation. I get the following result: CODE Parse Error $frame As far as I know, "$" characters are not used in CSS values --is "$frame" perhaps an unparsed PHP variable? ![]() CODE Parse Error img{max-height:500px; z-index:2; object-fit:scale-down; height:auto; margin:auto;} float:right The "float:right;}" is missing both its selector and the "{" character between the selector and value. QUOTE and it's literally yanking out all the img part, without explanation. No, the rest is OK: CODE Valid CSS information .image { outline-offset : -1px; clear : right; position : relative; z-index : 1; max-width : 50%; width : auto; height : auto; } |
Christian J |
![]()
Post
#5
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,686 Joined: 10-August 06 Member No.: 7 ![]() |
Going back to the first post:
blockquote { line-height:1.2; position:relative; p:first-child {text-indent:1.5vw} margin: 0 1vw; The bold part above is inserted into the already existing BLOCKQUOTE rule, which basically makes the rest of the entire CSS sample invalid. QUOTE > ul ul {padding-left: 5vw;} I don't think you can start a selector with a ">" (child combinator), there needs to be something before it, for example: CODE body > ul ul {padding-left: 5vw;} Same here: QUOTE > p {margin-inline:0;margin-block:$interline*.5} --also I don't think "$" or "*" characters are allowed in property values (you can use "*" as a selector, though). QUOTE top:1.5*$interline; Same as above. QUOTE strong {color:$normal-strong-color;} Same as above. QUOTE &::before{ I don't think "&" characters are allowed in selectors. QUOTE &::after{ content: close-quote; font-size: 4rem; position:absolute; right:2px; line-height:0; } } Same as above, so maybe the entire rule (with the "position: absolute") is ignored for this reason alone (in addition to the previous errors). Also there's a stray "}" character at the end. There could be other errors as well, I just took a quick glance. |
pandy |
![]()
Post
#6
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,737 Joined: 9-August 06 Member No.: 6 ![]() |
|
coothead |
![]()
Post
#7
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 207 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 ![]() |
coothead |
Jason Knight |
![]()
Post
#8
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 ![]() |
I've read it's used by some CSS pre-processors like SASS. Which is clearly what's going on there, one of the many time-wasting code-bloating, stack-deepening time wasters any part of which could be causing more problems than it solves. That &::before alone if not being processed right would mean that pseudo-element doesn't even exist! Just like other time-wasting nonsense like p:first-child {text-indent:1.5vw} which is probably not working either. Not that one should be using vw for indents, at least not without clamp. Guessing wildly since I don't know your markup or general intent, cleaning it up to vanilla CSS would go something like this: CODE blockquote { --quoteSize:4rem; position:relative; margin: 0 clamp(0.25rem, 1vw, 1rem); padding: calc(var(--quoteSize) - 1.5rem) calc(var(--quoteSize) / 2); font:oblique 0.8em/1.2 inherit; } blockquote > p { margin:1.5rem 0; } blockquote p:first-child { text-indent:clamp(1rem, 1.5vw, 3rem); } blockquote > ul ul { padding-left:clamp(1.5rem, 5vw, 3em); } blockquote strong { color:var(--normalStrongColor); } blockquote:after, blockquote:before { position:absolute; width:calc(var(--quoteSize) / 2); font-size:var(--quoteSize); line-height:1; text-align:center; } blockquote:before { content:"\201C"; top:0; left0; } blockquote:after { content:"\201E"; bottom:0; right:0; } Whatever rubbish SCSS-style preprocessor you're using, forget it. You're just working harder, not smarter by adding tools you don't need and writing as much if not more code, in as convoluted a manner as possible. ANYONE singing the praises of that junk probably isn't qualified to write a single blasted line of HTML or CSS. If I could see your markup I could probably dial it in better. |
Jason Knight |
![]()
Post
#9
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 ![]() |
Oh also I'm trying to figure out what your picture has to do with your code, sicne that looks like what should a shortquote <q>, not a blockquote. Heck, it's not even a quote, that's an inline definition, We have a tag for that: <def>
This post has been edited by Jason Knight: Jun 20 2023, 04:13 AM |
Sentinel166 |
![]()
Post
#10
|
Novice ![]() ![]() Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 ![]() |
what the hell ?
Ok, I was majorly confused here ![]() ![]() ![]() I'll make a new post with the actually relevant code... |
![]() ![]() |
![]() |
Lo-Fi Version | Time is now: 15th June 2024 - 06:06 PM |