8 replies [Last post]
durdledoor
Offline
Regular
Oxfordshire, England
Last seen: 14 years 7 weeks ago
Oxfordshire, England
Timezone: GMT+1
Joined: 2005-07-22
Posts: 44
Points: 0

Afternoon All

I have created a 'content' page, which will have varying amounts of content on each page it is applied to.

The trouble was, that if the page had no 'content' than the height of the page shrunk down to the bare mimimum.

I tried to fix this by adding min-height = 875 to the wrapper tag. This has worked for FF and IE7 but not IE6. Would anybody no why? I've tried some other things but none of them worked.

Here's the page (its fixed width and centered. I will fix the nav menu positioning in IE, but this one has stumped me)

http://www.ja.net/temp/Project/page2.html

and the relevant coding : -

body { font-size: small; line-height: 1.4; font-family:Arial, Helvetica, sans-serif; color: #000; background: url(background2.jpg) repeat; min-width: 770px; text-align:center; }

#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align:left;
background: #fff;
overflow:hidden;
min-height: 875px;
}

Thanks
durdledoor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

This is one of the better

This is one of the better understood facets of IE6 (or should be) No IE6 has never understood min- properties but it also has a poor approach to handling height and overflow (as long as hasLayout is triggered)Height in IE < 7 is not set as it should be but will expand to accommodate it's content, so you can set a fixed height but ensure it's hidden from real browsers.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE6 and below don't

Shock

IE6 and below don't support min-height, however when overflow is auto (the default) height acts as min-height. So, your solution is to create an IE6 (and below) only style rule using height:875px (or whatever value you choose).

I'll leave you to do your own searching for IE6 CSS targeting. There are quite a few alternatives, different people prefer different ones for different reasons.

durdledoor
Offline
Regular
Oxfordshire, England
Last seen: 14 years 7 weeks ago
Oxfordshire, England
Timezone: GMT+1
Joined: 2005-07-22
Posts: 44
Points: 0

Hello Hugo and Chris Thanks

Hello Hugo and Chris

Thanks very much for the heads up, I'll have a look at those now.

really appreciate the guidance

daniel

ps are any of you liverpool fans? up the reds tonight!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

er forget the garbled

:shocked:
er forget the garbled slightly inaccurate mention of hasLayout.

Be nice If Liverpool won I guess; wonder if it will be more exiting match than the FA cup final *yawn*

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 10 years 12 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

although I agree with the

although I agree with the above posts of ie6 specific code, would creating a div under all of these tabs with a height set at whatever your min-height should be work? or a padding otherwise

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

It'll mean your page is

It'll mean your page is longer than necessary whenever there is content in the main div.

You can use a floated div with a fixed height to set min-height, set the width of the floated element to be 1px or 0 to keep it out of the way. But why use the extra page markup when its not necessary?

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 7 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

hi, and if you add a

hi,
and if you add a padding, then it might make it look fine in IE but will look quite bad in FF.

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

durdledoor
Offline
Regular
Oxfordshire, England
Last seen: 14 years 7 weeks ago
Oxfordshire, England
Timezone: GMT+1
Joined: 2005-07-22
Posts: 44
Points: 0

Hi All Just to update you

Hi All

Just to update you all, I've added a height to the body class in my ie6 specific stylesheet, and the page is now working.

Thanks very much all

durdledoor