asked on

What is the difference between these pages that's causing the problem?

On this list of pages that work and those that do not work, what I'm referring to is that the orange strips on left and right won't reach to the bottom, as they do on the "pages that work". I feel I must be doing something different within the page to make the difference, can you tell me what that is?

Pages that work:
dev2.magickitchen.com/how-to-start.html
dev2.magickitchen.com/gifts.html
dev2.magickitchen.com/meal-plans.html
dev2.magickitchen.com/shipping.html
dev2.magickitchen.com/contact.html
dev2.magickitchen.com/catalog.html
dev2.magickitchen.com/newsletter.html
dev2.magickitchen.com/about.html
dev2.magickitchen.com/guarantee.html
dev2.magickitchen.com/faq.html

Pages that don't work:

dev2.magickitchen.com/index.html
dev2.magickitchen.com/customers.html
dev2.magickitchen.com/menu/main_courses/baby-clam-linguine-marinara.html

That last one is a template page, I'll attach the template. Thanks in advance for your help!
mk-cat-page-MAINS.html

Marco Gasi

In the file you posted there' no css and I can't open the page in the browser to ee how it works and have the ability to explore cs files involved.
If you want help, you have to provide a link to a live page where we can see the problem. Without that, I can only say that probably the element with orange strip (I guess they are borders) has height set to auto and its content is not enough to make the 'orange strips' reach the bottom. In this case you should set the min-height of that element to the most height value among the not working pages.

Melody Scott

ASKER

Those are live pages if you add http:// before them. I didn't want to add live links to a site that I don't want the search engines to see. Css is linked from the live pages.

Marco Gasi

As I said, just chanhe the height and the min-height of the two sidebar:

in dev2.magickitchen.com/index.html:
<aside style="height: auto; min-height: 3242px;">
<div class="rightSidebar" style="height: auto; min-height: 3242px;">

dev2.magickitchen.com/customers.html: min-height: 1584px

dev2.magickitchen.com/menu/main_courses/baby-clam-linguine-marinara.html: min-height: 1320px

But maybe you can be interested in following this small tutorial about columns' height: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Melody Scott

ASKER

Thanks.. when I select those sidebars on index.html in Firebug, I see:
element.style {
height: 3217px;
min-height: 3217px;
}

Usually element.style means it's inline, but I can't find it in index.html. On the others, same thing, I see it in firebug but can't find it in the document.

Melody Scott

ASKER

I've done a search of source code on entire site, and can't find min-height: 3217px;, min-height: 3242px; min-height: 1584px. I'm just not sure where to find it, although you are obviously right.

Marco Gasi

Evidently those value are set by a javascript. Tomorrow I'll try to see what happens... Though I find very unusual that the height of a layout structural element be set via javascript. Usually this happens for slideshows or other element involved in some animation...

ASKER CERTIFIED SOLUTION

Marco Gasi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Melody Scott

ASKER

Thank you so much for the detailed explanation. I will look into this thoroughly tomorrow. I appreciate it very much!!

Melody Scott

ASKER

I think this might work very well, thank you! One little problem, the left and right columns are a little wider than I would like. You see that they make the whole body wider than the head and foot. I'm not sure what to do about that.

Melody Scott

ASKER

Sorry, the page I'm testing is here: http://dev2.magickitchen.com/test.html

Marco Gasi

Add to column-bg margin: auto 0;

.column-bg {
  background: none repeat scroll 0 0 #ffce65;
  border-style: solid;
  border-width: 1px;
  margin: auto 0;
}

Open in new window

Melody Scott

ASKER

A+++, thanks, Marco!

Marco Gasi

You're welcome! Glad to help you. :-)