String of text that appears differently in certain browsers

There seems to be a mysterious line appearing under the text inside a specific div.

This issue is only noticeable on Firefox and IE browsers.

Take a look at these screenshots; I am using the entire div as a link:

Here is the structure of the divs and text:

In the CSS:

.whiteTextBold {
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-style: none;
    font-size: 15px;
    text-decoration: none;
}

.moreInfo {
    background:rgba(255,255,255,0.0);
    border:1px solid;
    border-color:#fff;
    width:170px;
    height:35px;
    text-decoration: none;
}

In the file:

<a target="_blank" href="#">
<div class="moreInfo">
<table width="100%" height="100%">
<tr><td align="center"><font class="whiteTextBold">More info</font></td></tr>
</table>
</div></a>

Any suggestions on how to prevent this line from appearing?

htmlcss

Answer №1

Implementation:

a {
    text-decoration: none;
}

You can also create a new class for the anchor tags if you already have a predefined style.

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

The inner DIV cannot be accessed using document.getElementById due to its limited scope

Here is the HTML code below: <Div id="one"> <Div id="two"> </Div> </Div> When trying to access div "two" using "document.getElementById("two")", it returns null. ...

htmlaccessibility

Buttons to maximize, minimize, and close individual sections on a webpage

I am fairly new to front end development and I must say, I am absolutely enjoying every bit of it. Here is a little challenge that came my way. It may seem simple to some but it got me thinking. I have three sections on the right side of my website. I wa ...

javascriptjqueryhtml

Why is the value of the select element in AngularJS an object?

Here is a JSON object: { "9000A": { "LOCname":"A Place", "LOCid":"9000A" }, "2700C": { "LOCname":"C Place", "LOCid":"2700C" }, "7600B": { "LOCname":"B Place", "LOCid":"7600B" } } To ...

javascripthtmljsonangularjs

Perpetual spinning of image grid

Are there any jQuery libraries available for continuous image rotation within an array? I have a collection of 30 partner logos that I would like to rotate continuously using either a jQuery library or plain CSS code. These images and information will be l ...

jqueryhtmlcssbootstrap-4

Create a variety of unique images without using the same one more than once

I'm currently developing my first Javascript game, but I've hit a roadblock.. I am trying to create a game that displays random images without repeating them. Each image should be accompanied by a random number between 4 and 10. The code I have w ...

javascripthtml

AdBlock causing image display issue in Firefox with bootstrap and Wordpress

My Wordpress + Bootstrap code is not displaying images in Firefox, despite working fine in other browsers. I tried disabling ad-block as suggested on SO, but it didn't help. I'm stuck. Here's the HTML snippet: <div class="navbar-collap ...

htmlcsswordpressfirefoxtwitter-bootstrap-3

When a table has overflow set to auto, any content that exceeds its dimensions will

The issue at hand is explained in the fiddle provided. The problem arises when there is a scrollable table with a context menu inside it, and with the overflow-x: auto property set, the visibility of this "context menu" is hindered. table { overflo ...

htmlcss

Ways to eliminate whitespace in React and Bootstrap 5

I have a pet project that requires mobile responsiveness, and I'm encountering an issue with white space in the Carousel component. I am unsure of how to remove it - can anyone provide assistance? Here is how the page looks on PC: https://i.sstatic.n ...

cssreactjsbootstrap-5react-bootstrap

Encountering a "Cannot modify" error in wp-admin while using inspect element

It seems like there is a slight error appearing in the Inspect Element Source Tab of Google Chrome (also checked in Firefox). I have searched extensively for a solution but haven't found anything helpful. My Wordpress theme displays wp-admin in inspec ...

phpcsswordpress

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Here is the HTML code I am working with: <div class="app-bar"> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> </div>' ...

androidcssios7

What is the ideal framerate for smooth animation?

I'm looking to add a snow animation using JavaScript. I currently have it running at 200ms which is decent but not smooth enough. Would changing the interval to 20ms make it more fluid, or would it be inefficient and strain the CPU? window.setInterva ...

javascriptjqueryhtmlcss

What is the best way to conceal a panel using animation.css slide effects in GWT?

After creating a panel using GWT as shown below: VerticalPanel myPanel = new VerticalPanel(); I attempted to add animation CSS to myPanel in order to achieve sliding effects when hiding the panel like this: myPanel.addStyleName("animated slideInRight"); ...

javahtmlcssanimationgwt

"Need guidance with jQuery and CSS layout alignment on the

So here's the scenario I'm dealing with: <div id="tabs"> <div id="tab_one"> Content for tab one </div> <div id="tab_two"> Content for tab two </div> <div id="tab_three"> ...

jquerycsstabsposition

Custom Line-height Mixin for Styling Efficiency

I'm currently utilizing a certain mixin to create font sizes in rem with fallback pixel values, while also determining a line-height that is 1.5 times the font size. .font(@size: 16px, @line: @size) { @remfont: (@size / 10); @remline: (@size / 10) * ...

cssless

Rapid processing of JavaScript upon page load

I recently implemented a dark mode feature on my WordPress site. Here are the four modes I included: 1- Automatically based on user's system settings 2- Light mode 3- Semi-lit mode 4- Dark mode The implementation is in place and functioning perf ...

javascriptjquerycss

What is the process for setting dynamic variables as CSS content within Vue.js?

Forgive my lack of expertise, but I am interested in learning more about utilizing dynamic variables and CSS within Vue. I have a concept in mind where pressing a button would result in the letters of the button label spacing out further. Is it feasible t ...

cssvue.js

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

javascriptjqueryhtmlcssscroll

Are cross-browser gradients causing performance problems for browsers?

Although I attempted to tag this question as [subjective] (without success), I understand that it may be unanswerable, involve common knowledge that I can't find, or simply be a matter of opinion. Over the past few months, I have been creating commer ...

csssvgless

Struggling to locate elements with Python selenium

Just starting out with Selenium and attempting to extract data from a particular website: . This site stores information on hotels across the United States. My main objective is to compile this data into a CSV file where each entry would have a 'State ...

pythonhtmlseleniumweb-scraping

Efficiently update a multi-step form using Ajax and jQuery by adding new content without needing to reload the

Is it possible to create a multistep form on a single page without reloading the div with content from a PHP file, but instead appending it below? Here is my current progress: $(document).on('submit', '#reg-form', function(){ var ln = ...

javascriptjqueryhtmlajaxsubmit