buttons not looking fine when on the site but ok in editing program - ☔︎ ∙ I need Help!

Blue
Casual Poster ⚓︎

⛺︎ My Room
StatusCafe: overmore
iMood:

Itch.io: My Games

buttons not looking fine when on the site but ok in editing program

« on: January 12, 2025 @534.81 »

I finally made my website from scratch, but now, for some reason, the way buttons and room buttons don't look fine when put in a scroll box on when on neocities. this is what it looks like:

This is what it looks like on my PC:

I will note that when I post the link for the web version of the file on my PC, it does the same thing as the first one.
I have no idea what is causing this. It's also not helping that when looked at on a phone, it looks like the PC version. Is it only my browser that's making this issue?

This is the code used for both room buttons and regular ones, the difference are just the images used.

Spoiler

Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Garden of eden</title>
</head>
  <body>
    <img src="https://overmore.neocities.org/images/ao3.gif"/>
    <img src="https://overmore.neocities.org/images/tumblrpocalypse_button_4.png"/> 
    <img src="https://overmore.neocities.org/images/brolove.gif"/>
    <img src="https://overmore.neocities.org/images/hk_base_3_text2.png"/>
    <img src="https://overmore.neocities.org/images/stardewvalley.png"/>
    <img src="https://overmore.neocities.org/images/yumenikki.gif"/>
    <img src="https://overmore.neocities.org/images/unknown_003.png"/>
    <img src="https://overmore.neocities.org/images/vocaloid.gif"/>
    <img src="https://overmore.neocities.org/images/blends.gif"/>
    <img src="https://overmore.neocities.org/images/cinnamon.gif"/>
    <img src="https://overmore.neocities.org/images/cinnamonoll.gif"/>
    <img src="https://overmore.neocities.org/images/milktea.gif"/>
    <img src="https://overmore.neocities.org/images/piracynow.gif"/>
    <img src="https://overmore.neocities.org/images/nowebp.png"/>
    <img src="https://overmore.neocities.org/images/1html2.gif"/>



</body>
</html>

<style>

*{
  cursor: url(https://overmore.neocities.org/images/175565.png), auto;
  }
  
body{
overflow-y: auto;
overflow-x: hidden;  
}
img{
height: 26px; 
width: 67px; 
}
  ::-webkit-scrollbar {
  width: 14px
  }
  
  ::-webkit-scrollbar:horizontal {
  height: 14px
  }
  
  ::-webkit-scrollbar-corner {
  background: #eee
  }
  
  ::-webkit-scrollbar-track:vertical {
  background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
  border-radius: 3px; 
  }
  
  ::-webkit-scrollbar-track:horizontal {
  background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
  border-radius: 3px; 
  }
  
  ::-webkit-scrollbar-thumb {
  border: 1.5px solid #888;
  border-radius: 3px;
  box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
  }
  
  ::-webkit-scrollbar-thumb:vertical {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
  }
   
  ::-webkit-scrollbar-thumb:horizontal {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
  }
  
  ::-webkit-scrollbar-button:horizontal:end:increment,
  ::-webkit-scrollbar-button:horizontal:start:decrement,
  ::-webkit-scrollbar-button:vertical:end:increment,
  ::-webkit-scrollbar-button:vertical:start:decrement {
  display: block
  }
  
  ::-webkit-scrollbar-button:vertical {
  height: 15px
  }
  
  ::-webkit-scrollbar-button:vertical:start:decrement {
  background: white;
  background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #eee;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: 100% auto, cover;
  -webkit-background-size: 100% auto, cover;
  -o-background-size: 100% auto, cover;
  background-size: 100% auto, cover;
  border: 1.5px solid #888;
  border-radius: 3px;
  }
  
  ::-webkit-scrollbar-button:vertical:start:increment {
  display: none;
  }
  
  ::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
  }
  
  ::-webkit-scrollbar-button:vertical:end:increment {
  background: white;
  background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #eee;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: 100% auto, cover;
  -webkit-background-size: 100% auto, cover;
  -o-background-size: 100% auto, cover;
  background-size: 100% auto, cover;
  border: 1.5px solid #888;
  border-radius: 3px;
  }
    
  ::-webkit-scrollbar-button:horizontal {
  width: 14px
  }
  ::-webkit-scrollbar-button:horizontal:start:increment {
  display: none;
  }
  ::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
  }
  
  ::-webkit-scrollbar-button:horizontal:start:decrement {
  background: white;
  background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: 100% auto, cover;
  -webkit-background-size: 100% auto, cover;
  -o-background-size: 100% auto, cover;
  background-size: 100% auto, cover;
  background-position: center;
  border-radius: 3px;
  border: 1.5px solid #888;
  }
   
  ::-webkit-scrollbar-button:horizontal:end:increment {
  background: white;
  background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: 100% auto, cover;
  -webkit-background-size: 100% auto, cover;
  -o-background-size: 100% auto, cover;
  background-size: 100% auto, cover;
  background-position: center;
  border-radius: 3px;
  border: 1.5px solid #888;
  }
  </style>

[close]


« Last Edit: January 12, 2025 @545.35 by Blue »	Logged

ThunderPerfectWitchcraft
Hero Member ⚓︎

Here be dragons

⛺︎ My Room

Re: buttons not looking fine when on the site but ok in editing program

