Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Weird Header image behavior (http://forum.bytesforall.com/showthread.php?t=12533)

Cheers Jan 30, 2011 01:50 PM

[SOLVED] Weird Header image behavior
 
I have a problem with the header area of a new site I am building. Can't figure out what is wrong. For some reason, when I scale the horizontal width of the browser window (firefox 3.6.13) the header juts out wider than the body of the site? Website is http://wine-insights.com Any help appreciated.:confused:

lmilesw Jan 30, 2011 05:29 PM

You can either set a static width to the site or you will have to play around with the CSS for the search, rss, and comments icons and fields. You have several absolutely positioned items which can be tricky work with. This won't fix your problem but if you add the following to ATO>Add HTML/CSS Inserts>CSS Inserts the header won't jut out when resizing but the icons are now not positioned correctly but maybe it will point you in the right direction.
HTML Code:

td.feed-icons {
position: absolute;
}


Cheers Jan 30, 2011 06:22 PM

That got rid of the jutting out of the header, but now the feed icons and labels have all disappeared? But we're getting closer. This coding is like magic.

lmilesw Jan 30, 2011 06:36 PM

As I said it wouldn't fix your problem but point you in a direction. Sometimes this type of stuff takes playing around for awhile.

Cheers Jan 31, 2011 08:23 AM

Unfortunately, my knowledge of php coding is scant at best. Any suggestions as to what I would tweak?:o

lmilesw Jan 31, 2011 08:43 AM

You wouldn't have to tweak any PHP. This could all be done with CSS. I use Firebug with Firefox which let's you virtually test CSS. That is what I used to get that code I posted. I just used Firebug to get the following which might work for you. Just put it in ATO>Add HTML/CSS Inserts>CSS Inserts
HTML Code:

td.feed-icons {
white-space: nowrap;
position: relative;
top: 0;
left: 0;
}


Cheers Jan 31, 2011 08:46 AM

Achh! I'm a genius!! A code monkey! :p
This is what I added and it worked (shock of shocks!)

td.feed-icons {
position: absolute;
top 65px;
left: 0px;
}

Cheers Jan 31, 2011 08:52 AM

I replied before I realized that you had provided the answer. So, I tried your code and it brought the icons back but unfortunately the header again jutted out. So, I went back to the code that I stumbled upon. It works perfectly and the header doesn't jut out when you adjust the horizontal size of the browser window.


All times are GMT -6. The time now is 07:21 AM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.