Question

I’ve got an embedded widget from The Weather Channel and everything is working fine except that they’ve got a <tr> with a 1px height image that is expanding to a height equal to the other rows.

It’s shifting the rest of the content down. Because it’s just an embed, there is only so much of the styling I can control. But I figured it must be inheriting something from my stylesheet since it had inherited some line-height that I had to correct.

If you visit http://www.scwd.com and scroll to the bottom you’ll see the weather widget. The row with the grey td below @weather.com is the issue. It should only be 1px in height. I’ve used multiple debuggers to see if I could find the inherit and I cannot. Any help would be great.

— UPDATE —

Not the most elegant solution considering variable within the widget and out of my control may change in the future. But as David suggested, I solved it with the following.

<script type="text/javascript">
var x = $("img[src$='blank.gif']");
$(x).closest('tr').css('display', 'none');
</script>

Answer 1

Best I can find is:

Inherited from div#wx_module_6107.wow_container
.wow_container {
    line-height: 14px;
}

Are you hosting this or pulling the HTML from a foreign source? I suspect you can’t control the HTML that’s being rendered or the CSS that it’s using?

I’m no CSS expert, so thus far nothing I’ve tried in FireBug have made a difference without affecting the rest of the table elements in the widget.

Unless someone can give a CSS solution, maybe some JavaScript can get the job done? You should be able to, on document ready, find that img element (maybe by its src?) and from there (using something like .closest() in jQuery) find its parent td and parent tr and with those element references explicitly set their styles.