tables to css problems

**SuperJ** · Apr 13, 2006 10:15

hi, Im trying to convert a site from a tables layout to a css layout. could someone give me a hand with a few issues?
Tables for layout version

and the CSS Version
issue 1 : in IE6 I cant seem to get rid of the gap between the header and the content / nav. seems fine in FF.
issue 2: what would be the best approach to deal with the gaps between the content / nav and footer? the tables version just 'stretches'

heres my css:

Code:

body{
	background-color:#666;
}
h2{
	text-align:center;
}
#header{
	text-align:center;
	height:202px;
}
#content{
	position:absolute;
	background-image:url('images/layout_04a.gif');
	background-repeat:no-repeat;
	background-color: #fff;
	padding-left:5px;
	width:526px;
	border-left:1px solid #000;
}

#wrapper{
	display: block;
    margin-left: auto;
    margin-right: auto;
	width:782px;
	
}
#nav{
	position:absolute;
	margin-left:527px;
	background-image:url('images/layout2_05.gif');
	background-repeat:no-repeat;
	background-color:#333;
	width:255px;
	
	color:#666;
}

a.nav:link,a.nav:visited{
	display:block;
	text-decoration:none;
	color:#666;
	width:95%;
	padding-left:10px;
	border-top:1px solid #000;
}
a.nav:hover{
	background-color:#633;
	color:#fff;
}
#footer{
	position:absolute;
	bottom:0;
	width:782px;
	text-align:center;
	height:100px;
}

and the html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<img src="images/skin_02.gif" width="782" height="202" alt="det-tox" >
	</div>
	<div id="content">
		<h2>...Future So Unclear</h2>
		<p>here we are then dfgdf dfgdfg fdgdafg dfg dfg
		fdsgdafg dfgd fag dfgd fag df gdfg dfg df gdf gdfgdf df gdfg dfg 
                dfgd fgdty sf dh ffh sgh sfh sgh
		sdfhsfh fshsfg hdsfghf</p>
		<p>here we are then dfgdf dfgdfg fdgdafg dfg dfg
		fdsgdafg dfgd fag dfgd fag df gdfg dfg df gdf gdfgdf df gdfg dfg 
                dfgd fgdty sf dh ffh sgh sfh sgh
		sdfhsfh fshsfg hdsfghf</p>
		<p>here we are then dfgdf dfgdfg fdgdafg dfg dfg
		fdsgdafg dfgd fag dfgd fag df gdfg dfg df gdf gdfgdf df gdfg dfg dfgd fgdty sf dh ffh sgh sfh sgh
		sdfhsfh fshsfg hdsfghf</p>
	</div>
	<div id="nav">
		
			<a class="nav" href="#">Home</a>
			<a class="nav" href="#">Band</a>
			<a class="nav" href="#">Multimedia</a>
			<a class="nav" href="#">Gallery</a>
			<a class="nav" href="#">Contact</a>
			<a class="nav" href="#">Links</a>
			<a class="nav" href="#">Administrator</a>
	</div>
	<div id="footer">
		<img src="images/foot.gif" width="782" height="100" alt="det-tox" >
	</div>
</div>
</body>
</html>

any help is MUCH appreciated

**newdaynewdawn** · Apr 13, 2006 11:36

Try this out for starters and some insight if you've never read it before...
http://www.sitepoint.com/article/exp...its-css-layout

Yeah I've fought that battle too many times. This might http://www.google.com/search?hl=en&q...=Google+Search have a nugget or two as well. I've tried javascript this and that and other headaches. Maybe just maybe about w3c css spec 4.3.5a01 or something with IE10 will finally get it all right.

Good Luck... only way alot of people must escape this thing is by being all the same color per se. While I haven't found it just yet I'm sure some brilliant CSSser has a viable workaround.

**inter4design** · Apr 13, 2006 11:56

try this

Code:

html,body{
	background-color:#666;
height: 100%;
}
h2{
	text-align:center;
}
#header{
	text-align:center;
	height:202px;
}
#content{
float: left;
	background-image:url('images/layout_04a.gif');
	background-repeat:no-repeat;
	background-color: #fff;
	padding-left:5px;
	width:526px;
	border-left:1px solid #000;
height: 100%;
}

