Replacing 100% tables with CSS

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 396,896 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,009 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 3088 | Replies: 1

Previous Post in Thread

Next Post in Thread

•

Join Date: May 2005

Posts: 1

Reputation: mister is an unknown quantity at this point

Rep Power: 0

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