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.

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

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

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...

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.

[edit]Hmm you both type too fast [/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.

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?

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

They're referred to as "liquid" columns.

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%;
}

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

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

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

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)

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?

eye sea

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

beaten by briski -

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

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

Something like this?

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

With more info here

http://www.alistapart.com/articles/fauxcolumns/

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

cheers,

dan

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

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.

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

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

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

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

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.

Actually, it does work. It is 100% of the document which has no height. As I asked before what is 100% of nothing?

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

Dan

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

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.

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