minimum background height

Forum Moderators: not2easy

Message Too Old, No Replies

minimum background height

Kysmiley

12:50 pm on Feb 5, 2005 (gmt 0)

Is there anyway to set a minimum display height with CSS. I have a background that goes across the top and down the left side. If I dont set the height only the top of the background shows. If i set it to 600px then the whole image shows or at least it fills the screen. What if i have more content than that though I want it to adjust for length but not to go below a specific size either
Any offer any suggestion
Pat

Sparhawk

3:08 pm on Feb 5, 2005 (gmt 0)

If I understand correctly, you want to ensure that your element is at least 600px high, but can still expand from there. Is the element a table or td with a background-image or something?

If so you can set your element to:

.element {
height: 600px;
}

This should force it to at least 600px height. If you add more content than fits within the table it should expand to allow for the additional objects.

Let me know if I have misunderstood, because I have mucked around with similar positioning issues extensively.

createErrorMsg

7:56 pm on Feb 5, 2005 (gmt 0)

If you add more content than fits within the table it should expand to allow for the additional objects.

In IE, yes. In compliant browsers, no.

Compliant browsers (correctly) interpret height as an absolute setting and will not expand such an element should content spill over. Instead, they allow the content to flow out of the element while keeping the element height at exactly what you set.

So to accomplish this cross browser you need to use min-height for compliant browsers and height for IE. Of course, IE/Mac gets height implementation right, so the IE value needs to be hidden from that browser. Here's the basic code for one way to do this...

YOURSELECTOR {
min-height: 600px;
}
/*start iemac hide \*/
* html YOURSELECTOR {
height:600px;
}
/*end iemac hide*/

cEM

Kysmiley

8:50 pm on Feb 5, 2005 (gmt 0)

Thank you again cEM for a thorough explanation in layman terms that I can understand.And also thank-you sparhawk
Pat

Kysmiley

9:48 pm on Feb 5, 2005 (gmt 0)

Hmm cant get it to show the min height this is what im trying
.body
{
margin: 0%; width: 100%;
min-height: 600px;
background-image: url(pagebkg.jpg); background-repeat: no-repeat;
}
/*start iemac hide \*/
*html body {
height: 600px;
}
/*end iemac hide*/
Yea I know its a copy and paste Im lazy and cEM took time to save me trouble. The full background image is not showing as I want it
Pat

Emperor

2:34 am on Feb 6, 2005 (gmt 0)

Hey Pat,

Try getting rid of the period before the 'body', and also, you should use just '0' and not '0%' for the margin (and anything else like that).

Like so:

body{
margin: 0;
...your stuff
}

Emperor

Kysmiley

3:33 am on Feb 6, 2005 (gmt 0)

Do i still need to get rid of the period even though that body is a container inside the body of the page. i guess I should name it so somthing else so it is not confusing
Pat

Emperor

6:21 pm on Feb 6, 2005 (gmt 0)

...body is a container inside the body of the page...

Huh?

Here is a quick lesson on syntax:

CSS styles:

p {
margin: 0;
}

p.red {
color: #ff0000;
}

HTML code:

<p>Hi, I'm a paragraph with no margin.</p>

<p.red>Hi, I'm a paragraph with no margin and red text.</p>

See how it works? First you have the HTML element (the <p>) then the user-defined class name (red here), the 'p.red' inherits from 'p'.

So <body> is an HTML element, and unless you also made a class called 'body' (bad idea) there should be no period before it.

Here is how I would do it:

CSS:

body {
font-face: some font names;
font-size: 100%;
...more stuff...
}

body.special {
...your special background stuff...
}

HTML:

<body.special>
...your page
...
</body>

Take care,
Emperor

PS - for this you should really us and id instead of a class, so change the period to a # and make sure you only have one instance of body#special.

Kysmiley

7:18 pm on Feb 6, 2005 (gmt 0)

Thanks will work onit with that idea
pat