[SOLVED] How to display an background image and two icons on top of it in a customhea
 

I created a custom widget area in my header area.

<?php bfa_widget_area('name=header_widget_areatop&cells= 2&width_1=900&width_2=100&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>

cell 1 has a text widget with
-----------------------------------------------
<a href="http://174.120.136.130/~lilia10/shop" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/tree1info2.jpg"alt="Lilia Day Spa Home Page" border="0" /></a>
-----------------------------------------------

in cell 2 have another text widget with
------------------------------------------------
<a href="http://174.120.136.130/~lilia10/shop" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/tree1info2rightside.jpg"alt="Lilia Day Spa Home Page" border="0" /></a>

<a href="http://www.facebook.com/pages/Anderson-SC/Lilia-Day-Spa/182249049008?v=wall&ref=ts" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Facebook48.png" vspace="10" alt="Lilia Day Spa Facebook Page" border="0"/></a>

<a href="http://twitter.com/liliadayspa" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Twitter48.png" alt="Lilia Day Spa on twitter" border="0" /></a>
----------------------------------------------------------
It looks great in Firefox but in IE the twitter and facebook icon are listed below. If I take out the background image file then you will see the default icon of the website. The facebook and Twitter icons are suppose to be in their proper area.

http://174.120.136.130/~lilia10/shop/
Wordpress Version 2.9.2
ATA Atahualpa 3.4.6

Thanks
Dyuane

currently widget area two has the following. with this in the text widget it fits perfect in firefox but not in ie.

<a href="http://www.facebook.com/pages/Anderson-SC/Lilia-Day-Spa/182249049008?v=wall&ref=ts" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Facebook48.png" vspace="10" alt="Lilia Day Spa Facebook Page" border="0"/></a>

<a href="http://twitter.com/liliadayspa" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Twitter48.png" alt="Lilia Day Spa on twitter" border="0" /></a>

If I just post the

<a href="http://174.120.136.130/~lilia10/shop" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/tree1info2rightside.jpg"alt="Lilia Day Spa Home Page" border="0" /></a>

the header area looks great but then I don't have my twitter and facebook icon.

in both safari and IE8 is see the two icons - the face book on top of the twitter - nicely arranged at the right end of your image. Is this not what you want?

in ie7. it was show the regular background and not the background image from
http://174.120.136.130/~lilia10/shop...2rightside.jpg

I tried putting in div style and it would show the tree1info2righside but then the facebook icon was not clickable.

any help is appreciated.

I just figured it out I had to put this in to get the background to work and the other two icons to be clickable.

<div style="background-image: url(http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/tree1info2rightside.jpg);" </div>


<a href="http://www.facebook.com/pages/Anderson-SC/Lilia-Day-Spa/182249049008?v=wall&ref=ts" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Facebook48.png" vspace="10" alt="Lilia Day Spa Facebook Page" border="0"/></a>

<a href="http://twitter.com/liliadayspa" target="_blank"><img src="http://174.120.136.130/~lilia10/shop/wp-content/themes/atahualpa/images/Twitter48.png" alt="Lilia Day Spa on twitter" border="0" /></a>





thanks,