[thelist] FF and IE CSS problems with height
Gunlaug Sørtun
gunlaugs at c2i.net
Fri Mar 23 00:07:50 CDT 2007
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
More information about the thelist
mailing list