position:absolute doesn't work, display nothing Options

[Sentinel166]

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]

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]

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

.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]

Sorry but that tool's completely useless imho...

I can agree that the error reports are a bit cryptic.

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.

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]

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.

> 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:

> 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).

top:1.5*$interline;

Same as above.

strong {color:$normal-strong-color;}

Same as above.

&::before{

I don't think "&" characters are allowed in selectors.

&::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]

&::before{

I don't think "&" characters are allowed in selectors.

I've read it's used by some CSS pre-processors like SASS. But I don't know if something like that is in use here or if it is, if the ampersand is used the correct way.

[coothead]

It really is a shame that no one has requested the O.P.
to provide a link to their problematic site and/or supply
the files that were used to create it.

With all the relevant information, I am sure that some of
our illustrious members would then be able to provide a
solution.

coothead

[Jason Knight]

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]

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]

what the hell ?
Ok, I was majorly confused here
I'll make a new post with the actually relevant code...