HTML - Is There A Maximum Height For The Page?

Hey everyone,

I just want to know if anybody knows any code that will set the amount of checkboxes that are allowed to be checked in a form.

Say there are 30 check boxes, but I only want the user to be able to check 10, how could I do this?

Preferably so that if there are too many boxes checked when they click, 'SUBMIT', then an error message will pop up telling them that they have checked too many boxes.

Thanks in advance.

Hi im aware how to fit the width of a page so it fills the browser window but im curious on how to set the height of the page?

the width works perfectly and just the height im stuck with

the page is displayed well in IE6, IE7, firfox 3, but not in firefox 2
no matter wht is the height of the page it only shows part of it (about 800px height)
how can i solve that????? (i'm working locally)

thnx in advance :hat:

Is there anyway to make a container DIV LAYER that contains multiple other layers to extend just as far as its contained layers vertically? By this I mean, can you set the height of a div layer to extend to the bottom of the page instead of stopping exactly at where that layer's content stops? I know I could always set the height to a fixed high number, but I don't want all that extra scroll space at the bottom.

I've made an example page to better explain what I mean:

http://www.willamette.edu/~nsawir/tester222.html


See how the white background with black side borders (this is my container div layer) only goes as far as the black text? This black text is the content of that one div layer. The white background and black borders do not extend down to where the red text reading "THIRD LAYER OF ITEMS" (this would be my third div layer) is.

I would like the white background/black border of my container layer to extend to the very bottom of the page, where ever it may be (and no further). Is there any way around this???

PLEASE HELP!!!!!!

hello Every can any one tellme How can i make a webpage open in Fixed height and Width which is to be opened by a Hyperlink

Example : like when you click On MORE link From The Smilies in this Forum it open a Small Window Resizeble Window

The layout of this page I'm making requires a centered table, 800 pixels wide and 100% high. I am having huge problems making it fill the entire height of the page though, it just stops rather than going right to the bottom of the page.

It's a 4.01 transistional compliant page if that's relevant. Here's a link to the page.

Here's a link to the page (apologies for the file size)
link to page

I want the dark green center section, and the two side cells with tiled graphics to extend right down to the bottom of the page, regardless of height. The center table with the graphics can stay where it is or vertically center, I don't mind about that. I also need it to have no vertical scrollbar when it's viewed fullscreen. If I remove the doctype, it works fine, but I'm wondering if there's a way to have it vaild for that doctype and still look ok?

I've tried everything I can think of and am not turning up anything useful with web searches, if anyone can tell me where I've gone wrong and if this is possible to fix in html, I'd really appreciate it. I can't use CSS, and the doctype has to be as it is, because that's what the specs say (it's for an html class).

Thanks for any help.

Hi Everyone,

I'm slightly confused by this one. But i'm sure theres a hack out there to fix it.

Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background.

This is correct.

Its done, by filling the a element, with a background-color and then applying opaque: 0.5;

The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it.

However, in opera, the right and left padding is correct, but the height padding doesn't work.

Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it?

TIA

Matthew Millar

I have a div and within that my navigation menu. My menu is made up of ul with their styles removed and floated left to make the list horizontal. I'm trying to make the background colour of my div white, but it doesn't have any height so it's not showing up.

Hi,

I have a table and I need a background in one cell to extend down to the bottom of the cell (which is also the bottom of the page) from a certain point (below the content of that cell).

I figured I would just use a div to do that... like this

<html>
<head>
<style type="text/css">
.divbg {
background:url(tree.jpg);
height: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<p>Content</p>
<div class="divbg">&nbsp;</div>
</td>
<td>
<p>Content takes up a lot of space here and continues down the page a bit, so that is why the background in the cell to the left has to continue down the page.</p>
</td>
</tr>
</table>
</body>
</html>

Unfortunately, that didn't do anything. It just left me with a strip of my background image right under the content. So... I discovered online that you have to set the parent to 100% as well. I made the td <td height="100%"> and with no luck, I made the table <table height="100">.

This just did really weird stuff and I realized what the problem was. This was making the div 100% height of the window itself.

All I want is for the div to go from top to bottom (not including the content at the top of the cell). Is this even possible?

Let me know if my explanation is unclear...

Thanks!

P.S. In the real site I am using XHTML 1.0 Transitional if that makes a difference. I might be able to change that though, if I need to. It was just the default that Dreamweaver put there. I'm not sure what the rest of the site would look like if I changed that now.

I'm having problems with making a div height to 100%. What i mean is that the div height stretches to how long the contents of the page is.

If you check out my sample here, the green div on the left only stretch to the windows "visible" viewing area, then if you lower, the height doesn't go any lower than that. any idea?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
</head>
<style type="text/css">
body{
	margin:0px;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	}
#left{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	background-color: red;
	width: 100px;
	height: 100%;
}
</style>
<body onload="fixheight()" onresize="clearTimeout(t);t=setTimeout('fixheight()',10);">
<div id="left">
	<div style="width: 100px;background-color: green;height: 100%"></div>
</div>
<div align="center">
<p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p><p>sfsdf</p></div>
</body>
</html>

