30 replies [Last post]
danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

either I am really dumb or Firefox 1.5 (on win XP) does not support the css property of 'min-height'. see this page as an example,

http://www.alexandermacgregor.co.uk/st_andrews/test2.html

please help, as at this rate I'm about to ditch standards forever... or at least until browsers support them properly

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

min-height and Firefox

You couldn't be much more wrong, I'm afraid.

I can't help but notice you're using tables for layout, and have this:

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

WHY OH WHY did you not read the stickies? THey explicitly state that this must be removed.

And IE doesn't support min height. Firefox DOES.

/edit

http://www.webdevout.net/browser_support_css.php

Firefox 1.0, 1.5 and opera 8.5 all support ALL min-height attributes. IE supports NONE of them.

IE is the ONLY browser that does not support standards.

Verschwindende wrote:
  • CSS doesn't make pies

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

er?

ok,

1. I've removed the first line of the document
2. It still doesn't work
3. Yes, I'm using tables for layout, in the actual page I'm working on they are the only thing that will give me the layout I want

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

min-height and Firefox

What layout are you trying to achieve? I fail to see why you need tables to lay it out.

Verschwindende wrote:
  • CSS doesn't make pies

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

hi

ok, firstly my real problem is that I can't get min-hieght to work on that test page, I know that FF is compliant etc etc, but why isn't it working? see the test page to see it not working... http://www.alexandermacgregor.co.uk/st_andrews/test2.html

secondly, the layout I want is a pixel exact portion of the page in the centre with a space either side that will fill 'the rest' of the space and allow me to put graphics up to the edge of the centre part, like this

http://www.alexandermacgregor.co.uk/st_andrews/index.html

I don't want to get into an argument about standards and browsers, I just need some help...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

min-height and Firefox

You've still got the XML prolog in there.

And you can easily achieve what you want with divs.

Is it

a) a fixed width site
b) centred in the middle
c) with the background (gradients) running the whole length of the page?

If yes, then do it with Divs. Piece of cake.

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

min-height and Firefox

[edit]Hmm you both type too fast Wink [/edit]

Hi danimal.

Firefox does support min-height. The problem is that the way your using it, it does not apply to table columns. As pointed out correctly by TPH IE is the thing that gets min-height wrong. Although even that can be made to behave with regard to minimum heights with some nudging.

What is no need to ditch standards forever just yet - what are you trying to achieve, it might just require a change of thought process to get it done. doing things in CSS can often need a differnet way of looking at things than when they are done with tables but in the end it's worth it.

As an aside:

TPH - that's hardly a tone likely to lead danimal away from tables and towards standards now is it?

It is much more likely to cause people to think we're a bunch of rabid standards zelots, foaming at the mouth at the mear thought of XML prologs and IE users rather than the reality of what goes on here.

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

Briski - thank you, at least I know why my test page isn't working now

anyone - the layout I want is not a fixed-width site, it is to be a three column-looking site where the middle column is constrained to an exact pixel width and the side columns take up the rest of the space, however much that might be - I can't see how to do that with divs but would love to do it that way, any advice?

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

update

just tried replacing the table with a div - same problem. why isn't it working?

see it here - http://www.alexandermacgregor.co.uk/st_andrews/test2.html

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

min-height and Firefox

They're referred to as "liquid" columns.

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

min-height and Firefox

min-height applies to all elements except inline non-replaced elements and table elements.

Your element is 100% of its container which has no height. What is 100% of nothing? :shrug:

Try adding

html, body {
height: 100%;
}

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 3 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

min-height and Firefox

Just from the look of what you have set up at the moment, is there going to be anything outside the center column? i.e where the orange is.

if not, then it's just a centered fixed width column and using CSS for layout will be reasonably easy (if your just starting with divs and css - then 'easy' is a relative term), there are many people here that will answer your questions.

