nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク
https://nostalgic-css.github.io/NES.css/
MIT License
20.76k stars 1.66k forks source link

Buttons and containers look .. weird on Firefox and Chrome #509

Open DRA6N opened 7 months ago

DRA6N commented 7 months ago

I copied the example from the NES.css site

This is what they look like: image

As for containers, how do I put the titled to the left, rather than it centered - like the example on the site image

calthies4 commented 6 months ago

I was running into a similar issue - I tracked it down to this:

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.nes-btn{border-image-repeat:space}}

Obviously this was added for a reason, but it only seems to mess up the buttons in firefox/chrome. I removed that code from my copy of the .css and the button borders look as they should.

withhawaii commented 1 month ago

@calthies4 Thanks for finding the root cause of this issue!
I added the following code to my css to override border-image-repeat property.

@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .nes-btn {
    border-image-repeat: stretch;
  }
}