Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 3276 | Replies: 1
 |
•
•
•
•
| |
•
•
Join Date: May 2005
Posts: 1
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
•
•
Join Date: Jul 2004
Location: Wales
Posts: 735
Reputation:
Rep Power: 6
Solved Threads: 17
Master Poster
Have a read over here: http://www.quirksmode.org/css/100percheight.html
I can't get it to be exactly what you want, but some of his examples do...
I can't get it to be exactly what you want, but some of his examples do...
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Hybrid Mode