position:absolute doesn't work, display nothing |
position:absolute doesn't work, display nothing |
Sentinel166 |
Jun 18 2023, 04:07 AM
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 |
Jun 18 2023, 05:09 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,679 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 |
Jun 18 2023, 05:17 PM
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 |
Jun 19 2023, 07:24 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,679 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 |
Jun 19 2023, 07:39 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,679 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 |
Jun 19 2023, 01:14 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
|
coothead |
Jun 19 2023, 02:57 PM
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 |
Jun 20 2023, 04:10 AM
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 |
Jun 20 2023, 04:11 AM
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 |
Jul 12 2023, 11:39 AM
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: 4th June 2024 - 11:04 PM |