[thelist] FF and IE CSS problems with height

[Gunlaug Sørtun]

Craig Givens wrote:
> I attempted to hack a minimum height property for the main <div> 
> which holds the body content of my page, and this seems to work well 
> in both Firefox and IE6-7.

> http://www.geocities.com/craiggivens01/sample2.html

> #1 The first problem is that this seems to work best only 1024 
> resolutions, since the footer is level where I need it to be. 
> Unfortunately the content area height cannot dynamically expand with
>  % values. I've used px as the unit, but this is limiting for 
> resolutions higher than 1024x768. Is there any way to adjust this 
> properly to meet all resolutions and work on all browsers?

Not with CSS, since you need an unbroken chain back to the root-element
for 'min-height: (some value in percentage)' to work. The chain will be
broken in your page, and IE7 doesn't understand the workaround.

> #2 The second issue is that in Firefox, my right column appears to be
>  hiding underneath my main blue header bar, as if it were a layer 
> underneath. In IE it overlaps above it, which is the correct way I'd 
> like it to visually render. How do I get Firefox to behave properly 
> like IE6-7? I've tried using a z-index property to get the right 
> column layer to float "above" the main header, but this had no 
> effect.

Firefox behaves correct. IE/win is buggy.

You have 'overflow: hidden' declared on #contents, which of course hides
the overflowing part of the right column. So, Firefox only does what you
tell it to.

Replace 'overflow: hidden' with 'display: table'. IE/win doesn't
understand 'display:table', but it doesn't need to in your case since
you're triggering its 'Layout'[1] bug to the same effect.

> #3 The last problem is that I've used a negative -60px value on the 
> #rightColumn <div> to get my right column to float up and overlap on 
> top of the header:

> I don't like using negative values (aren't they bad practice?)

If you don't like negative margins - don't use them. Don't blame it on
"practice" though, as negative margins is the perfect solution in many
cases, and the only solution in others.

> ....so is there an alternative way to get it to float upwards to the
>  right while keeping the same markup order and having it visually 
> render as overalpping the header?

Probably, but I wouldn't bother since the negative margin works just
fine in your case, and is probably the best solution anyway.

regards
	Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no