#wrapper{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:782px;
height: 100%;
	
}
#nav{
float:left;
	background-image:url('images/layout2_05.gif');
	background-repeat:no-repeat;
	background-color:#333;
	width:250px;
	height: 100%;
	color:#666;
}

a.nav:link,a.nav:visited{
	display:block;
	text-decoration:none;
	color:#666;
	width:95%;
	padding-left:10px;
	border-top:1px solid #000;
}
a.nav:hover{
	background-color:#633;
	color:#fff;
}
#footer{
	width:782px;
	text-align:center;
	height:100px;
}

**newdaynewdawn** · Apr 13, 2006 12:49

Alright... inter4design you've got my early vote for CSS President. I have plugged that revamped CSS in and early returns look very profitable.

I shall play some more. I look it over to see what you ultimately had to change. This shall be GOLD if all my additional tests play out.

Much much early Thanks! ;-d

**Paul O'B** · Apr 13, 2006 14:15

Hi,

Although the above code is a good attempt

there are a number of serious flaws in the css.

You cannot specifiy 100% height and expect the height to automatically increase (except for ie6 and under). All other browsers will limit the layout to 100% and content will just spill out if its greater. Just add some content and you will see what I mean.

Also you cannot specify 100% and start the element 202px down the page because that will mean the 100% will extend 202px under the flod and the footer will be below the fold on short pages.

You need to specify 100% from the top of the page when you use it. The faq has a long entry on 100% height and how to put a footer at the bottom of the page and is worth reading as it covers all these concepts. The 3 cold demo sticky thread also has loads of layouts like this and example code to follow.

The basic premise is that you use min-height:100% for good browsers and height:100% for ie6 and under. However you only really get one shot at this as nested elements with min-height do not inherit 100% height and collapse to height auto.

The repeating column is best accomplished with a repeating image but this would be placed on the main wrapper because as I said before that is the only element that will hold 100% height. Therefore #wrapper contains the body colour for the right column and the repeating image for the right column.

Here is your code amended into a working example and a footer that is at the bottom of the window or at the bottom of the document if longer. Space is made for the footer by adding padding to the bottom of #main and then dragging the footer upwards into that space.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
/* mac hide \*/
html,body{ height: 100%;}
/* end hide */
body{ background-color:#666;}
h2{ text-align:center;}
#header{
 text-align:center;
 height:202px;
}
#header img{display:block;}
#content{
 float: left;
 background:#fff url('images/layout_04a.gif') no-repeat left top;
 padding-left:5px;
 width:522px;
}
#main{
 width:782px;
 padding-bottom:100px;/* space for footer*/
 clear:both;
}
.clearfix:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.clearfix {
	display:inline-block;
}
 /* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
#wrapper{
 margin-left: auto;
 margin-right: auto;
 width:782px;
 min-height: 100%;
 background:#fff url('images/layout2_05.gif') repeat-y right top;
 position:relative;
}
/* mac hide  \*/
* html #wrapper{height:100%}
/* end hide*/
#nav{
 float:left;
 background-color:#333;
 width:255px;
 color:#666;
 list-style:none;
 margin:0;
 padding:0
}
#nav a:link,#nav a:visited{
 display:block;
 text-decoration:none;
 color:#666;
 width:245px;
 padding-left:10px;
 border-top:1px solid #000;
}
#nav a:hover{
 background-color:#633;
 color:#fff;
}
#footer{
 width:782px;
 text-align:center;
 height:100px;
 clear:both;
 margin:-100px auto 0;
position:relative;
}
#footer img{display:block}
</style>
</head>
<body>
<div id="wrapper">
 <div id="header"><img src="images/skin_02.gif" width="782" height="202" alt="det-tox" /></div>
 <div id="main" class="clearfix">
  <div id="content">
   <h2>...Future So Unclear</h2>
   <p>here we are then dfgdf dfgdfg fdgdafg dfg dfg fdsgdafg dfgd fag dfgd fag df gdfg dfg df gdf gdfgdf df gdfg dfg dfgd fgdty sf dh ffh sgh sfh sgh sdfhsfh fshsfg hdsfghf</p>
   <p>here we are then dfgdf dfgdfg fdgdafg dfg dfg fdsgdafg dfgd fag dfgd fag df gdfg dfg df gdf gdfgdf df gdfg dfg dfgd fgdty sf dh ffh sgh sfh sgh sdfhsfh fshsfg hdsfghf</p>
   <p>here we are then dfgdf dfgdfg fdgdafg dfg dfg fdsgdafg dfgd fag dfgd fag df gdfg dfg df gdf gdfgdf df gdfg dfg dfgd fgdty sf dh ffh sgh sfh sgh sdfhsfh fshsfg hdsfghf</p>
  </div>
  <ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">Band</a></li>
   <li><a href="#">Multimedia</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Links</a></li>
   <li><a href="#">Administrator</a></li>
  </ul>
 </div>
