CSS Solution

[mendipjohn]

Hi there, I have been webmaster for a non-profit organisation now for almost two years. I developed the original site with Dreamweaver in the days when I had no practical HTML knowledge, appreciation for compatibility/accessibility etc.

I want to replace the present site because it is frames based so can be a problem with browsers and search engines. I have basic HTML knowledge and have worked previously on a tables based design.

The tables based design addresses all my problems accept one - it is illegal to the W3C HTML spec.

This is because to get the appearance I want, I have used height="100%" or "width="100%" in some of my table tags. This does not conform to the HTML spec I am trying to work to, HTML 4.0 Transitional.

The tags work great to get the appearance when a browser is working in "quirks" rendering mode but using the standard it will not.

It seems the solution should be CSS style sheets. I have very very limited experience with these, and have tried (poorly) to recreate my tables appearance using CSS but just can't do it. The CSS I have used is an adaption of a friends CSS code with some of my own preferences.

As I say, when rendered in quirks mode, the tables layout works, but I want my code to be proper. See my Tables based design (link removed).

The problem with the CSS is that I want the header and side bar to be continuous in appearance, just like on the tables page and I do not want the main background to have that border effect. I want the green bars to form "solid sides" if that makes sense. CSS test page (link removed)

Any help would be greatly appreciated. This is not an urgent matter, but Its something I want to see right!

Edited August 22, 2006 by mendipjohn

[ripken204]

tables is illegal? where does it say that?

the w3c even has tables on there site...

http://www.w3.org/TR/html4/struct/tables.html

for height i dont think u can use a percentage but for width you can

css is soo easy. are you still using dreamweaver? if so then its even easier. the code shows when you start typing.

in ur css you need an align:center for you div.center

but i would highly suggest using tables.

[mendipjohn]

To clarify - your right, tables aren't illegal, i didn't say they were

But the use of height="100%" in the table tag is illegal as it only works when a browser renders a page in quirks mode and not in "standard" mode (where a full doctype is used and applied by the browser).

Also I get validation errors for width="100%" which is irritating as it is again a key part of my table structure.

I do still have Dreamweaver but I am such a novice at using it and am not a fan of using it given how it structures the code. I guess I could try it out to see what code it creates if I try and mimic my hand written design.

I am sure CSS is easy. I have used it before for basic text formatting and the likes but not for creating a layout. As can be seen, I had real problems getting the look I wanted.

I would happily learn CSS if anyone can recommend an easy to follow yet informative guide to it. I looked around on W3C and its all to technical for me, it explains how it works rather than how to write it.

I am willing to learn some CSS if it will help me get what I want to achieve, but can anyone be sure I will get my desired result?

Thanks.

Edited August 19, 2006 by mendipjohn

[ripken204]

well just use tables, width="100%" is perfectly fine, it doesnt give me errors when i use it.

here is just an example of some css in one of my sites

body{
	background-image: url(files/images/background.jpg);
	background-repeat: repeat-x;
	background-color:#7498eb; 
}
a.menu{
	text-decoration:none;
	color:#000000;
}
td.menu{
	background: url(files/images/menu3.gif);
}
td.menu:hover{ 
	background: url(files/images/menu3.gif) 0 -20px;
}
td.menu_title{
	background: url(files/images/menu3.gif) 0 -20px;
	font-size:14px;
	font-weight:bold;
}
.sky{
	background-image: url(files/images/sky.jpg);
	background-repeat: repeat-x; 
}
a.packageTitle{
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	color:#000000;
}
.card{
	text-decoration:none;
	color:#0066FF;
	font-size:14px;
	font-weight:bold;
}
.card:hover{
	color:#33CCFF;
}
.sub{
	font-size:12px;
	font-weight:bold;
}
.lititle{
	font-weight:bold;
	color:#0066FF;
	text-decoration:none;
}
.cardNL{
	text-decoration:none;
	color:#0066FF;
	font-size:14px;
	font-weight:bold;
}
.small{
	font-size:12px;
	font-style:italic;
}
.red{
	color:#CC3366;
	font-size:14px;
	font-weight:bold;
}
.subtitle{
	color:#0066FF;
	font-size:16px;
	font-weight:bold;
}
.title{
	color:#0066FF;
	font-size:24px;
	font-weight:bold;
}
.side{
	font-size:12px;
}
.bold{
	font-size:14px;
	font-weight:bold;
}

[mendipjohn]

Thanks for the reply, i will just use my tables for now then

I think I have found a way of solving this issues by adding another "bottom" table, which might effectively cause the "height="100%" appearance to occur without actually using it. Confusing I know, but it should work.

Thanks for the help!