« Reply #1 on: January 12, 2025 @542.79 »

@Blue

⚑ Moderators Note ⚑

Put your code snippet into a spoiler, to prevent it breaking the layout ;). Also, I can't see the pictures, apparently they are not public. Maybe reupload them using postimg.cc or something like this.

That the problem isn't existent on another browser hints that it is caused by different handling through the web rendering engines - but lets wait what the HTML-people say 'bout this.


	Logged

Blue
Casual Poster ⚓︎

⛺︎ My Room
StatusCafe: overmore
iMood:

Itch.io: My Games

Re: buttons not looking fine when on the site but ok in editing program

« Reply #2 on: January 12, 2025 @546.76 »

Quote from: ThunderPerfectWitchcraft on January 12, 2025 @542.79

Also, I can't see the pictures, apparently they are not public.

I think it should be visible now, I used the site mentioned! and will be using the spoiler option in the future.


	Logged

ThunderPerfectWitchcraft
Hero Member ⚓︎

Here be dragons

⛺︎ My Room

Re: buttons not looking fine when on the site but ok in editing program

« Reply #3 on: January 12, 2025 @551.28 »

They are visible now.
Its possible that the problem is located near the text field with your own buttons link; is it and the container it is located in correctly closed? Are pages all stored within the same folder?


	Logged

Melooon
Hero Member ⚓︎

So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games
RSS:

Re: buttons not looking fine when on the site but ok in editing program

« Reply #4 on: January 12, 2025 @587.50 »

It looks perfect all browsers for meeee, so maybe this is fixed?

I do wanna add that your <style> tag should never be outside your <html>! A <html> tag should only contain <head> and <body>; ur <style> should be within one of those. That's prob not the issue here, but its always helpful to get the basics out of the way when figuring out issues ^^


« Last Edit: January 12, 2025 @588.95 by Melooon »	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

Blue
Casual Poster ⚓︎

⛺︎ My Room
StatusCafe: overmore
iMood:

Itch.io: My Games

Re: buttons not looking fine when on the site but ok in editing program

« Reply #5 on: January 12, 2025 @602.71 »

Quote from: Melooon on January 12, 2025 @587.50

I do wanna add that your <style> tag should never be outside your <html>! A <html> tag should only contain <head> and <body>; ur <style> should be within one of those.

Oh, thank you!

Quote from: Melooon on January 12, 2025 @587.50

It looks perfect all browsers for meeee, so maybe this is fixed?

I'm starting to feel that this is a me issue, since there's no problem with this on my phone when I look at it there and the website preview it looks fine. I'm wondering if it could have something to do with the index scale? I tested it in two other browsers (my main is Chrome) and it only seems to not be an issue in Microsoft Edge while Firefox has the same problem. On mobile I also use Chrome and there it works fine. But if it's only a problem on my laptop, it's probably not going to be too unpleasant for other people to view it which was my main concern here.


	Logged

Melooon
Hero Member ⚓︎

So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games
RSS:

Re: buttons not looking fine when on the site but ok in editing program

« Reply #6 on: January 12, 2025 @638.99 »

Sooo the white background I'm not sure about but:

I had a deeper look and I have a theory! All of your width sizes are % based, meaning they are calculated relative the the element they are within. Annd the only fixed size element you have is the <body> at 800px. Meaning you have % stacked on top of % on top of %.

Firstly I would not totally recommend setting a width on the body; the <body> is a special tag that's used to let the browser know "this is where the visible webpage will live" and its best not to mess with it's position and size (same goes for the <html> tag, it should almost never be styled unless you reaaallly understand why ur doing it). I would suggest put a wrapper <div> in the body, set your 800px width on that, and then put everything inside it.

Code

<head>
  <style>
  #wrapper {
    width: 800px;
    //put the rest of your body CSS here instead
  }
  </style>
</head>
<body>
  <div id="wrapper">
     //Everything goes in here
  </div>
</body>

That gets us to your issue though. MAYBE what you are seeing is a computational variation between how each browser (and computer) is calculating all these % values. Some computers are loosing a few fractions of a pixel, others are adding a few. Maybe some browsers are adding an extra padding pixel and others are not!

The simple fix would just be to make your body/wrapper a bit wider; making it 810px would mean there would be more margin for error and your badges would not end up getting squished into a single stack

All that said!! I do think your page is well planned out and using the % values means you can resize it super easily. That was a good choice to do; but you might just be pushing the tolerances a bit too hard. Plus brushing up on the core basics of HTML structure would not hurt (I understand most tutorials actually don't always say much about this

)


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

Blue
Casual Poster ⚓︎

⛺︎ My Room
StatusCafe: overmore
iMood:

Itch.io: My Games

Re: buttons not looking fine when on the site but ok in editing program

« Reply #7 on: January 12, 2025 @800.03 »

Apparently, no matter what I do nothing seems to help

I might have to leave this one for a bit later cause I'm stressing a bit too much over it. It would be a better idea to go over this tomorrow and see what was the issue in the end. If I have the time, I might also try to redo the code and see if something changes, while also looking up on some of the basics. most of this was done by me looking at other codes and trying to make something on my own, so a proper guide would probably do wonders for me in fact. Still, thanks for the help!


	Logged

Pages: [1]

« previous next »

Vaguely similar topics! (3)