Today I was faced with an unusual task: I needed to find a way to nullify an element's style attribute, i.e.:

<br style="clear: both">

The style's clear:both was causing some unnecessary whitespace. I couldn't change the style attribute directly because it was on a Master page that I didn't have the permission to modify.

I am not sure if there is a way to do this using CSS alone (element style takes precedence over any css class).

My Solution

Step 1: Hide the offending <br> element

// br[style] matches any <br> that has an attribute style
br[style]
{
     display: none;
}


Step 2: Add a regular <br> element after document has loaded

<script language="javascript">
$(document).ready (function() {
    $('br[style]').after('<br>');
});
</script>

Basically I'm hiding the problematic <br> element and replacing it with another <br> without the "clear: both baggage".

So jQuery saves the day! However, I'd be very interested if anyone knew of a better solution to this problem... perhaps there is a CSS trick I don't know about?