I finally managed to get to get a java link to overlay the header image area, by creating two header widgets. It works and appears perfectly in all browsers bar internet explorer 9. It is out of place to the right by 90px. I have tried changing settings with the widgets but cant seem to get anywhere?

Here is the code for the widgets

PHP Code:

<?php bfa_widget_area('name=contact &cells=4&align3&align<div id="contact" class="header-widget %2$s">&after_widget=</div>'); ?>
<?php bfa_widget_area('name=Header &cells=4&align3&align<div id="livechat" class="header-widget %2$s">&after_widget=</div>'); ?>

and the CSS inserts are:

td#header__4 div.widget {
	z-index: 4;
	position: absolute;
	float: right;
	width: auto;
	margin-top: 20px;
	margin-left: 90px;
	}
td#contact__4 div.widget {
	z-index: 4;
	position: absolute;
	float: right;
	width: auto;
	margin-top: 20px;
	margin-left: -80px;
        margin-right: 50px;
	}

I have a feeling its something to do with the width of the widgets?

Sorry I forgot to include a link to the site.

The widget is over the header on the right (livechat)+(contact us) two separate widgets.

http://lakewooditsupport.co.uk/

There are several things going on here. The first is the code for the widget areas is for two 4-celled widget areas one over the other when all you need is one 2-celled widget area. The code for that would be.

<?php bfa_widget_area('name=Contact and Chat&cells=2&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>

Another issue is I would avoid absolute positioning as that can be problematic.

I tried the code you suggested and it didn't work at all, No widget was created?

I cant think of what other positioning to use as all other methods leave the widgets above the header image.

Okay I just has a little mess with it again and fixed it, it was as I thought just the header width needed adding to the widget code.
It now looks like this:

PHP Code:

<?php bfa_widget_area('name=contact &cells=4&align3&align=width950<div id="contact" class="header-widget %2$s">&after_widget=</div>'); ?><php>

I would still like it to be in just two widgets, as I have two codes giving me 8 header widgets.

Larry's code worked for me, remember you have to
1) put the code in and save it
2) go view the page
3) then go to the widget area.

To get rid of old 'New Widget' areas
1) remove and widgets from the widget area
2) remove teh code from where you placed it
3) go view the page
4) go to ato->Add new WIDGET AREAS->Delete custom Widget Areas and delete the widget areas you want gone.

NOTE: in your code you have cells=4 - this will create 4 widget areas
ALSO you have align=width950 which is invalid

I have changed the code again and it still didn't work, the code I did originally (messy I know) seems to work on all browsers. If you guys could have a look and see if your getting what I am on your end?

unfortunately, I do not have ie9 since it will only run on vista or win7.

IE9 looks OK now.