IE Not Displaying Image Properly

[jsarber]

The site is http://orangecoffeecup.com. Look at the header. In IE the coffee cup image drops half way down. It looks fine in other browsers. I'm stumped.

 

Here's the header:

<div id="header">

<div id="twitter-badge"><a href="http://twitter.com/<?php if ($apa_Twitter == ''){echo '_fearlessflyer';}else{echo $apa_Twitter;} ?>">follow</a></div><!--twitter-badge-->

<a id="logo" href="<?php bloginfo('url');?>"><img src="http://orangecoffeecup.com/wp-content/uploads/2011/03/coffee-cup-large.png" width="111px" height="70px" alt="Orange Coffee Cup" title="Orange Coffee Cup" /> Podcasting Network</a>
<div id="navigation">
<div id="page-nav">
<ul>
<li id="welcome" class="current_page_item2"><a href="<?php bloginfo('url');?>" title="Home">Welcome</a></li>
<?php wp_list_pages('title_li=&depth=1&sort_column=menu_order'); ?>
</ul>
<span id="login"><a href="<?php echo get_option('home'); ?>/wp-admin/">Login to Site</a></span>
</div>

 

Here's the CSS:

#header {height:156px; clear:both; padding:70px 49px 0 49px; width:940px; margin:0 auto; text-align:left; background:url(images/header-bg.gif) no-repeat bottom left; position:relative;}
#twitter-badge {position:absolute; left:740px; top:-5px; background:url(images/twitter-badge-maroon.png); width:218px; height:139px;}
#twitter-badge a {display:block; width:218px; height:139px; text-indent:-9999px;}
a#logo {clear:both; font-size:98px; overflow:hidden; text-decoration:none; text-transform:uppercase; color:#333333;letter-spacing:-2px; display:inline; margin:0px; padding:0;}

 

Any help would be greatly appreciated.

[Andrea]

Could it be that you're missing the closing '>' here:

 

<div id="twitter-badge"><a href="http://twitter.com/><?php

[jsarber]

I appreciate the response but it's in there on the other side of the php/Twitter stuff.

[Andrea]

If the '<a' closes behind the php stuff, shouldn't there be two '>'s then? One to close the '<a' and the other to close the <$php?

[jsarber]

I got excited for a second because I thought you were on to something. The closing brackets are there though.

?>">

[jsarber]

I played with this for quite awhile and I found a way to fix it. I added this to the IE stylesheet:

 

a#logo img {margin-bottom:25px;}

 

Thanks for your help.

[falkencreative]

You might also get a consistent cross browser solution by positioning the image absolutely... but I'm glad you got it fixed.

[Andrea]

I got excited for a second because I thought you were on to something. The closing brackets are there though.

?>">

 

NOW I see them too - About time those darn reading glasses get here.

 

Sorry for the blind chase.