Column overflowing

assume it was ok when you got it and something was done to make this happen. when ( what was done ) did the right-hand column move? was there a change in a page template? the style.css? etc.

It originally had this problem, and then a friend of mine did some changes which fixed it. However, she had access to all the files and I’ve no idea what changes she made.

After moving to a new host, this problem reappeared. The confusing part is the theme was backed up from my old host before I moved it.

two suggestions at this time. 1) if possible, invite your friend over to your house for dinner/wine but i am sure you thought of that. 2) if you had a good layout and lost it simply transferring to a new host your host might look at it. and pay close attention to the fix.

Well, that friend of mine was my previous host as well and I moved because we had some disagreements lol. So asking her to help out again… Is pretty much out of the question…

I’m using Surpass Hosting, would they actually entertain me? I’m not even sure where that friend of mine made the changes…

@kai911

Replace this;

.sub-container .category ul {
  padding:0;
  height:20em;
}

in your style.css file (line 618),

with this;

.sub-container .category ul {
  padding:0;
  min-height:20em;
}

The template author set a specific height for that list (ul), which is what is preventing the background image from extending below your list of categories.

Tested in: Firefox and IE.

The file that she edited was the Stylesheet (style.css). Go to Appearance -> Editor in the administrator.

Scroll down to the lines:

.sub-container .category ul {
    padding:0;
    height:20em;
}

Change the height from 20em to something that suits your site. 24em seems to work quite well.

Cheers!

@dbmartin: Hi! It’s you again! Thanks for helping me out once more!

@dave: Thanks for your suggestion as well! I tried it out and it works well except that it’s static as well and I don’t want it to be static. Thanks anyway ??

Now I face another problem… When I make too many categories, the whole background image moves down instead of just extending…

lol, no prob. ??

This is what you currently have (style.css line 594):

.sub-container .category {
background:transparent url(images/categories.jpg) no-repeat scroll center bottom;
border-top:1px solid #333333;
padding-top:10px;
position:relative;
width:342px;
}

Change it to:

.sub-container .category {
background:transparent url(images/categories.jpg) repeat-y scroll center top;
border-top:1px solid #333333;
padding-top:10px;
position:relative;
width:342px;
}

Initially the theme author set the background image to be centered and aligned at the bottom and not repeating, the script above aligns it to the top and only repeats it on the y axis (vertical).

Just a heads up, I checked the settings for the other columns in your footer and they’re all set similarly to your category column, so you may want to think about updating those as well.

Hi Martin!

Thanks for your help (once more). Thanks for checking out the settings for the other columns as well. I changed all of them, but the problem I’m facing now is even more baffling. Maybe you can take a look at my site? I’m not sure how I should explain it.

The background image seems to be overflowing this time. Overflowing out of the borders of the column.

I checked it out. Here’s the issue. There aren’t any borders set on the columns, they’re part of the background image. The only border set on the column is a top border, which is why the background images were orginally styled like so:

transparent url(images/categories.jpg) no-repeat scroll center bottom

Aligning the image to the bottom shows the bottom border (which is part of the image), aligning it to the top, shows the top border.

Because of the size of the actual image, and the height of your category list, you basically have three choices;

1. Set it like so:
transparent url(images/categories.jpg) repeat-y scroll center bottom
Which will show the top border of the image.

2. Set it like so:
transparent url(images/categories.jpg) repeat-y scroll center top
Which will not show a bottom border (like it does now).

3. Edit the actual background image itself and make it longer to cover the full height of your lists.

Personally, #2 looks the best in my opinion b/c it’s hardly noticeable, but test out each alignment and see which one you like better.

It looks okay to me in Firefox3…

Because I’m a perfectionist, I went ahead and made larger images for the backgrounds:

https://www.martinish.com/sect_resources/categories.jpg
https://www.martinish.com/sect_resources/discussed.jpg
https://www.martinish.com/sect_resources/links.jpg

You can download them from my site, and then replace your current ones with them, then set your column backgrounds like so:

transparent url(images/categories.jpg) repeat-y scroll center bottom
transparent url(images/discussed.jpg) repeat-y scroll center bottom
transparent url(images/links.jpg) repeat-y scroll center bottom

It should now display a “border” around the entire column.

I’ll keep the images on my server for a day, and then take them down.

Let me know if you need anything else! ??

I’ve a question though, if I simply replace the background image with larger ones, if the list increases will this happen again?

Hi martin, where do I change these again? Not too sure and am afraid of twiddling with it lol

@kai911 Yes, theoretically it could happen again if the list increases, but these new images are twice the size of the old ones, so the chances of that happening are unlikely.

Download the images from my site and upload them to your images directory:
“wp-content/themes/WordPressFun/images/“. This will overwrite your current images.

Then, in your style.css change the background properties for each column:

.sub-container .category (line 594):
background: transparent url(images/categories.jpg) repeat-y scroll center bottom

.sub-container .discussed style.css (line 634)
background: transparent url(images/discussed.jpg) repeat-y scroll center bottom

.sub-container .links style.css (line 685):
background: transparent url(images/links.jpg) repeat-y scroll center bottom

That should do it!

(edit: I see you already uploaded the new images. Now just change the background properties as suggested and you’ll be good to go!)