10 replies [Last post]
earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 10 years 38 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

I have a vertical shadow the stretchs the entire length of the page. It works fine in IE6, but it's crapping out in Firefox and Netscape.

http://www.expresiv.com/landing/salesforce.html

Any suggestions of how to fix this problem?

Thanks ahead of time!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

100% not showing in Firefox and Netscape

Hi

Lose this line, it throws IE into quirks mode (not a good idea) and isn't yet necessary for any browser:

<?xml version="1.0" encoding="iso-8859-1"?>

So, you've hit the age old problem of height:100% across browsers.

To get 100% height for a div, AND for it to expand past the bottom of the page if need be, you have to hack away.

First:

html,body{
/* \*/
  height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}

That sets up all the browsers for 100% height except Mac IE5.x (it will not work, so forget it).

Then, you have height:100% in container. Ok for IE and Safari, but a disaster for Mozilla and Opera. Now change #container:

#container{
margin: 0 0 0 15px;
background: url(graphix/bgContainer.gif) repeat-y; }
min-height:100%; /*** moz uses this to make full height design. If you change this to height:100% moz won't expand the design if content grows.
 ***/
/* \*/
height:100%;
/* Last height declaration hidden from Mac IE 5.x */
display:table-cell; /*** Safari fixes to 100% height. This makes Safari treat the div as a table cell (no other browser does this) and thus it will expand ***/
}

So now you need some hacks becasue of that last height:100%. Put these new (weird looking) styles straight after #container's style list:

#contain\65	r{ /*** for Opera and Moz (and some others will see it, but NOT Safari) ***/
  height:auto; /*** For moz to stop it fixing height to 100% ***/
}
/* \*/
* html #container{
  height:100%;
}
/* Last style with height declaration hidden from Mac IE 5.x */
/*** Fixes height for IE, back to full height,
from esc tab hack moz min-height solution ***/

Note that the space between the \65 (hex for e) is a tab, and NOT a space. This is critical!

See if that does it. My comments are of the /*** blurb ***/ type - you can delete them safely, but they won't cause any problems where they are either. The others that start and end with /* are CRITICAL, so don't delete them (they trick IE Mac into ignoring some of the code)!

Trevor
PS This 'wisdom' took months of research to work out, I hope it works for you.

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 10 years 38 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

100% not showing in Firefox and Netscape

Wow... I really appreciate the feedback! Thanks again.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

100% not showing in Firefox and Netscape

Hi

Just took a look in Firefox, looks good.

I like the design too Laughing out loud

Trevor

earph
earph's picture
Offline
Enthusiast
Austin, TX
Last seen: 10 years 38 weeks ago
Austin, TX
Joined: 2003-11-12
Posts: 62
Points: 0

100% not showing in Firefox and Netscape

appreciate it.

OverMyHead
Offline
newbie
Last seen: 15 years 37 weeks ago
Joined: 2004-03-21
Posts: 1
Points: 0

100% not showing in Firefox and Netscape

Hi there,

ClevaTreva, tks for your words of wisdom.
I stumbled upon this thread in my search for mac height: 100% solutions for ie and safari.
Here's a test page.
the solution you suggested helps keep the footer down in ie on mac but I'm still having trouble with the safari hack.
I don't have a mac to test on but KnightWolfJK has been very good to help me with screenshots of the page from browsercam, on this link. Safari on mac is still not playing nicely with my test page Sad
I wonder, do you have any perls of wisdom to share with this CSS crash test dummy? What started out as a noble crusade of pure CSS for all platforms has turned into a mind numbing exercise for this CSS pleb. Any help would be greatly appreciated.
Tks.

ChrisHouston
Offline
newbie
SE England
Last seen: 15 years 20 weeks ago
SE England
Joined: 2004-07-19
Posts: 1
Points: 0

100% not showing in Firefox and Netscape

OverMyHead, i see your problem...

you've copied and pasted the line of code

#contain\65 r{

but it's converted the tab to spaces. Replace the spaces with a tab, and it should work.

ClevaTreva, you far ken Rock!

nico
Offline
newbie
Last seen: 15 years 16 weeks ago
Joined: 2004-08-17
Posts: 2
Points: 0

100% not showing in Firefox and Netscape

Hmm, but how will I get it working for:

#pagecell1{
	position:absolute;
	top: 1px;
	left: -1px;
	right: 2%;
	width:773px;
	background-color: #ffffff;
   min-height: 100%;
}

Because I can't get it working.... Please help me.

nico
Offline
newbie
Last seen: 15 years 16 weeks ago
Joined: 2004-08-17
Posts: 2
Points: 0

100% not showing in Firefox and Netscape

anyone?!

spurrymoses
Offline
newbie
Last seen: 15 years 16 weeks ago
Joined: 2004-08-22
Posts: 5
Points: 0

100% not showing in Firefox and Netscape

Hi,

Can anyone tell me the CSS explanation behind why height:100% doesn't work? Is CSS the fault, or the browsers?

Logically, it seems wrong that width:100% widens to the width of the parent window but the same doesn't work for height.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 10 hours 20 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

100% not showing in Firefox and Netscape

Hi spurrymoses,
This isn't a full explanation but should provide some guidelines on the use of height:100%;

Firstly lets try to clear up the differences in browsers when dealing with height.
IE wont accept min-height or max-height but most other decent browsers should.
IE will stretch the height of any element to fit the content even if the height is set.

If you set height to 100% the browser looks at the container to see if it has a height value and should use that value to calculate the height.
If the container has no height value then the height will be calculated as if it is set to auto.

So if you set the height of an element to 100% and it is contained by the body with no height set then the browser has no way of knowing what to base the percentage on.

Here is the w3c section on height: http://www.w3.org/TR/CSS21/visudet.html#the-height-property

Hope that helps