Amusing antics observed when hovering over a div in Firefox

Issue resolved, many thanks to all

Here is the dilemma

I am dealing with something like this

<a href='http://google.com' class="buy_now" > 
    <div class='yada yada' > Go </div> 
</a>

buy_now changes background-color on :hover

It functions correctly in chrome but in firefox, upon hovering, it flashes / blinks repeatedly

Is there an issue with my code or is this a bug in firefox?

Here is the live demonstration:

Edit: alright, appears to be a temporary glitch here, works fine after restarting firefox. :/ (3.5.9) at this moment.

Edit 2: the demo now adheres to valid HTML standards according to validator.w3.org

cssfirefoxhtmlhover

Answer №1

Seems good from my end. (FF 4.1.0)

May I ask which Firefox version you are currently on?

Answer №2

Is it possible that a certain Firefox extension may be causing interference with your code?

After testing the provided link in various browsers, I am unable to replicate the error you are experiencing.

Answer №3

Everything is functioning properly on my end using Firefox 3.5.9.

Keep in mind that this code is not compliant with HTML/XHTML standards, so there may be unpredictable results.

To ensure consistency, it's important to match the height and width of the <div> with the surrounding <a>.

Answer №4

One of my go-to practices when troubleshooting issues like these is to ensure that the HTML code is valid, but unfortunately in this case it isn't.

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

Ways to enlarge the font size of text on a mobile website?

this is the site i have added viewport, but with image, the text saw on phone is small, how to make the text bigger when see on the phone, what should I add to the code? this is the site i have added viewport, but with image, the text saw on phone is sm ...

htmlcss

The UI-SELECT feature in angular-js does not seem to be displaying

I've added the necessary ui-select js and css files to my page : <link href="assets/plugins/ui-select/select.min.css" rel="stylesheet" type="text/css" <script src="assets/plugins/ui-select/select.min.js" tyle="text/javascript" </script> ...

javascriptangularjshtmlui-select

Applying CSS Styles to a Single Class Only

I have been using Zurb's Foundation to customize the navbar with my own styles, which has been successful so far. However, I encountered an issue with the responsive behavior of the navbar when the viewing container size changes. The navbar adds a sec ...

csszurb-foundation

Showing information to several classes using JavaScript

I am currently developing a "Gamebook Engine" that enables users to set a custom username. The user name is extracted from an input element with the id="setUserNameInput" and stored using the function setUserName(). It is then displayed or loaded into an e ...

javascripthtmlcssclass

Obtaining the date input value from the ng2-date-picker component in Angular2

I am struggling to extract the value from a date picker input field (ng2-date-picker). Despite attempting various methods to retrieve the value, I have not been successful. For reference, here is the link to the npm package I am utilizing. This represent ...

htmlangulartypescript

Encountering the error code [$injector:unpr] regarding an unknown provider: $uibModalInstanceProvider

In my web application, I have a controller called AddPrice. This controller is invoked from a Price listing screen as a popup using the $uibModal.open method, where the controller is passed in as an argument. However, the controller is not defined within t ...

javascripthtmlangularjsangular-ui-bootstrap

several tables all set to the identical TD width

Using a css sheet, I have formatted two tables. The first table is used for filter/sort selection, while the second table is a scrollable data table. div#scrollTableContainer { width: auto; margin: 20px; /* just for presentation purposes * ...

htmlcsshtml-table

JavaScript - Reveal a div when a grid item is clicked

I have created a grid with a 5x7 layout using divs. I am trying to achieve a feature similar to the Netflix interface where, upon clicking on a div, a larger div will appear beneath it. This larger div should expand to 100% width of the parent container, p ...

javascripthtmlcsslaravel

When using Selenium with Firefox, the first test within a test class is the only one that runs successfully

My goal is to utilize the same Chrome/Firefox instance across different methods by employing the setUpClass() and tearDownClass() methods along with the @classmethod decorator. While this setup functions well with Chrome, it encounters issues with Firefox. ...

pythonseleniumfirefoxselenium-webdriver

I'm struggling to understand why the jQuery find() method isn't functioning as expected

UPDATE: In a twist of events not caused by syntax errors, but rather by a loading issue with the html template, it turns out that the checkbox update was happening prematurely. So if you're searching for an element that seems to be missing, it may sim ...

javascriptjqueryhtml

What are the steps for editing and preserving a logo with an 8-bit indexed color palette?

After purchasing a RE/MAX franchise, I now need to make edits to the official logo found on remax.com using Adobe Photoshop. However, I have encountered a problem when trying to edit their logo in Photoshop. When I open their PNG logo, the layer appears d ...

cssimagepngphotoshop8-bit

Activate a switch in a single table after its information has been transferred to a different table

I have a dilemma involving two tables - one displaying a list of items and the other serving as an empty favorites table. Users can select items from the first table and click 'Add' to move them to the favorites table. Once added, the 'Add& ...

javascripthtmldomecmascript-6html-table

Determining the position coordinates of an element in relation to the viewport using JavaScript, regardless of its relative positioning

I am currently developing a vueJs web application and I'm in need of determining the position of an element within my web app relative to the viewport itself, rather than its parent elements. I'm curious if there exists a function or property tha ...

javascriptcssvue.jsvuejs2

Should the <head> tag in an HTML document contain a substantial amount of content?

Is there a difference in performance if we have a large amount of content in our HTML document? I believe it shouldn't make much of a difference, right? My plan is to load all text content on a single page and then use JavaScript to display the relev ...

html

Identifying and handling the removal of a complete div element by the user

Is it possible to remove the entire div element if a user tries to inspect the web browser using the script provided below? <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/, ...

javascripthtml

Tips for rearranging sibling divs while maintaining the order of their child elements

Is there a way to shuffle the order of div classes shuffledv, while maintaining the same order of id's each time the page is refreshed? <div class="shuffledv"> <div id="2"></div> <div id="3"></div> <div id="1">< ...

javascriptjqueryhtmlcss

The AppJS warning: A potentially dangerous JavaScript attempt to access a frame with a URL

I am currently working on a desktop application where I am trying to filter specific divs inside an iframe using AppJS. However, I am facing an issue with hiding some of the div elements. Here is the code snippet: <!DOCTYPE html> <html> <s ...

jqueryhtmlappjs

Could not locate the CSS file within the HTML document (404)

I've searched high and low on YouTube but can't seem to find a solution to this problem. Every time I run the code, it gives me an error message saying GET net::ERR_ABORTED 404 (NOT FOUND) <html> <head> <title>itays websit ...

htmlcss

Route parameters do not function correctly with computed properties

I'm facing an issue with my getter function that stores all products. When I try to retrieve a single product dynamically based on this.$route.params.id, it doesn't return any value. The code works fine when I navigate to a specific product, but ...

javascripthtmlvue.jsvuejs2vue-router

increasing the size of a particular text box above the rest

Just starting out with bootstrap and trying to figure out how to make one text box larger than the others. See my code below: <div class="row"> <div class="col-md-2"> <mat-form-field > <input matInput pla ...

cssbootstrap-4