to get you started
CSS
html{background-color:#f47b20;}
orange background
body {width:750px;margin:0 auto;}
places a 750 px wide column in the center of the screen
body {width:750px;margin:0 auto;background-image:url (slice.gif); background-repeat:repeat-y;}
creating a 1px high and 750px wide 'slice' of your background image (slice.gif) can give the shadowed edge effect, repeat-y just makes it repeat down the page.
add a Div within the body and add a 15px margin to the left and right and the content will sit inside the shadow effect (same thing you've done with your outer table, it's just a DIV instead

HTH

freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 3 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Re: update

What's supposed to be on thie link I've quoted - i get a white screen with a 20 px high red line at the top?????

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

fatfreddy - cheers, that makes sense, I was thinking about trying to put three divs in a row...

triumph - your code won't work if I replace the '200px' value with '100%'. The page being a minimum of 100% high, with room to scroll underneath if necessary, is a requirement

thanks for sparing me the time guys, I think we're getting there

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

fatfreddy - look at the source code, if I can get it working how I want it to then the whole page ought to be red. (it's only a test page)

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

min-height and Firefox

It's not working now for a different reason - infact it is *sough* sort of working, in that it's doing what you've actually asked it to do.

You have

html, body
{
	min-height: 100%;
}

If you replace it with

html, body
{
	height: 100%;
}

your test page will look as you want. However it still probably not be the basis for the whole site witout further investigation - 100% heights can be tricky but there is some threads here dealing with them i'm sure.

Looking at your full page it looks like the center column is the same width regardless of browser size? is that the case?

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 3 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

min-height and Firefox

eye sea

It'll work in FF just by changing min-height to height

beaten by briski - Laughing out loud

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

hi, I realize that setting the 'height' will do it, but that won't solve my actual problem.

What I'm trying to do is make a template page that can be re-used with different content. The problem is that if you use the 'height' property then FF tries to constrain the height of the page to 100% of the viewport, even if the content takes up more than 100% of the height of the viewport. This causes there to be a visual jump between pages that do and don't need scrolling.

It seemed that min-height was the ideal solution, but that's looking less and less likely as I can't get it to work at all when the value is set to % rather than px

for an example of what I mean look at
http://www.alexandermacgregor.co.uk/st_andrews/index.html
then click on the 'accomodation' link

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

briski - yes, the central column has to remain a fixed pixel-width

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

min-height and Firefox

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

briski - yes! Smile that is my problem exactly - I'll read the other page fully, and hopefully that will sort it out.

cheers,

dan

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 3 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

min-height and Firefox

danimal

Just to get you started with using divs for your site
It's rough, you'll have to sort out you colours correctly and margins padding, font size etc

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>St Andrews Retail Park - Dransfield Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="divbased.css" type="text/css" />

</head>

<body>
<div id="header">

<img class="blah" src="http://www.alexandermacgregor.co.uk/st_andrews/global_assets/scheme_type.gif" />
<img class="logo" src="http://www.alexandermacgregor.co.uk/st_andrews/global_assets/logo.gif" alt="St Andrews Retail Park - Dransfield Properties" />
</div>
<img class="bannerpic" src="http://www.alexandermacgregor.co.uk/st_andrews/global_assets/banner_pic1.jpg"  alt="St Andrews Retail Park - Dransfield Properties" />


<!-- Your main content goes here  -->
<div id="main">
<div id="content">
<h1>St Andrews Retail Park </h1>
<h2>Hessle Rd, Hull</h2>
<h3>LOCATION</h3>
<p>This popular retail park is situated on the A1041 Bawtry Road, close to it's jucntion with the A63 Selby bypass.</p>
<p>Within an affluent part of the Yorkshire region, 3 Lakes is located immediately opposite land earmarked for over
1,000 new homes, early phases of which are already under construction.</p>
<img src="http://www.alexandermacgregor.co.uk/st_andrews/global_assets/dransfield_logo.gif" alt="Dransfield Properties" />
</div>


<!-- Navigation -->
<div id="leftcol">
<ul class="nav">
<li><a href="http://www.alexandermacgregor.co.uk/index.html" style="color:#F57B21;"> &gt; Location</a></li>
<li><a href="http://www.alexandermacgregor.co.uk/description.html"> &gt; Description</a></li>
<li><a href="http://www.alexandermacgregor.co.uk/accomodation.html"> &gt; Accomodation</a></li>
</ul>
<ul class="nav2">
<li><a href="http://www.alexandermacgregor.co.uk/gallery.html" style="font-weight:normal;"> &gt; Gallery</a></li>
<li><a href="http://www.alexandermacgregor.co.uk/occ_links.html" style="font-weight:normal;"> &gt; Occupier Links</a></li>
<li><a href="http://www.alexandermacgregor.co.uk/other_links.html" style="font-weight:normal;"> &gt; Other Links</a></li>
<li><a href="http://www.alexandermacgregor.co.uk/legals.html" style="font-weight:normal;"> &gt; Legals</a></li>
<li><a href="http://www.dransfield.co.uk"style="font-weight:normal;" target="_new"> &gt; Dransfield Properties</a></li>
</ul>
</div>
</div>

<div class="footer">
</div>

</body>
</html>

CSS (save as divbased.css)

*{margin:0;padding:0;}
html{background-color:#f47b20;font-family:arial, sans-serif;font-size:85%;}
body{width:650px;margin:0 auto;background-color:#fff;}


h1{color:#003d7d;font-size:1.6em;}
h2{color:#666;font-size:1.4em;font-weight:normal;}
h3{color:#000; font-size:1em;margin-top:10px;}


.blah{float:right;margin:40px 35px 0 0;}
.logo{margin:10px 0 0 35px;}
.bannerpic{text-align:center;margin:20px 35px;}


#main{margin:10px 15px;}

#leftcol{width:150px;margin:20px 0 0;}
ul{margin:5px 0;}
li{list-style-type:none;}
li a {text-decoration:none;color:#999;}
li a:hover{color:#f47b20;}

#content{float:right;width:450px;margin:0 0 0;border-left:2px dashed #ccc;padding-left:10px;}

.footer{clear:both;}

HTH

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

min-height and Firefox

It works better for you than most as you don't have a footer element. If you did and wanted that to be at the bottom of the screen when short content that would be more tricky but I think you should to able to implement what you have in yor example almost as it is.

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

briski and fatfreddy - thanks a million, I think can see the light at the end of the tunnel now Smile

thepineapplehead - thanks not so much, it's no help to me knowing that you would find it easy Wink

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

min-height and Firefox

danimal wrote:
briski and fatfreddy - thanks a million, I think can see the light at the end of the tunnel now Smile

thepineapplehead - thanks not so much, it's no help to me knowing that you would find it easy Wink

I wouldn't find it easy; in fact I scratched my head trying to get your example to work. I don't know a lot about min-height, believe me.

I apologise; I get worked up when people complain that the Fox doesn't comply with standards. Glad you got it sorted though Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

min-height and Firefox

Danimal,

Don't be too harsh on TPH, he just loves his fox. Also he does have a point regarding the XML prolog as having it there will probably cause you problems in the future between IE and other things. Laughing out loud

Anonymous
Anonymous's picture
Guru

min-height and Firefox

danimal wrote:
triumph - your code won't work if I replace the '200px' value with '100%'. The page being a minimum of 100% high, with room to scroll underneath if necessary, is a requirement
Actually, it does work. It is 100% of the document which has no height. As I asked before what is 100% of nothing?

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

Hi again,

apologies to TPH - it was a very stressful day at work and as a fan of Firefox and standards (despite the teething pains) I felt a bit sold short, although my first post was a bit accusatory, now I read it again - fustration seeping through because for once my page worked fine in IE and not in FF, not the usual arrangement!

secondly, to triumph - I had set the html and body tag to be min-height:100% as well as the table/div, which I expected to mean that they would be at least the height of the viewport, with, hopefully, room for more content down below without it messing up the page. I'm still not entirely sure why that seemed not to work... still, I have a solution to my problem, which is what I came for.

All in all, thanks to everyone who helped out, and I'll be sure to recommend the site to anyone who needs help with their CSS Smile

Dan

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

scrollbars grrrr - that's all it was - make every page 101% high so you will always get them, and there will be no jumps.

that will fix the problem illustrated here...

(briski's example)

http://stillraining.com/test1.html
http://stillraining.com/test2.html

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 8 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

min-height and Firefox

Personally I think the little jump is better than the 101% thing.

I think people that use FF are used to it and it's not really a problem, that said I guess you will always get a client that'll insist.

danimal
Offline
Regular
Last seen: 11 years 40 weeks ago
Joined: 2006-02-23
Posts: 14
Points: 0

min-height and Firefox

Yes, I guess it's a judgement call but I think the jump is more obvious - and so does the senior designer Wink