CODEWITHSUNDEEP
javascriptcss
MichaelMitchell
MichaelMitchell

Reputation: 1167

Strange Border bug in FireFox

I have been messing around with JS and CSS. I have an anchor with general button styling. In styling I have a border-bottom: 5px dotted blue;. Then the JS is:

onmouseover = "this.style.borderBottom = '5px solid red';"

He is the JSFiddle Example: http://jsfiddle.net/MichaelMitchell/f4Ud4/ Hover over the Button

The border seems to overlap, could someone please explain? This only is visible in FireFox because of the way Chrome handles dotted borders.

Upvotes: 4

Views: 165

Answers (1)

bukart
bukart

Reputation: 4906

I can't explain the buggy behaviour. Oviously firefox doesn't clear the drawing area when another border is drawn.

But here's a (dirty) solution

<a class = 'testButton' href = '#'
    onmouseover =
    "var button = this; button.style.borderBottom = '0px'; setTimeout( function() { button.style.borderBottom = '5px solid red'; }, 1 )">
    Button!
</a>

Upvotes: 2

Related Questions