nostalgic-css / NES.css

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

Container with rounded corners and title has bad position #377

Open merwok opened 4 years ago

merwok commented 4 years ago

Describe the bug On firefox, container rounded with title has an unwanted border.

To Reproduce

    <div class="nes-container is-rounded with-title">
      <h1 class="title">Not found!</h1>
      <p>Sorry, the requested page does not exist.</p>
    </div>

Observed issue with and without is-centered.

Expected behavior Get a container with rounded corners + title displayed interrupting the top border.

Screenshots

container-rounded-title

Testing on demo site (by adding a class using DOM inspector) does not show the problem: demo-container

Environment:

Suggestion(s) for fixing this issue I haven’t redefined text size for root element, so with browser defaults the margin-top of -1.5rem is not enough to end up at the right place to cover the border. -1.6rem does the trick.

I am already redefining some style from nes.css (to avoid white background), so I may change this too to have -2rem which looks great to me :sunglasses: