Firefox causing line-height problem

Having an issue with styling a search button in Firefox. The input submit is created using an iconic font, white background, and border-radius as shown below:

display: block;
width: 60px;
height: 60px;
line-height: 60px !important;
padding: 0;
background: white;
border: 0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
font-family: 'iconic';
color: #bad104;
font-size: 5em;

In Chrome and IE it looks perfect :

But in Firefox, this is what I see:

After inspecting the DOM on both browsers, I noticed that "calculated values" differ - specifically line-height between Chrome (60px) and Firefox (67px).

I've tried various solutions without success so far. Any guidance would be greatly appreciated!

Thank you!

htmlcssgoogle-chromefirefoxicon-fonts

Answer №1

Avoid defining a unit of measurement using line-height, as it should be relative to the font size for consistent spacing. Instead of setting

line-height: 60px;

consider using either

line-height: 1;

or

line height: 100%;

This way, you indicate that the spacing is in sync with the font size.

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

Increase the size of a div to equal the combined width of two divs located directly below it

I need help aligning 3 divs so that the top div stretches to match the width of the bottom 2 divs combined. Here is an image showing the expected div positioning. I attempted to use display: table-row for the divs. <div id="main_div" style="display: ta ...

htmlcss

"Pairing div/span elements with sprites for improved web

I've been updating my website by replacing most inline images with sprites. Here's a basic CSS code snippet for the sprite class: .sprite{ background-image:url(...); background-position:...; width: 16px; height:16px; } After learning that nest ...

csshtml

jQuery toggle functioning in one scenario, but failing in another

My experience with JS/Jquery is limited which might explain why I'm struggling with this. I am attempting to hide some text on a page and then make it visible again by clicking on a toggle link. The JavaScript code below is what I have been using. The ...

javascriptjqueryhtml

The button will remain inactive until a selection is made from the drop-down menu, following Material

Is there a way to use Material Design css and jquery to disable the next button until a value is selected from a drop down list? <div class="mdl-selectfield mdl-js-selectfield"> <select class="mdl-selectfield__select" id="ad_duration"> ...

jqueryhtmlcssmaterial-design

Can CSS be used to eliminate shadows from a particular image?

Is it possible to eliminate the shadow from a specific image that is displayed multiple times on various pages of a website? This particular image should not have any shadow. Link to Image The image can be found on pages like this one: Page Link Below ...

css

Look into HTML and JavaScript problems specific to IOS devices

I have encountered some HTML markup and JavaScript functionality issues on my web-app that seem to only occur on iPad and iPhone. Unfortunately, I do not have access to any iOS devices to debug these problems. How can I replicate and troubleshoot these i ...

javascripthtmliosdebuggingemulation

Verify if the link includes https:// while using angularjs

In my angular app, there is a lot of data stored in JSON format. [ {"link": "https://stackoverflow.com"}, {"link": "https://stackoverflow.com"}, {"link": "id-aW783D"}, //This data is incorrect {"link": "https://stackoverflow.com"} ] However, the ...

javascripthtmlangularjsjson

Is it possible to stream audio and video independently within the same video file?

<video id="video1" width="320" height="176" controls="controls"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.m4a" type="video/m4a"> </video> I am looking to enhance this video by incorporating an audi ...

javascripthtmlcssaudiovideo

Tips for horizontally aligning a list with sublist using CSS

Is there a way to align a horizontal list with a sublist in HTML and CSS? I want the menu items (Home, News, etc.) to be on one line, with submenu items below them. HTML <body> <div class="menu"> <ul class="menu_l ...

htmlcss

What are the steps to design a curved gauge with a linear-gradient background?

Looking to create a fully responsive gauge using only CSS, ranging from 0-100% with a gradient color transition from green to red. After encountering issues with existing examples, I conducted tests and ultimately developed a solution that somewhat meets t ...

htmlcssborderlinear-gradients

IE is causing issues with parseInt, returning NaN, while Chrome is working properly with it

When attempting to convert a date in a string to a Unix timestamp integer, I encountered an issue. While using parseInt successfully changed the string to an integer in Chrome, Internet Explorer and Edge returned NaN. If you'd like to see the code sn ...

javascriptjquerygoogle-chromeinternet-explorermicrosoft-edge

Create a semicircle progress bar with rounded edges and a shadow using JavaScript and CSS

Despite my extensive search efforts, I have been unable to find a solution. My goal is to create a progress bar with rounded corners that includes a shadow. So far, this is what I have managed: $(".progress-bar").each(function(){ var bar = $(this). ...

javascriptjqueryhtmlcssprogress-bar

Is there a way to adjust the slide length in JQuery's slideUp function using pixels? It seems like

At the bottom of a page, I have a fixed position div element. There is another div below it, but it is hidden outside of the page margins. I am attempting to slide both divs upwards so that the bottom one becomes visible (moving out of the margin). However ...

jqueryhtmlcss

Nodejs Websocket integration with the Firefox browser

Currently, I am utilizing Aurora 17 along with Chrome 22 and Firefox 16 in order to develop a basic chat application. My server-side technology is Node 0.8.9. The issue I am experiencing pertains specifically to Firefox, as it fails to establish a connect ...

javascripthtmlnode.jswebsocketchat

Using DOMParser() eliminates whitespace

Basic code example: const parser = new DOMParser(); const foo = parser.parseFromString(<p> Foo</p>, 'text/html'); console.log(foo); This results in https://i.sstatic.net/8E2br.png Why have all the leading empty spaces before " ...

htmldom

Fixing the issue of list styles not displaying properly when using CSS3 columns in Webkit can be achieved by

example here: http://jsfiddle.net/R7GUZ/3/ I'm struggling to make the list-style property work in webkit for a parent OL that is styled with -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; Is there a way to format an ordered list ...

htmlcsshtml-listsmultiple-columns

Guide on aligning two text boxes next to each other using CSS flexbox and restricting the width for desktop screens exclusively

I am struggling with arranging two text boxes in a CSS flexbox. The left side contains a tagline while the right side has a brief summary. My goal is to have these boxes display side by side at the center of the webpage for desktop screens (min width 1024p ...

htmlcss

Various colored backgrounds in a random arrangement on a grid post layout

I'm looking to implement this plugin for displaying blog posts, but instead of using an image as the background, my client wants different colored images. I have managed to figure out the code to achieve this based on a post I found here, but unfortun ...

javascriptcsswordpressbackgroundalternating

I am currently attempting to execute an HTML file in VS Code, but encountered an issue with the following error message: "Sorry, we can't find your file. It may have been relocated, modified, or removed."

I am trying to work on a Hello World HTML file, but for some reason I cannot find the file even though I have it opened from Ubuntu. As I am new to coding, I am struggling to figure out what's going wrong. <!DOCTYPE HTML> <HTML> <head& ...

htmlubuntuvisual-studio-code

What is the method for detecting when the Enter key has been pressed in a field?

I often have several fields to fill out, with the user typically pressing 'enter' on one of the two main ones. I'd like to determine which field 'enter' was pressed on, but I'm not very familiar with JavaScript. Can anyone gui ...

javascripthtmlpost