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 whitespace between header image and logo area background (http://forum.bytesforall.com/showthread.php?t=13477)

inkdork Mar 24, 2011 08:01 PM

[SOLVED] Weird whitespace between header image and logo area background
 
I have a weird white space showing up between the top of my header images and the bottom of my logo area background (if I set the logo area background to no-repeat, its not currently set that way though). You can see now where there is a repeat of the logo background going on making my graphics appear to not line up. The area in question is about 3 or 4 pixels high.

I have looked and looked and can't find anything in the CSS settings that would affect this. However, it was not an issue until I removed a CSS insert that was somehow causing the search box and RSS icons to not show up. Once I removed that and the box/icons appeared, so did the weird spacing.

I am using version 5.3.5. I can't upgrade to a newer version because since I moved to A Small Orange for hosting, I just get a screen showing my background with no content with any newer ones. I am using the most recent version of WordPress.

Any idea on how to remove this gap so my graphics will go together seamlessly again? The URL is http://prettycanhurt.com/.

juggledad Mar 24, 2011 08:12 PM

it looks like the space you have for the image is bigger than the image, so you are getting a repeat of the image. make the space smaller

inkdork Mar 24, 2011 09:01 PM

I tried that first actually. My background image is 77 pixels high. My CSS specifies it is 77 pixels high. Just in case though, I set it to 70 pixels and get the same result. Still has extra space showing a repeat of the image. Doesn't seem to make a difference.

inkdork Mar 24, 2011 10:20 PM

I solved it. I exported my settings, then restored everything to defaults to get the CSS inserts that were present when I first installed it back again, since it was when I removed the ones pertaining to the search box and RSS icons that the problem started.

I had suspicions the issue was with the search box itself, but wasn't sure. This is the insert that was removed and caused the issue.

Code:

td#header {
padding-bottom: 15px;
}
div.searchbox {
position: absolute;
top: 130px;
right: 25px;
}
div.searchbox input.text {
border: none;
padding: 2px 15px 2px 3px;
background: #fff url('<?php bloginfo('template_directory'); ?>/images/search2.gif') no-repeat right center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 15px;
bolder: solid 1px #e7e7e7;
font-size: 11px;
}

I added it back in, one piece at a time until the gap disappeared and the search box vanished. I saw that the search box was invisible because it was being positioned outside of the element. I tweaked the CSS to reposition the search box on the opposite side and everything is perfect.

Code:

td#header {
padding-bottom: 15px;
}

div.searchbox {
position: absolute;
top: 45px;
left: 25px;
}

Thanks for the help. :)


All times are GMT -6. The time now is 01:15 AM.

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