Wordpress Themes - WP Forum at BFA - Header widgets out of place in IE

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - Header widgets out of place in IE (http://forum.bytesforall.com/showthread.php?t=14717)

lakewooditsupport

Jun 20, 2011 11:40 AM

Header widgets out of place in IE

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:

Code:

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?

lakewooditsupport

Jun 20, 2011 11:45 AM

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/

lmilesw

Jun 20, 2011 08:57 PM

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.

HTML Code:

<?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.

lakewooditsupport

Jun 21, 2011 05:57 AM

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.

lakewooditsupport

Jun 21, 2011 06:01 AM

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.

juggledad

Jun 21, 2011 06:50 AM

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

lakewooditsupport

Jun 21, 2011 10:48 AM

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?

juggledad

Jun 21, 2011 12:37 PM

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

lmilesw

Jun 21, 2011 12:55 PM

IE9 looks OK now.

All times are GMT -6. The time now is 04:55 PM.