</div>
<div id="footer"><img src="images/foot.gif" width="782" height="100" alt="det-tox" /></div>
</body>
</html>

The gaps in the header were fixed by setting the images to display:blocvk which stops them being treated as text and so o room is left underneath for descenders.

The code is validated and tested in ie6, firefox and opera. the only thing you need to do is to do the box model hacks for ie5 and 5.5 (see faq).

Read the faq on 100% and the explanations in the 3 col demo for more info.

Hope that helps

**newdaynewdawn** · Apr 14, 2006 06:21

Hey Paul... I thought (if I didn't misread it) that SuperJ's objective was to ultimately get the black nav block to automatically stretch and be as tall/long as the content? At least that was what I gathered he wanted to achieve by looking at the table vs css version in (firefox and ie6).

If that was the goal then it appears we still haven't quite made it to port yet. Unless of course I misunderstood the point you were attempting to illustrate?

**Paul O'B** · Apr 14, 2006 07:45

If that was the goal then it appears we still haven't quite made it to port yet. Unless of course I misunderstood the point you were attempting to illustra

My code does that

http://www.pmob.co.uk/temp/images/superj.jpg

**SuperJ** · Apr 14, 2006 07:47

wow! guys thanks for the work put in here, really appreciated.
yeah, I was 'trying' to stretch the Nav column down with the content.
inter4design that code

I tried it out, I'm gonna go through it later as well coz its nice, Had the gaps in IE6 under the header but Pauls #header img{display:block;} sorted that out, thanks m8. The only bit was if you add more content the Nav will only go so far then stop, but the rest seems to stretch fine with IE6, in FF the extra content goes under the footer and carries on down the page, maybe its fixable though.

Paul, thanks again, the only prob I could see was the nav column: I was hoping I could get the image at the top with no repeat and just fill the rest of the column with grey to scale with the content, just now the nav image appears just under the last menu option. If I add more content to your code the nav column image repeats down, although it does scale with the content.
Thats a good article as well, cheers I'll have a good read of it coz a lot of your code is new to me.

it cant be too far away.
both you guys code was really good but do you guys not think that a table is so much easier to accomplish this!

**Paul O'B** · Apr 14, 2006 07:56

both you guys code was really good but do you guys not think that a table is so much easier to accomplish this!

It took me less than 5 minutes to do that layout. Can you do that faster with tables - I doubt it lol

. Have you tried a 100% table in standards mode anyway? They don't work unless you are very careful.

http://www.pmob.co.uk/temp/images/superj.jpg

The right nav column is the repeated background image which will always give you the full length column no matter how much content you have.

I used your existing image because I didn't want to make my own. You should make yourself an image that you want the background colour to be and then repeat it as I have done.

If your top right nav image is supposed to be different some how (although I couldn't see it if it was and I have a brand new expensive monitor) then you simply place that image in the background of the right column. I couldn't read the right column text either as there was not enough contrast.

Everything you need is in that example I gave you and you must use the techniques I have shown and explained.

the code is tried and tested and you can see form the jpg that it works

Hope it helps

**Paul O'B** · Apr 14, 2006 08:05

in FF the extra content goes under the footer and carries on down the page, maybe its fixable though.

No its not fixable and uses incorrect code to achieve this effect for all the reasons I explained in my previous post

. You cannot just splash 100% heights around like that and expect the browser to understand you want something else like "please start from here which is a bit down from the top and then just go teh bottom which may be the bottom of the viewport or it may be the bottom of the document depending on what's longer".

100%:height just means 100% of the parent (as long as the parent's height is defined) no more - no less. Which is why you must use one of the techniques I've shown or techniques from the links I gave.

Read the faq on 100% height ans putting a footer at the bottom of that window otherwise you will just go around in cirlcels and keep saying "this was easier in tables" when in fact its just common-sense

**SuperJ** · Apr 14, 2006 08:36