I'm running Atahualpa 3.5.3 on Wordpress 3.0.1.

My issue is the left sidebar in IE7. The left sidebar is made up of three widgets...one WP Search widget and two Text widgets. The text widgets are made up of html tables, which helps align the three icons next to each other. I do not know CSS and am familiar with html, so that's why I used that method. But IE doesn't seem to like it. The site renders correctly in Chrome and Firefox.

FYI that the sidebar is 200px wide on the left.

Here is the HTML for the 'Subscribe' Text Widget:

<table width="175" align="left">
<tr>
<td align="left">
<a href="http://www.backyard-hockey.com/feed/"><img src="http://www.backyard-hockey.com/wp-content/themes/atahualpa353/images/rss-basic-webtreatsetc50.png" alt="Add our RSS Feed"></a>
</td>
<td align="left">
<a href="http://www.backyard-hockey.com/comments/feed/"><img src="http://www.backyard-hockey.com/wp-content/themes/atahualpa353/images/comments-basic-webtreatsetc50.png" alt="Add our Comments Feed"></a>
</td>
<td align="left">
<a href="http://www.backyard-hockey.com/subscribe-to-backyard-hockey-com/"><img src="http://www.backyard-hockey.com/wp-content/themes/atahualpa353/images/mail-webtreatsetc50.png" alt="Subscribe to our email list"></a>
</td>
</tr>
</table>

And here is the HTML for the 'Interact' Text Widget.

<table width="175" align="left">
<tbody>
<tr>
<td align="left">
<a href="http://www.facebook.com/pages/Backyard-Hockeycom/112885755403455" target="_blank"><img src="http://www.backyard-hockey.com/wp-content/themes/atahualpa353/images/facebook-logo-square-webtreatsetc50.png" alt="Like Backyard-Hockey on Facebook"></a>
</td>
<td align="left">
<a href="http://www.twitter.com/BackyardHockey" target="_blank"><img src="http://www.backyard-hockey.com/wp-content/themes/atahualpa353/images/twitter-logo-square-webtreatsetc50.png" alt="Follow BackyardHockey on Twitter"></a>
</td>
<td align="left">
<a href="http://www.backyard-hockey.com/contact-us/" target="_blank"><img src="http://www.backyard-hockey.com/wp-content/themes/atahualpa353/images/mail-square-webtreatsetc50.png" alt="Send us an e-mail"></a>
</td>
</tr>
</tbody>
</table>

What is the best way to solve this?

Thanks,

Joe

Here is what I'm experiencing. I've come up with a band-aid fix (putting all six icons in one Text Widget), and while that solves this issue, the titles don't match as far as size.

It looks fine in IE8 and Safari.
do you mean the words 'Subscribe' and 'Interact' and that one is bold and the other isn't?

You made 'Subscribe' the widget title so it is an <h3> with a class from teh <div> of 'widget-title, so it picks up the css for '.widget-title h3' while you specified a '<font face="Arial Narrow" size="5">' (btw - you never end the <font> with a </font> ) and then just the word 'Interact' so you have in effect definde them as two different things.

Sorry for confusing you Juggledad. I should edit the first part of my initial post and remove my url. What you see right now in my page's source code is my workaround - it's the only way I could get the two Text Widgets to play nice in IE7 (essentially I put them into one Text Widget and had to fudge the 'Interact' title manually within the html). So if you're looking at my site this second, you're going to just see one Text Widget with all six icons, separated by a manually-entered-and-sized 'Interact' title. That's not the solution I want to use.

Ideally, I'd like to use two separate Text Widgets, one for Subscribe and one for Interact, that way both of the headers have the <h3>. But when I use both widgets, one on top of the other, I experience the screen capture above in IE7. Maybe it's just an IE7 issue? I don't have IE8, and only use 7 on my work machine because I have to. That said, 45% of my visitors use IE, and I'm sure not all of them use the latest version.

Thanks for the help so far.

I've fiddled with my page a bit, so the above situation is sort of resolved. But now take a look at my page, both in Chrome/FF and then in IE. You'll see the issue. It seems to come up when I have one text widget on top of another.

Is there a workaround for this at all?

try this, add this to CSS Inserts

#text-5 {
float:left;
margin:10px 10px 5px 0;
}