The Firefox browser is not fully displaying the button background

Having an issue with a button that doesn't completely fill up on Firefox only. Here's the problem in action:

This is how it should actually look:

Not quite sure what to do. Here's the CSS styling being used:

.button-panel .button {
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  height: 55px;
  font-size: 27px;
  letter-spacing: 0.05em;
  text-align: center;
  width: 100%;
  font-family: 'Avenir Next';
  display: inline-block;    
  font-weight: 300;
  background-color: #6699FF;
  outline: 3px solid #6699FF;
  line-height: 59px;
}

Check out the demo here: http://jsfiddle.net/h7PXe/

htmlcssfirefox

Answer №1

The reason why this is appearing is because the line-height is larger than the height of the element.

Take a look at how the box model works and where the outlines are displayed: https://i.sstatic.net/Q6J6n.png

You can achieve the same appearance without using basic properties (which will make it compatible with all browsers)

.button-panel .button {
    display: inline-block;
    padding: 7px 0 5px;
    border: 3px solid #6699FF;
    width: 100%;
    font-family: 'Avenir Next';
    font-size: 27px;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-align: center; 
    background-color: #6699FF;
    cursor: pointer;
  }

http://jsfiddle.net/h7PXe/1/

Answer №2

To ensure the height is properly set, use height: 100%. This informs the browser how to determine the height of the element.

.button-panel .button {
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  height: 55px;
  font-size: 27px;
 letter-spacing: 0.05em;
 text-align: center;
 width: 100%;
 font-family: 'Avenir Next';
 display: inline-block;    
 font-weight: 300;
 background-color: #6699FF;
 outline: 3px solid #6699FF;
 line-height: 59px;
 height: 100%
}

Here is a demo for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Properly aligning text with checkboxes using HTML/CSS and tags like <span> or <div>

My goal is to have the text displayed as a block in alignment with the checkbox, adjusting based on the sidebar's width. For reference: Current Layout Preferred Layout I have shared the code on CodePen (taking into account screen resolution and wi ...

javascripthtmlcssangularjscheckbox

Enhance the appearance of 6 image URLs by wrapping them in dynamic divs with the

Can someone assist me in displaying 6 images retrieved from a MySQL database on an MVC Razor view? Images 1 and 6 should be placed in separate divs labeled "item", while images 2, 3, 4, and 5 should be grouped together in a div called "item-small". Below i ...

javascriptjquerycssasp.net-mvc-4razor

Displaying a subset of categories based on the user's selection

I have been trying to find a solution to automatically display a subcategory select drop-down only when a user selects a category. If no category is selected, the subcategory drop-down should remain hidden. I have searched online tutorials and videos for ...

javascriptphphtmlcategories

Assigning attributes to each letter in a pangram

I am attempting to assign the appropriate class to a group of elements, representing each letter in the alphabet. The elements have IDs ranging from #alpha_0 to #alpha_25. If a letter appears just once in the input, it should be displayed in green. If a le ...

javascriptjqueryhtmlcssjquery-selectors

Guide to setting up jQuery Mobile with bower

For my project, I'm interested in utilizing jquery-mobile through bower. In order to do so, I need to execute npm install and grunt consecutively within the bower_components/jquery-mobile directory to access the minified .js and .css files. This pro ...

javascripthtmlnode.jsgruntjsbower

It appears that the flex-grow property is not functioning as expected

I am working with a parent div and two children divs underneath it. I noticed that when I set the flex-grow property of the first child to zero, its width remains constant. However, if I add text to the second child, the width of the first child decreases. ...

javascriptcssflexbox

React Scroll and Material-UI button active link not functioning correctly

Whenever the link goes to the correct page, I want to add a special background effect or change the font color. Despite trying to use CSS for this purpose, it didn't work as intended. If you want to take a look at my code on codesandbox, follow this ...

javascriptcssreactjsmaterial-uireact-scroll

Switching from ejs format to html

I've been working on a tutorial that uses ejs, but I'm not too familiar with it. I'd like to know how to convert the server.js from using ejs to html. Here's the code snippet: app.set('view-engine', 'ejs') app.use( ...

javascripthtmlnode.jsexpresspassport.js

Effortlessly Concealing Numerous Elements with a Single Click in Pure JavaScript

I have successfully created an HTML accordion, but I am facing an issue. I want to implement a functionality where clicking on one accordion button will expand its content while hiding all other accordion contents. For example, if I click on accordion one ...

javascripthtml

When using React, I noticed that adding a new product causes its attributes to change after adding another product with different attributes on the same page

Imagine you are browsing the product page for a Nike T-shirt. You select black color and size S, adding it to your cart. The cart now shows 1 Nike T-SHIRT with attributes color: black, size: S. However, if you then switch to white color and size M on the ...

javascripthtmlcssreactjsarrays

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

javascriptphphtmlcss

What is the best way to trigger card opening - through clicking or hovering?

Once the Set tag/status button on the left is clicked, I aim to display a card similar to this one on the right side. What would be the best approach to achieve this in React? Should I use regular CSS, Material UI, or React-bootstrap? https://i.stack.img ...

cssreactjssassmaterial-uireact-bootstrap

In the realm of typesetting, a punctuated line gracefully weaves its way between two

I am trying to create two sentences with a fixed width of 30%, but the first words in my div go to the next line. The class="left" words are not displaying properly, and then my second div "words" gets mixed with the first div. HTML <div class="bg"> ...

htmlcss

The poker table designed with CSS does not resize effectively when displayed in smaller dimensions

I have put together a CSS poker table design that I am quite happy with at the moment: https://jsfiddle.net/78fcs01m/3/ CSS: .poker-container { display: grid; width: 100vw; height: 100vh; .poker-table { justify-self: cent ...

cssresponsive-design

What is the best way to showcase 100 json data entries within an HTML document?

Starting from scratch with html, css, and javascript, I've embarked on a basic learning project. Within this project, I plan to create two main pages: a list page and a detail page. The list page will showcase posts on the html screen, featuring only ...

javascripthtmlcssjsonapi

The astonishing font-icon animation feature is exclusively functional on code-pen

I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG I even tried running it on http://jsfiddle.net/qjo7cf3j/ @import url(http: ...

cssfont-awesome

Utilizing CSS classes and IDs for unordered lists

What's the correct way to write it when the ul is a class instead of an id? ul#Menu li a{} ul.Menu li a{} isn't functioning correctly ...

css

Utilizing LocalStorage in an Ionic application to store data on a $scope

Having trouble saving the array named $scope.tasks to LocalStorage while building a To Do List app. Tried multiple times but can't figure it out. Here's the code, appreciate any help :^) index.html <!DOCTYPE html> <html> <head& ...

javascripthtmlangularjscordovaionic-framework

Discover the secret to creating a seamless looping effect on text using CSS gradients, giving the illusion of an endless loop

Could use some assistance with looping this gradient smoothly over the text without any annoying jumps appearing during the animation. Is there a way to achieve a seamless movement across the text? Any suggestions on how to approach this? Here is a liv ...

htmlcss

What is the reason for translate3d(…) causing a scrollbar to appear on iframes?

Is there a way to hide the tiny, fixed scrollbar that appears at the bottom of an <iframe> with overflow-x: scroll, even when there is no content to scroll, while keeping the transform: translate3d(0px, 0px, 0px) style set? https://i.sstatic.net/kaV ...

htmlcssiframe