AJAX

Replacing 100% tables with CSS

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: May 2005

Posts: 1

Reputation: mister is an unknown quantity at this point

Solved Threads: 0

mister

Offline

Newbie Poster

Replacing 100% tables with CSS

May 16th, 2005

Hello, thanks for taking the time to read my query.

I've basically got a page (dark grey) with a panel that sits in it (light grey).. this fills the screen, except for a 16px gap around the edge which allowed the dark grey (from the body tag) to show through.

Easy with HTML4... <body leftmargin="16" topmargin="16" rightmargin="16" bottommargin="16" marginwidth="16" marginheight="16"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">.. this structure would give me what I wanted (obviously with colours added).

However I'm trying to reproduce this with transitional xhtml and css. Sooo I tried this in the CSS...

body{
background-color: #526B75;
background-repeat : repeat-x;
background-image: url(../images/top-background.gif);
font-family: arial, helvetica, geneva, verdana, sans-serif;
font-size: 12px;
font-weight: normal;
padding: 16px;
margin: 0px;

}

#holdall{
position:relative;
top: 0px;
left: 0px;
width:100%;
height:100%;
margin:0px;
padding:0px;
background-color: #DCE1E3;
}

and some xhtml that roughly boiled down equalled...<body><div id="holdall"> content</div></body>

However, although the light grey panel is displayed fine, the height is all wrong causing scroll bars to appear. I thought the CSS for the 'holdall' div being set to 'relative' would measure the height available within the 'body' tag but it appears not.

Does anybody have any ideas how to fix this or a different way of approaching this? I did an alternative way using javascript to redraw divs to the correct size and position.. but surely this isn't required.

Many thanks,
Meeesta