X-Cart forums

[moneysaver67]

I'm posting this in hopes that someone has crossed this bridge before and happens to know of a shortcut.

In preparation for styling a fresh install and removing much of the tables for CSS, I've already hit a block. In fact, I hit the same block on another cart site and need your help.

This is so simple for any CSS guru... I don't know what I'm missing.

On this page:

http://www.thepei-realestate.com/store/product.php?productid=1&cat=1&page=1

You'll see that though BODY is set to height:100%, and #container is set to height: 100%, that in FireFox, the 100% ends at the viewport, and doesn't span down with the content. It is not and issue in IE, however.

Has anyone else trying to attain a 100% height CSS layout ever seen this? Is there something I might be missing?

[moneysaver67]

What are the odds that I finally make it a point to make this post, and then, I find the answer... errr sort of.


What I thought was the solution?

#container{
	position:relative;
	margin: 0 auto;
	width: 1000px;
	text-align: left;
	background-color:#fff;
}

What I was doing was identical to the above, only I removed:

height:100%

and I added

position:relative;

Well, this made it work/span fine in both browsers, only now in IE it doesn't span 100% of the page when there is limited content.

e.g.

http://www.thepei-realestate.com/store/home.php

Anybody!!??

[moneysaver67]

Ok...well, I have a work-around and it works great...BUT, not for IE5 Mac, plus it will not validate W3C.

The Trick?

IE specific CSS via the css underscore-hack:

_height:100%;

Where height:100% seemed to be Breaking FF, but Keeping IE running, this hack is perfect as it enables both to function with the desired results.

I'm still interested to know if anyone knows of a proper, W3C-worthy way of obtaining the same results!