hello! the pet profile in question is selane--

until recently i was able to have this bar of text ("Inventory") appear above my pet treasures, like so:

previously

but i went to look at it just now and the Inventory text no longer displays on browsers like chrome and opera i think because of a recent browser update. it's hidden underneath the border.

the bar is made by using a border-top: 30px, & the "Inventory" title is by a pseudo-element (:before) with margin-top: -25px. i have set to overflow: overlay.

the Inventory title can be moved anywhere underneath the border by changing the margin, but i can't get it to appear on top of the border unless i change to overflow: visible (which would defeat the purpose of the box/scrolling ;A; )

changing the margin

i can't think right now of any possible way to wrangle/fix it q_q i could just eliminate the border and change it to padding-top: 30px but then it'll scroll along with the items, but! i might do that if there's no other way to change it back to the way it was before.

maybe there's only a slim chance, but does anyone have any ideas/alternatives? (also...the code is a mess but i hope it's decipherable)

any help at all would be extremely appreciated--and thank you very much in advance for reading or attempting a solution ;u;

1. Get rid of the 30px top border on
2. Give it 30px padding-top instead.

That should fix your problem :)

ghsdjkf thank you bug for coming to my rescue!! there was initially a bar on top that would cut the items off as i scrolled down and i managed to wrangle that into the code again, along with the border removal/padding addition, but then now it breaks on firefox. i think i'm pretty close to getting it back to the way it was before and was wondering if you had any further ideas you could think of...

what i did was turn the :before into a bar by adding a bg and width 100%, but the width doesn't inherit the value from because i set it to fixed (and i think fixed is the only way to go if i want it to stay on top?). it's neatly contained in the overflow: hidden on chrome & opera, but it isn't on firefox and you can see the bar jutting out. it'd be an easy fix if the TC box was an absolute value but it scales every couple steps of the way after a certain point. i was wondering if there was a way to get it to actually obey the overflow: hidden rule on FF, or inherit the value so its width can scale along as the box resizes, before i make the spaghetti worse and just add a bunch of media queries and set width manually to get it to stay within the bounds every time the TC box gets slimmer Q__Q (or just deal w/ it and make do with the code)

{border-top: 0; padding-top: 30px} :before { z-index: 10; margin-top: -30px; background: black; padding: 5px 10px; width: 100%; text-align: left; }

sorry ahh i know i should make do, but now i'm just dumbly curious if i'm missing an easy step to fix all this U__U if it's not a simple solution then that's okay though!! again i appreciate the help big time!

I should apologize as I answered before I understood your question fully! I think I understand it now. I have one idea for solving this, but I'll warn you, it's a total hack. Still I'd love if you could try it out and tell me if it actually works!!

First, get rid of the border-top and replace it with padding-top 30px as mentioned above. (You can't place a child div on top of the border if the overflow is hidden. It's a browser bug with webkit I think if they're not following that rule. So, if this is to be visible in all browsers, you have to place it on the padding rather than the border.)

So the next part of this hack will address this problem:

However, you can set it to the same width as (width 61%, min-width 200 and max-width 500). Once you've set it as the same width, the problem is that it still juts out a bit. The reason is that has an additional 40px total of horizontal padding. So you need to subtract this padding somehow. It would be great if we could somehow have it automatically do this with box-sizing:border-box on a container, right? That's where my horrible hack comes in.

Take everything that you have on :before, and instead, set it on h2:before. Then, change a few of these rules as follows:

• change position to position:static!important
• delete the margins (both top and left)

Set the following rules on h2

• display:block!important to override the display:none
• font-size:0px to hide its default content
• position:fixed and box-sizing:border-box (must be explicitly set!)
• padding-right 40px (this will correct the width jutting out that you noticed)
• margin-top:-25px (to move it into the padding)

Set the following rules on both h2 and h2:before

• the same width rules as has (width 61%, min-width 200 and max-width 500)
• height 30px

Finally, set a solid background-color on h2:before. What you'll see now is that:

• The pseudo-element is fixed to the top of the parent
• The pseudo-element has a solid background which hides the treasure items scrolling underneath
• The pseudo-element is the correct width and obeys text-align:center correctly

From there, I think you will need to make minor adjustments to things like the height value etc to make things line up perfectly, but the hard part should be taken care of!

If it doesn't work as is, I'd very much appreciate if you could make these changes to the pet profile anyway and let me look at it further from there :)

gahh you're a real saint , and not at all!! i wasn't sure how to phrase the question at all (this was pretty much a shot in the dark) so believe me, i'm just glad that you could understand it T-T i followed your instructions and the bar resizes now when the screen's width decreases to a certain point! but aside from the minor alignments that you mentioned will need tweaking, i'm having trouble with the bar being the correct width/taking up the entire space. not sure if i'm missing anything but the highest width the pseudo-element can reach is 280px and stops there:

SPOILER (click to toggle)

if you ever have time to look into it, i've added the changes into a separate style tag (third one down from pet desc) and i'll put it here for convenience just in case: {border-top: 0; padding-top: 30px} h2:before { content: '1F4B0 Inventory'; background-color: black; text-align: left; position: static !important; display: block; font-size: 18px !important; text-shadow: 0px 0.5px 0 , -0.5px 0 0 , 1px 0 0 , 0.5px 0.5px 0 ; color: ; }

:before {content: none;}

however! i tried messing with the width and min-width properties for h2 and h2:before. changing width to 80%, and min-width to 420px seems to keep it within the bounds, even in FF (though i don't know why 80% is the magic value @) if this is a good solution then i'll only have to add one or two media queries instead of a bunch and it'll be back to the way it was before.

ghh thank you for deciphering my spaghetticode and helping me with this!! and for the very detailed step-by-step/explanations as well--you have no idea how much i appreciate it ToT

Ah I see my mistake!

1. Remove the "width:61%" rule on both elements.
2. Set width:61% on h2
3. Set width:100% on h2:before

Then the pseudo-element should take the correct width (the h2 minus its padding)!

Also, I think, to position the h2 so it aligns more with you could change it to have a margin-left:-20px, and then set both padding-left and padding-right to 20px. That would at least center it within , which should also cause your title to be centered.

ahdhs /thank you/!! I was able to try it a bit in the morning and it seemed to cover the same length as the width 80% value (w/o having to adjust min-width iirc)?? I will ping again as soon as I can try it out one more time!!

whsdhfs so i finally got to try the fixes again, aligned it and such and it's now back to the way it was originally u you're the absolute best, thanks so much for being patient with me and helping me through this mess!

I'm so glad to hear it's working properly now!! I'm glad I could help! <3