I have two columns in my page layout. I would like them to be the same height without declaring an exact height for both coloumns. Is there anyway to do this. I have attched a simple example of what I mean.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .column1{
                border: solid 1px black;
                width: 400px;
                margin: 20px;
                padding: 5px;
                margin-left: 100px;
                background-color: aqua;
                height: auto;
            }

            .column2{
                border: solid 1px black;
                float: right;
                width:400px;
                padding: 5px;
                margin: 20px;
                margin-right: 100px;
                background-color: #92c847;
                
                
            }

            .holder{
                border: 1px solid black;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <div class="holder">
            <div class="column2">
                <h4> Column 2</h4>
                <p>text text text text text text text text text text text text text text text text
                    text text text text text text text text text text text text
                    text text text text text text text text text text text text
                </p>

                <p>text text text text text text text text text text text text text text text text
                    text text text text text text text text text text text text
                    text text text text text text text text text text text text
                </p>
            </div>


            <div class="column1">
                <h4> Column 1</h4>
                <p>This should be the same height as column2</p>
            </div>



        </div>
    </body>
</html>

Thanks

Calyspo

This html code works in Google Chrome (100% height), but not in IE (25% height).
How can i fix it so IE shows it correct?
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>
Welcome
</title>
<style type="text/css">
html
{
overflow: hidden;
}
body
{
margin: 0px;
}
object
{
width: 100%;
height: 100%;
}
.center
{
text-align: center;
margin-top: 20%;
}
</style>
</head>
<body>
<div class="holder">
<object type="application/x-shockwave-flash" data="preloader.swf">
<param name="movie" value="preloader.swf"/>
<div class="center">
To use this site you must have Javascript enabled and be using the current version of Adobe Flash Player.
<br/>
<br/>
<a href="http://get.adobe.com/flashplayer/">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" style="border: 0px;"/>
</a>
</div>
</object>
</div>
</body>
</html>

Ok I have been racking my brain on this one for two weeks and I still cannot find an answer to this, which I know I will kick myself when I find out. I have this sidebar in a table and the sidebar spans 4 Rows the problem is that each cell does not condense down to the smallest size possible and I don't know what to do to fix it. The page in question is at http://wentworthatdraper.com/test/ The page renders great in Chrome but not FF and IE

I'll put all the code I think is relevant here.


<tr>
<td width="77" height="160" class="sidebar" >

<div class="title">
Main
</div>
<div class="subtitle3">
<ul>
<li>
<a href="index.html">Home</a>
<a href="contact.html">Contact Us</a>
<a href="calendar.html">Calendar</a>
<a href="news.html">News</a>
</li>
</ul>
</div>

</td>
<td width="721" colspan="2" rowspan="4" class="content">
<p> Edited </p></td>
</tr>
<tr>
<td height="272" class="sidebar" >

<div class="title">
Our Community
</div>
<div class="subtitle3">
<ul>
<li>
<a href="index.html">Living With Us</a>
<a href="contact.html">Meet The Staff</a>
<a href="calendar.html">Testimonials</a>
<a href="news.html">Photo Gallery</a>
<a href="index.html">Apartment Deals</a>
<a href="contact.html">Dining Services</a>
<a href="calendar.html">Amenities</a>
<a href="news.html">Location</a>
</li>
</ul>
</div>

</td>
</tr>
<tr>
<td height="20px" class="sidebar">
<div class="title">
Gallery
</div>
<div align="center">
<img src="../test/Images/photos/happy-home.jpg" width="131" height="86" />
</div>
</td>
</tr>
<tr>
<td height="100%" class="sidebar">
<div class="title">
Our Location
</div>
<div class="sidewriting">
11631 S 700 E <br />
Draper, UT 8402
<p>
<a href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=11631+S+700+E++Draper,+UT+8402&amp;sll=37.0625,-95.677068&amp;sspn=42.360237,93.076172&amp;ie=UTF8&amp;hq=&amp;hnear=11631+S+700+E,+Draper,+Salt+Lak e,+Utah+84020&amp;ll=40.540906,-111.870153&amp;spn=0.009963,0.022724&amp;z=16&amp;iwloc=A" target="_blank">Get Directions </a></p>
</div>
</td>
</tr>

.sidebar {
width:175px;
background:url(../images/sidebar.jpg) repeat-y;
vertical-align:top;
margin:auto;
}


.title {
background:url(../images/title.jpg) left no-repeat ;
height:30px;
padding:10px 0px 0 15px;
color:#FFF;
font-weight:bold;
vertical-align:top;
}

Thank you so much for looking at this

okay so i have page, i want it to build itself to encompass at the minimum 100% of the browsers height dynamically

i have seen a few methods of doing this via css and html and i have done it in the past without issue but now it wont do it anymore and im not sure why

so the site is www.wiffleague.com/main.php (you may have to maximize browser to see what i mean)

i want the footer section (at the bottom, the table with the copyright info in it) to always be bottom justified no matter the height of the rest of the page. currently what occurs is that if the page does not have enough content to fill the vertical height then it simply appends the footer section at the bottom of that and then a blank space under the footer.

I was wondering if anyone could help me.

I have two DIVs. One is 43px high and 100% width.
The second I want to be 100% high - 43 px.

Is there a way to do this with CSS without resorting to Javascript?

Many thanks.