Help me fix my weather sticker please? (in WordPress)

HTML & CSS
1

I’m using a sticker from WeatherUnderground.com and it breaks when I put it into a WordPress page. You can see it here:
http://ridetheup.com/ontonagon/
I don’t know how to figure out what’s overriding the code within the sticker. Any pointers? Thanks :slight_smile:

2

What do you mean by “breaks”? It looks OK to me in Firefox. Is this happening in a particular browser? It might be worth attaching a screenshot.

3

Hm, I am in Firefox; here’s how it looks to me:

4

If you comment out the lines in red below, you almost get there. There’s still a faint line between top and bottom cell, but it’s a lot closer. Perhaps make these changes, then we can look at what’s causing the remaining faint line:

#content tr th,
#content thead th {
	color: #888;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	[COLOR="Red"]/*padding: 9px 24px;*/[/COLOR]
}
#content tr td {
	[COLOR="Red"]/*border-top: 1px solid #e7e7e7;*/
	/*padding: 6px 24px;*/[/COLOR]
}
5

That’s very close, thank you so much! There’s just some space left above the bottom border. I’m using Firebug, which I am not yet very experienced with and can’t find it.

6

The main thing causing that space is this line (line 619):

.entry-content input {
	margin: 0 0 [COLOR="Red"]24px[/COLOR] 0;
}

If you change 24px to 0, the spaces will close up. If you want, you could reduce the space at the top of the form by modifying the html in red below:

<form style="[COLOR="Red"]margin-top: 10px;[/COLOR] margin-bottom: 0px; text-align: center;" target="_blank" method="get" action="http://www.wunderground.com/cgi-bin/findweather/getForecast">
<input type="hidden" value="htmlSticker" name="bannertypeclick">
<div>
<input type="text" style="width: 85px;" onfocus="this.value=''" value="Find Weather" name="query"></div>
<div style="padding-top: 5px;">
<input type="submit" style="width: 50px; background-color: rgb(0, 0, 136); color: rgb(255, 255, 255); font-size: 12px; font-weight: bold; border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(0, 0, 0) rgb(0, 0, 0) rgb(204, 204, 204);" value="GO" name="GO"></div>
</form>

Hope that helps!

PS: My Firebug view is attached

7

Great, it worked - thank you so very much for your help. I am very appreciative! :slight_smile: