snuggles Pet profile armageddon is upon us! I've managed to fix (read: kludge) my more elaborate profiles into working properly, but Blackburn's is pretty minimal and yet has this really weird scrollbar inside the content div as well as one on the page. Not only does it look ugly, it makes the page more difficult to view. Worse, the content div scrollbar is hidden in Safari on iOS, so it might confuse mobile users on that platform. Please halp. Ideally I want to kill the scrollbar in the content div and have the page scroll as a single unit.
As an additional "oh god pls halp", all my profiles seem to have unnecessary vertical scrolling: Mall Cop as an example. The repeating background also cuts off horizontally, but I'm just baffled at the extra scrolling that doesn't seem justified by content or code.
Blackburn's profile should be fixed by adding this { height: auto!important; }Mall Cop's can be fixed in the same way, but then by adding !Important to your existing { height: 625px!important; }The repeating background doesn't seem to cut off for me though.
It doesn't seem to be clearing the scroll bars from either profile O_o
The background cut off seems flakey- it's cutting off in iOS, but seems fine in chrome on a desktop. The mobile screen scaling is back, so I'm not sure if it's related, though the extra vertical scrolling seems to be forcing my profiles to scale down more than they need to to fit the window. /baffle
Strange, both Blackburn's and Mall Cop's profile seem fine to me now... Did you add the code to the profiles themselves, or did you add it to an external stylesheet? If it's an external sheet it might be that it's still cached. Can you maybe post some screenshots of what it looks like on your devices? I don't have any iOS devices to test with.
To the pages themselves; I don't have hosting to drop a stylesheet on. I'll check in a couple other browsers/OSs since maybe this is chrome on OSX weirdness.
Edit: Actually, the mobile scaling seems to now be off on pet profiles so they're behaving there. Everything seems working in Opera, even the pages I haven't tried to fix the vertical scrolling on yet. Maybe something happened behind the scenes that my instance of Chrome hasn't noticed yet.
even then, the scrollbars are still there unless i add "overflow: hidden" to but then i can't have anything outside of it... ugh this is a mess...
OK, ping me once you have some screens then :)
Can you link to a profile where you have this issue? I'll check it out for you :)
Hey guys, I pushed a fix for this! Very very sorry about this issue. What happened was, I added CSS to that page to essentially undo some of the layout changes that were causing the most problems. But one of those lines ended up overwriting the content height no matter what! I moved this CSS to the top of the page so you should now be able to set the height of the content with !important and it'll work.
🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights
frosix is supposed to have a line of text underneath the white box (which is the content div) that says "premade profile by ." right now overflow-y is set to auto, and the entire div scrolls even though it shouldn't (the div inside it is what is supposed to scroll). but if i set overflow-y to hidden, the credit won't appear below the box.
Everything seems working right now- it was to the rescue to save us from the wonkiness. Thank you for helping me out!
Hey, but it got fixed! Although whoever reviews pet spotlights after edits will have their work cut out for them!
That would be our good friend . I'm so sorry Destiny D:
🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights
That doesn't really make any sense to me, I'm sorry. If you set a height on a div, the content is not supposed to be able to come out of it. Adding a height on a div makes it scroll if the content is longer than the div and overflow:hidden hides that scroll.
Yay, glad that it worked and you're welcome!
Thanks for the update!
it used to work just fine, though. the credit div had absolute positioning so it just kind of floated outside the content div. this was the original code:
SPOILER (click to toggle)
<style>
, .bookmark, , , , , , , , , , , , , -right, , , , .prototip, , , -ban, -ban-main, -lrc, -rrc, , h2, , .hustler, .pet_age_info_date, .pet_wco_info_date, , , a, {display:none}
*{margin:0;padding:0}
.notice {background:none;border:0}
.container-fluid {margin:0px}
::-webkit-scrollbar {width:5px} ::-webkit-scrollbar-thumb {-webkit-border-radius:10px; border-radius:10px; background: rgba(206,206,210,1)}
, , body, , , {background-color:transparent; height:auto!important; color:; font-size:9.5px; text-transform:lowercase} {background-color:; top:0px; left:150px; width:500px; min-height:500px!important; height:500px!important; margin:0px; padding:0px; border-right:10px solid; border-radius:0 0 10px 10px; opacity:.9}
body {background:url(http://i.imgur.com/M1gviQH.gif) left top repeat fixed }
{position:absolute; top:500px; left:375px; color:; width:150px; height:25px; font-size:9px; overflow:hidden; opacity:.4}
{position:absolute; left:270px; top:25px; width:225px; height:450px; overflow:auto ;background-color:; font-size:10px; color:!important; padding-right:5px}
{position:absolute; left:230px; top:-25px}
{position:absolute; top:60px; left:30px} .pet_name {position:absolute; left:30px; top:22px; font-family:Georgia; font-size:28px; color:; text-transform:none} .owner {position:absolute; left:160px; top:40px; color:} .pet_color_info {position:absolute; color:; position:absolute; top:40px; left:15px; width:130px} .pet_like {position:relative; left:38px; top:-13px} i.red.icon {color:!important}
{text-wrap:unrestricted; position:absolute; left:-210px; top:295px; font-size:8px; color:; width:120px}
.pet_spotlight {position:absolute; top:270px; left:150px; height:70px; width:80px; text-align:center center; font-size:8px; color:}
{position:absolute;left:10px;top:375px;width:240px; height:100px} img {height:50px!important; width:50px!important} .treasure_item {margin-right:-5px}
.treasure_item, img, .pet_spotlight img, {opacity:0.75; transition:0.2s all ease} .treasure_item:hover, img:hover, .pet_spotlight img:hover, :hover {opacity:1}
{position:absolute; top:30px; left:510px; height:262px; width:210px; overflow:hidden; background-color:; margin:0!important; padding:0!important; border:10px solid; border-radius:0 10px 10px 0; transition: max-width .5s ease-in-out; -webkit-transition: max-width .5s ease-in-out; max-width:0px} :hover {max-width:210px} , , {background-color:} , , {background-color:} a, a {display:inline} .statbar {border-color:}
b, strong {color:} i {font-family:Georgia; color:} u {color:} hr {color:; background-color:; border:; height:1px; width:70%} h1 {font-size:16px; color: text-align:center} a,a:link,a:active,a:visited {color:} a:hover {color:}
</style> but now that leaves it with extra scrolling... i'll keep trying to fiddle with this but all my other profiles are still broken as well... :(
[edit]i also used to have an expanding tab off the right side where the stats would pull out, but that is also now subsumed inside the scrolling content div... bluh i might just recode the entire thing, it was based on a template profile back from before i knew what i was doing.
I'll check it out after dinner, see if I can fix it so that you don't have to rewrite the whole thing :)
Hi, guys! Is there a way around setting a fixed height for pofiles? The height:auto!important thing for doesn't work (it looks like this for Schwarz).
So in order for it to work, I set the height as 7410px for now for Schwarz (live profile here). However, this means that whenever I add one more row of TC items to Schwarz's TC, I'll have to adjust the height. It's not a huge hassle, but I'd like to know if there's any way to avoid this.

I took another look at the profile, but I'm afraid that it's probably going to be quicker to just rewrite the profile than to try and fix it :S
Not in Schwarz's case. The height:auto thing doesn't work on that profile because you absolute-positioned everything inside the content div. So the content div doesn't know how tall it should be, which is why it's so short if you height:auto it. So you have to either change the height every time or rewrite the other blocks to not use position:absolute.
yeah it's probably better that i do anyway. i've been meaning to clean up that code for a while now.
Thank you so much for explaining it!
I remember several years ago, when the site was undergoing some coding changes, it was like a common believe that "position:absolute" was better. And I switched to that because of it. Sigh...it's going to be a while for me to fix all the profiles. I understand the situation, but it's just very frustrating nevertheless.

Good luck with that and feel free to ping me if you need any help!
I think that was a CSS-fad in general, not just here on Subeta. And at that point in time, it was better. Such things tend to change though, due to improving browser support for certain CSS features.
@ Hongske I see! I kinda only taught myself basic css because of subeta, so I'm more like the person who knows a little bit of how but not why xD.
Could I bother you for one more thing please? I was testing the content height thing on this profile, and I relative-positioned everything. For now, with height:100%, it kinda works, and I don't need to adjust the content height each time I added more rows of TC items. But is there a way to eliminate the blank space at the bottom of the page (I'm guessing the blank space is there because I still have to position some elements with "top:-265px")? Thanks in advance :)!
code here
{position: relative;top: 0px;left:172px;border: 0px solid ;width:600px!important;height:100%!important}
body{background-color:;background-image:url();background-repeat:no-repeat;width:500px;height:600px} html{background-color: ;background-image:url(); background-repeat: repeat-y; }
.stat {display:none;} .statbar {display:none;} .pet_wco_info, .pet_wco_info_date {display:none;} .hustler {display:none;} , , , -ban, -ban-main, -lrc, -rrc {display:none;} , -right, , , {display:none;} , , body, , , {background-color:transparent;} {display:none;} h2 {display:none}
body, font, td, a, p, table, tr {font-size:12px;color:;font-family:georgia} div {font-size:12px;color:;} h1 {font-size: 17px;text-align: center;font-family:georgia}
{display:none} {position: relative; left:3px;top:30px;width:200px;background-color:;height:280px;border-top-left-radius:20px;border-radius:10px;border:3px double ;opacity:0.8;} .pet_name {position: relative; top:-13px;font-size: 23px;font-family:georgia} {position: relative; top:2px;} .pet_color_info {position: relative; top:-25px;} .owner {position: relative; top:-25px;font-family:georgia} .pet_age_info_date, .pet_age_info{display:none} .pet_like { position: relative; top:-35px} {display:none}
{position:relative; left: 233px; width:285px;top:-265px;height:280px;overflow:hidden;background-color:;border:3px double ;overflow:auto;opacity:0.8;border-radius:10px;}
{position: relative; left: -12px; width: 566px;top:-257px; overflow:auto;background-color:transparent;border-radius:20px;border:0px solid ;} a:link { display: none; } .treasure_item img {border: 1px solid ; padding: 2px; opacity:0.8;border-radius:6px} .treasure_item {width:92px;margin-top:2px;margin-bottom:6px} .treasure_item img{opacity:0.8} .treasure_item img:hover{opacity:1}
{display:none}
