homepage Welcome to WebmasterWorld Guest from 54.226.10.234
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Vertical Centering CSS
Why this white gap at bottom?
Kickedout

5+ Year Member



 
Msg#: 4332833 posted 1:09 am on Jun 30, 2011 (gmt 0)

I have css style


.tablas {
height: 100%;
}

body {
margin: 70px 0px 0px 0px;
padding: 0px;
background-repeat: no-repeat;
background-position: left top;
height: 100%;
}

html {
height: 100%;
}


html code:


<table width=100% border=0 cellpadding=0 cellspacing=0 class=tablas><tr><td><table width=90% border=0 align=center cellpadding=0 cellspacing=5 class=tablas><tr><td colspan=2 valign=top><h1><b>Bla </b></h1>

And inside that one another table class=tablas


Am I missing something? Because a whitespace of some 100 px is on bottom of page. Thus table doesn't expand vertically to 100% of height

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4332833 posted 3:54 am on Jun 30, 2011 (gmt 0)

It saves a lot of time if you first run your page through the w3c validators for both HTML and CSS, and start by fixing those errors. Or ask for help if there's a validation error you really don't understand.

100% doesn't mean 100% of the window height. It means 100% of the containing block, whose size is determined by its content unless you have it set in pixels. There are several recent threads involving "sticky footers" that present different ways of forcing things all the way to the bottom of the window.

I suppose it is Not Nice to ask why you have that
<table width=100% border=0 cellpadding=0 cellspacing=0 class=tablas>
(should all be inside quotes, btw) business when you have a perfectly decent stylesheet right there. Use it!

Set a default table
{border: none; border-collapse: collapse;}
or
{border-collapse: separate; border-spacing: 5px;}
or whatever you will use most often, and make classes for other styles.

And a default cell
{padding: 0; text-align: left; vertical-align: top;}
supplemented by
td.center {text-align: center;}
td.right {text-align: right;}
and so on.

If a class is only going to be used with tables, define it as
table.tablas {blahblah}
to make the CSS run more smoothly.

Oh, and prepare for rude questions about why you are using tables for format ;)

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4332833 posted 3:57 pm on Jun 30, 2011 (gmt 0)

If it's the only thing on the page, it won't. You could use position: absolute to position the table to the bottom of the viewport.

Otherwise, (and may still have to do this) if there's content to fill the page and it's still got a space, try adding

h1 { margin-bottom:0; padding-bottom:0; }

You might also use something besides h1 and style it as you need it, h1's are the top level head and **should** be at the top of the page, and only one on the page.

Kickedout

5+ Year Member



 
Msg#: 4332833 posted 9:03 pm on Jun 30, 2011 (gmt 0)

Thanks, that site has like 10 years online. I don't even remember the existance of divs when created. Years later was "updated" but the main structure wasn't moved to all css, because is a real pain to move the entire structure.

I do have content inside tables (not included for this example) but table don't reach the bottom of page as described. The ausence of "" was caused by a code "zipper" program that trimmed out spaces and unfortunatelly "" too.

Now is literally impossible to restore those on 300 pages of code.
No joy this far with prior suggestions

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4332833 posted 9:21 pm on Jun 30, 2011 (gmt 0)

OK for a start I can't see the bottom whitespace "gap" that you're mentioning, I would not recommend absolute positioning, and I see no validation errors.

So this prompts the question, which browsers are you seeing your gap, and which browsers show what you expect.. I do see different things in IE7/8, and Firefox for example.

so the issue here is I think how to get the desired 100% height inherited down through the elements. for example in IE the first (parent) table (class=tablas) does inherit the 100% height from the
html & body elements, but the nested tables don't. whereas in Firefox they do

Is that what you mean about the bottom gap?

code as read form your OP


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; height: 100%; background: #fff;}

body {
margin: 70px 0px 0px 0px;
padding: 0px;
background: #eee;
}

.tablas {
height: 100%;
border: 3px double #000;
}

</style>
</head>
<body>


<table width=100% border=0 cellpadding=0 cellspacing=0 class=tablas>
<tr>
<td>
<table width=90% border=0 align=center cellpadding=0 cellspacing=5 class=tablas>
<tr>
<td valign=top><h1><b>Bla </b></h1></td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved