Styling an input button to look like a link in Firefox and Internet Explorer

I'm currently using CSS to give my input button the appearance of a link.

Here's how I've styled it:

input#linkLike {
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    display: inline;
    vertical-align: baseline;
}

While this works perfectly in Chrome, I'm encountering some whitespace around the button in Firefox and even more space in Internet Explorer.

http://jsfiddle.net/S4nF9/5/

I'm curious about where this extra whitespace is coming from and what steps I can take to eliminate it.

htmlcssfirefox

Answer №1

As mentioned in this source,

Within the button elements, Firefox utilizes pseudo-elements for drawing. The inner pseudo-element adds a padding of 2px to the top and bottom, which can be removed with the following code:

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important; 
}

This adjustment caters to Firefox. For reference, view the new fiddle.
(Note: although the article specifies top and bottom padding, it also applies to the left and right.)

Unfortunately, I am unable to test this on IE at the moment as I do not have access to it.

Answer №2

One option would be to specify a width value for it.

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

Button click not triggering Ajax functionality

I've been working on implementing a simple Ajax function in a JSP using JQueryUI. The goal is to pass two text fields from a form and use them to populate two separate divs. However, when I click the button, nothing seems to be happening. I even tried ...

jqueryhtmlajaxjsp

Guide on inserting an item into a vertical navigation menu

When it comes to creating a vertical menu, I rely on Bootstrap 5. https://i.sstatic.net/8CWYK.png The issue I'm facing is how to add a black background to the top of the left menu. https://i.sstatic.net/yoEcO.png I am unsure whether I should imple ...

cssbootstrap-5

Resetting jQuery after a click event is a useful technique that can help ensure

I am working on a survey using jQuery where based on user ratings, different div elements open up. If the user rates 3 stars or below, one div is displayed. However, if the user rates 4 or 5 stars, another div is shown. Everything functions as expected wh ...

htmljquery

unique navbar color transition effect specifically for the homepage

I have successfully created a function called changeColour in my code that changes the color of the navbar when scrolling past a certain point. However, I am encountering an issue where I only want this effect to be applied on the Home page. I would like a ...

javascriptcssreactjsscrollreact-router-dom

JavaScript issue with confirm/redirect feature not functioning as expected

A demonstration of JavaScript is utilized for deleting an employee in this scenario... <script type="text/javascript"> function deleteEmployee(employee) { var confirmation = confirm('Are you sure?'); if(confirmation) { ...

phpjavascripthtml

Modifying the color of Bootstrap icons

When I use PHP code to print this icon into a table, it looks like this: echo '<button Onclick="" style="border: none; background: none; color:green"><a title="Reenviar" data-toggle="tooltip"><i class="material-icons">&#xE0BE;&l ...

htmlbootstrap-4

Firefox has trouble with jQuery AJAX as anchor tags in returned HTML are not clickable

The issue at hand: In Firefox, anchor tagged text in the returned HTML is not clickable (no "hand cursor" and no action), while IE 10 seems to handle it without any problems. The scenario: I am utilizing jQuery AJAX to request a PHP page that fetches HTML ...

jqueryhtmlajaxhyperlinkanchor

Having issues initializing jQuery knob on a jQuery mobile webpage

I'm trying to implement the jquery knob plugin to showcase a circular rating system, but I'm encountering difficulties in getting it to display properly. Below is the code snippet I'm using - can someone please point out what's causing ...

javascriptjqueryhtmlajaxjquery-mobile

Javascript code has been implemented to save changes and address resizing problems

Code Snippet: <script> function showMe(){ document.querySelector('#change').style.display = ''; document.querySelector('#keep').style.display = 'none' document.querySelector('#change1').style.d ...

javascripthtmlcss

Rotate the horizontal scroll of an inner div within an outer div using CSS

I am looking to create an outer div with horizontal scroll and inner div with vertical scroll where the inner div moves along with the outer div. <body> <div id="wrapper"> <div id="outer">content outer <div id="inner"&g ...

css

Extracting values from an *ngFor loop in Angular 8 - Here's how to do

Currently, I am utilizing *ngFor to display some data. I have a requirement to extract a specific value from *ngFor and display it in, for instance, my heading. However, when I attempted to use {{ project }}, it consistently returned undefined. Despite hav ...

htmlangulartypescript

Choosing specific text below an element

I'm having trouble selecting specific text from the table below <section id="bullet_features"> <h2>Additional Features</h2> <p> Knife Steel: 8Cr13MoV, satin finish <br> Handle: Molded co-polymer <br> Blade: 3.6 in. ...

htmlxmlxpath

How can I modify the color of a hover button?

How can I change the color of a link on hover? The code I tried is not working properly. Below is the CSS snippet I have already added: a:hover {color: red;} ...

htmlcss

Tracker.gg's API for Valorant

After receiving help with web scraping using tracker.gg's API and puppeteer, I encountered an error message when the season changed {"errors":[{"code":"CollectorResultStatus::InvalidParameters","message":" ...

javascripthtmlnode.js

View the picture directly on this page

Currently, I am in the process of creating a gallery and I would like the images to open on top of everything in their original size when clicked by the user. My expertise lies in HTML and CSS at the moment, but I am open to learning JavaScript and jQuery ...

javascriptjqueryhtmlcss

Develop a custom chat feature in HTML with the powerful VueJs framework

Currently, I've been developing a chat plugin for HTML using VueJs. My dilemma lies in creating a versatile plugin that can seamlessly integrate into any website. My ultimate goal is to design a plugin that can be easily deployed on various websites ...

javascripthtmlvue.jsplugins

Unable to display the complete JSON data using ng-repeat in AngularJS

Utilize ng-repeat to display data retrieved from a web service. Below is my controller JS (GetAllCtrl.js): https://i.stack.imgur.com/GAelG.jpg I have received JSON data: https://i.stack.imgur.com/0xkAU.jpg My goal now is to extract only company informati ...

javascripthtmlangularjscontrollerangularjs-ng-repeat

Resetting form fields when clicking the "Next" button with the FormToWizard jQuery Plugin

I am in the process of developing a lengthy form using the jQuery plugin called formToWizard. Within one of the fieldsets located midway through the form, there are hidden fields that are displayed upon clicking a button. The strange issue I am encounterin ...

jqueryhtmlcss

Controlling CSS Styles in Angular using TypeScript

Currently, I am working on an Angular project that involves dynamically populating a calendar. In addition to this, I have a range of dates and the task at hand is to modify the background for specific days within this date range. To manage dates effective ...

cssangulartypescriptmomentjs

Instructions for integrating AJAX into a PHP script

I am looking to incorporate AJAX into my PHP file so that when I delete an item from a list, the data automatically reloads and the list is updated with the new information. I have created a list of all my data along with a delete button. Below is the PH ...

phphtmlajax