Vertical stretch w/ CSS (yeah, I know...fun)

[reuber1]

I know stretching a table vertically using CSS is kind of tricky, and again I'm still flying by the seat of my pants, though thus far I believe it works, but the only problem is that, with Internet Explorer, before the footer section there is an abnormal amount of blank space, but in Firefox it is fine. WTF? Both are stretching appropriately, but IE is adding a bit too much space. Maybe it has nothing to do with the autostretch? I did add an image that is bigger than the width of the centercontent div, just to test the float position and to make sure it would not appear behind the currently nonfunctional left navigation if it was too big.

EDIT: Nevermind, Firefox is doing it too now.

http://64.198.195.247/?skinid=5

Pardon the code. It's mainly CSS until the content section, where the ASP administration site insists on doing it's own thing.

Here's the style sheet...whatever is encased with my name is my CSS from the template before I had to convert it with server side code. Everything else within the ASP comment is theirs, and there's a ton of it.

http://64.198.195.247/skins/Skin_5/style.css

(also pardon the design, not mine, that's a comp from the customer)

[reuber1]

Bump.

Still cannot get it to work right. Firefox is OK now, or so it seems, but in I.E. the footer doesn't have a minimum cutoff (click "News" and you'll see what I mean) and sometimes the footer drops lower than it should, although at this point I'm willing to live with that, it's just that I really need it to stop below that Print Music Online logo. Right now I'm giving IE the middle finger.

[reuber1]

Nothin'? I know I didn't look at this thread 104 times. ;)

[resdog]

Looks to me like this is the culprit:

#clearfooter {width:100%;height:52px;clear:both;}


get rid of that "height:52px;" or lower the number to bring the footer up. I'm not sure if that's the solution you're looking for, but hopefully it will help you.

[reuber1]

Thanks res, I'm actually in the middle of working on this and about 90,000,000 other things, give or take. And I've been updating sporadically on it throughout the day, so chances are the code is probably different; I have about 5 seperate versions as backups right now for my template. lkw sent me a PM that initially worked, but I may have to retool the CSS altogether. I have been looking at that clearfooter, but when I used IE's completely-inferior-to-Firefox's Web Developer toolbar to spot the block elements, it seems now that if the content is too wide in the center content section that it sends the links and the PM logo on the left down to the bottom of the page, causing the extra space.

Oh well, I'll get to it eventually. Thanks, though.

[tZ]

I'm not sure what your asking.

Is your design made up of tables or divs?

Either way if you wanted one to stretch vertically you could us javascript.

Since, I'm not quite sure what your asking I'll try my best to explain this.


<script type='text/javascript'>

window.onload = function() {

var content_div = document.getElementById('content');
var navigation_div = document.getElementById('navigation');
content_div.height = content_div.offsetHeight;
navigation_div.style.height = content_div.height + 'px';

}

</script>


Basically, the first line in the function gets the content element which would be your right container with the information. Then the second line does the same but, for the div with the navigation. Then after a attribute is added to the content_div which calculates the height of that content_div using. The the last line sets the navigation_div's height equal to that of the left(content_div). This way both your columns are the same height all the time.

If thats not what your talking about then forget I said anything.

[reuber1]

Thanks, tZ. That sounds about right for what I'm going for, I might have to play around with that; as I said, I've been thrust into all of this as of late, and all of these sites used to be done with tables and, thus, almost impossible to navigate the code and they wind up breaking more often than not. Unfortunately there's a mix of div's and tables because the Storefront that we are working with likes to automatically generate it's own archaic code.

I'll give that a shot, and some other methods, and see what works the best. If I don't get another job (http://www.graphicdesignforum.com/forum/showthread.php?t=21515&page=1&pp=10) ( ;) ;) ), then this is what I'll be doing here from now on on a regular basis, and right now I'm working with one of our customer's on a sort of "practice" basis. If anything, I'm glad I'm being forced to learn CSS (sort of, I suppose I could keep on using tables). So excuse the newb-ness to the code, if any. I'm sure there's a buttload.