Jump to content

Element Not Expanding To Full Body Height


LaLaLa

Recommended Posts

I am attempting to vertically center everything on a page. I am currently using tables for this (I know I will be reprimanded for this, but I believe it is a valid use), by setting the width and height of a table/td to 100% in which everything else is nested. When I remove the doc-type it renders fine, but when I use XHTML 1.1, the table (and I tried this with div's) refuse to expand. I have tried this in both IE8 and FF3. It is ridiculous as they all do width-wise, but not height-wise. Does anyone know how to accomplish such a thing; perhaps without tables?Here is a basic layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><body><table style="height:100%;width:100%;"><tr><td stlye="height:100%;width:100%;"><NESTED BODY ELEMENTS></td></tr></table></body></html>

Link to comment
Share on other sites

hey runescape man, check my account, smerny.... msg me sometime i'll let you borrow a phat or somethingwhat are you trying to get centered vertically btw?

Link to comment
Share on other sites

hey runescape man, check my account, smerny.... msg me sometime i'll let you borrow a phat or somethingwhat are you trying to get centered vertically btw?
I'm trying to get everything on the page (say an image an text below it) centered in the browser both vertically and horizontally.
Link to comment
Share on other sites

try not doing the 100% tables... and just putting all of your content in a div with set width and height... and style="margin:auto;"

Link to comment
Share on other sites

try not doing the 100% tables... and just putting all of your content in a div with set width and height... and style="margin:auto;"
"margin:auto;" only sets the margin to the browser default, so really nothing, and I don't know the exact height (in px) of every page which is why I want the browser to automatically handle it. Your idea would work if I knew the exact height of all the pages. Thanks, though.And what was that about a party hat lol?
Link to comment
Share on other sites

Hmm.. well I'm not sure how you would do that, but since no one else is answering the only thing I can think of is to play around with fixed position... something like...CSS

#center{  height:0px;  width:0px;  position:fixed;  top:50%;  left:50%;}#container{  background-color: #999;  position:absolute;  height: 250px;  width: 250px;  top: -125px; /*half the height*/  left: -125px; /*half the width*/}

HTML

<body>  <div id="center"><div id="container">Blah blah</div></div></body>

oh, and add me (smerny) on rs and msg me if you see me online and i'll let you borrow a party hat or something if you want

Link to comment
Share on other sites

Hmm.. well I'm not sure how you would do that, but since no one else is answering the only thing I can think of is to play around with fixed position... something like...CSS
#center{  height:0px;  width:0px;  position:fixed;  top:50%;  left:50%;}#container{  background-color: #999;  position:absolute;  height: 250px;  width: 250px;  top: -125px; /*half the height*/  left: -125px; /*half the width*/}

HTML

<body>  <div id="center"><div id="container">Blah blah</div></div></body>

oh, and add me (smerny) on rs and msg me if you see me online and i'll let you borrow a party hat or something if you want

Well... this doesn't work for a couple of reasons. First, like I said earlier, I don't know the height of the different pages (for my entire website), and I want the browser to handle that. Second, even if I did make up heights for each individual page, if the content is taller than the window, it doesn't scroll vertically and things get cut off on the top and bottom. I really don't think there is a way to do this with CSS, so I'm just going to manually set the body padding and have JavaScript set the container table to the client width and height. It's not what I wanted to do but I don't believe there are any other options.Also, I don't get on RuneScape much anymore, but I will add you.
Link to comment
Share on other sites

Hey,Try this (not sure if it works, but it works for centerizing horizontal):

.container {margin: auto auto auto auto;width: 100px;height: 100px;}

<body><div class="container">Text</div></body>

Link to comment
Share on other sites

Hey,Try this (not sure if it works, but it works for centerizing horizontal):
.container {margin: auto auto auto auto;width: 100px;height: 100px;}

<body><div class="container">Text</div></body>

Umm... as I have previously stated probably 4 times, I do not know the width or height of the elements.
Link to comment
Share on other sites

could you set border-top and border bottom as a %'s?for instance, have the body take up up 100% height and width wise, and then have a container div within that and set its top and bottom margins to like 25% each or something. can't say if it will work, im at work right now and just throwing that idea out there.

Link to comment
Share on other sites

Is this what you are looking for?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><style>html, body { height: 100%; }#container{ background-color: #999; height: 250px; width: 250px; }</style></head><body><table style="height:100%;width:100%;"><tr><td valign="middle" align="center"><div id="center"><div id="container">Blah blah</div></div></td></tr></table></body></html>works in IE 6,7: opera 9.63: FF 3.0.10 and Chrome

Link to comment
Share on other sites

based on his requirements, you can't define the containing div because the height of the image/content is variable per page.

Link to comment
Share on other sites

start with this.... size the container per page or whatever... just edited out some unnecessaries dson left

Is this what you are looking for?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><style>html, body { height: 100%; }#container{ background-color: #999; }</style><body><table style="height:100%;width:100%;"><tr><td valign="middle" align="center"><div id="container">Blah blah</div></td></tr></table></body></html>works in IE 6,7: opera 9.63: FF 3.0.10 and Chrome
Link to comment
Share on other sites

I have been experimenting with smerny div solution, it seems to work with all browser except with IE 6 (nothing new there) swapping the values for margins and top left, and adding few more div's it seems to work for all browsers see below<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">html, body { height: 100%; }#center{position:absolute; margin-top: -125px; /*adjust to half of container height */margin-left: -125px; /*adjust to half of container width */left: 50%; top: 50%;}#container{ background-color: #999; height: 250px; /*adjust to image/content */ width: 250px; /*adjust to image/content */ }</style></head><body><div style="height:100%; width:100%;"><div style="height: inherit;"><div id="center"><div id="container">Blah blah</div></div></div></div></body></html>works in IE 6,7: opera 9.63: FF 3.0.10 and Chrome

Link to comment
Share on other sites

Sorry, but I refuse to manually set the div heights for each of some 30 gallery pages (that's why I'm using PHP to generate them to begin with). I was even going to use JavaScript, but with XHTML 1.1 (strict), the functions to find the window height are all different in browsers. Sometimes, for example, document.body.clientHeight will actually give you the page height, sometimes only the height of the actually document. Between IE6, 7, 8, and FF it is almost impossible.Therefore, I am simply leaving it alone and saying whoever came up with the idea to prevent height:100%; from working in strict doc-types is an idiot...Thank you for the ideas though.

Link to comment
Share on other sites

This code works well for IE7, IE8, Firefox, Chrome and Safari for Windows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html>  <head>    <title>All XHTML documents require a head and title element</title>    <style type="text/css">      html,body { height: 100%;}      #wrapper, #wrapper tr, #wrapper td { height: 100%; }      #wrapper td { vertical-align: middle; }    </style>  </head><body><table id="wrapper"><tr><td><NESTED BODY ELEMENTS></td></tr></table></body></html>

Link to comment
Share on other sites

This code works well for IE7, IE8, Firefox, Chrome and Safari for Windows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html>  <head>    <title>All XHTML documents require a head and title element</title>    <style type="text/css">      html,body { height: 100%;}      #wrapper, #wrapper tr, #wrapper td { height: 100%; }      #wrapper td { vertical-align: middle; }    </style>  </head><body><table id="wrapper"><tr><td><NESTED BODY ELEMENTS></td></tr></table></body></html>

Ah-Ha! I never thought about setting the height of the <html> tag (although having to do so makes no sense). Thank you, this works perfectly.
Link to comment
Share on other sites

here you are! div setup using html,body 100%(which I used first in an example i might add),and using self adjusting margins using javascript DOM where you dynamically add content and the adjustments are automatic! (well as long as js is enabled of course)After testing with chrome it did not display as the other browsers (there's always one) if anyone knows of a fix please supply fix note chrome hackdocument.write("body:nth-of-type(1) #center { margin: -"+(x+30)+"px 0 0 -"+(y+30)+"px !important; }"); screws up opera as well.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">html, body { height: 100%; }.outer {height: 100%; width: 100%;}.inner { height: inherit;}#center{position:absolute; left: 50%; top: 50%;}#container{ background-color: #999;}</style></head><body><div class="outer"><div class="inner"><div id="center"><div id="container">Blah blah</div></div></div></div><script type="text/javascript"><!--//--><![CDATA[//><!--getDimensions()function getDimensions(){var y=document.getElementById("center").offsetHeight;var x=document.getElementById("center").offsetWidth;//alert("width: "+x+"; Height: "+y+";")document.write("<style type='text/css'>");document.write("#center { margin: -"+(y/2)+"px 0 0 -"+(x/2)+"px; }");var browser=navigator.appName;var b_version=navigator.appVersion;var version=parseFloat(b_version);//alert(browser +" : "+ version)document.write("</style>");}//--><!]]></script></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...