Table and font-size

[Mr_CHISOL]

Hi!I'm working on a layout/template for a site that uses Joomla! (a CMSI).The CSS I'm using is written by another person (that's not in the development anymore) and I don't feel like going thru the CSS and/or rewriting it all so it is a bit (not much) messy...The main problem (as usual!?) is inheritance and tables. I don't like tables and try to avoid them as far as possible, but I don't feel like going thru the source for joomla! to remove them...I had the font-size "tamed" for a while, and it look good (both in IE and FF), but then I was going to change the look of the "page titles" (as they look as normal text) and then everything seemed to break.. (not EVERYthing...)the CSS I added was this:

/*	Design Altered by Christopher Hindefjord (ch@kachtus.net) to be	 compatible with Joomla as an template.	Design Anpassad för Joomla (som "mall") av Christopher Hindefjord	  (ch@kachtus.net). */* {	margin: 0;	padding: 0; }div, td p{font-size: 1em !important;}html {	height: 100%; }body {	font-size: 100%;	/*background: #AECEDD url(../images/body_bg.gif) repeat-x; fixed;*/	background: #DBECF3 url('../images/body_bg.png') repeat-x center top;	background-attachment: fixed;	font-family: verdana, helvetica, sans-serif;	margin-top: 7px;	color: #000;	height: 100%;	margin-bottom: 1px;	text-align: center; /** Center hack (IE) **/ }#wrap {	/*background: #dbedf2;*/	width: 764px;	min-height: 470px;	height:100% !important;	height:1%;	margin: 0 auto;	color: #000;	padding-bottom: 0px;	text-align: left;	z-index:9; }#header {	/*background-image: url('../images/head_bg.png');*/	background-image: url('../images/top_bg.png');	width: 100%;	height: 124px;	z-index:10; }	img.logo {	float: left;	margin: 51px 0 0 30px; }	img.hus {	float: left;	margin: 34px 0 0 21px; }#toprow {	font: .7em "trebuchet ms", arial, helvetica, sans-serif;	background: #DBEDF2; /*url('../images/toprow_bg.gif');*/	height: 45px;	padding: 0;	color: #000;/*	border: 2px solid #22A;*/ }#page {	background: #dbedf2 url('../images/page_bg.png') left top repeat-y;	min-height: 333px;	display: table; /** UGLY hack... Fult "hack"  (IE) **/	width: 100%;	margin: 0 0 0 0;	color: #000;	z-index:8;	height: 100% !important;	height: 1%;	display: table;/*	border: 2px solid #000;*//*	margin-bottom: 1px;*/ }#col_left {	z-index: 9;	min-height: 333px;	height: 100% !important;	height: 1%;	display: table; 	color: #000;/*border: 2px solid #D0F;*/	float: left;	width: 169px;	padding: 0 0 0 0px;	background: url('../images/left_bg.png'); }#col_left #top {	background: url('../images/left_top.png');	width: 169px;	height: 42px;	margin: 0px; }#col_left #content {	position: relative;	top: -39px;	width: 168px;	margin: 0px; }#col_main {	z-index: 10;	float: left;	width: 420px !important;	width: 420px;	max-width: 420px;	padding-left: 1px; }#col_main .moduletable {	z-index: 11;	margin: 0px;	padding-left: 1px; }#col_main #content {	z-index: 11;	margin: 0 -5px 0 0px;	padding-left: 0px;	padding: 12px;	font-size: 1em;	max-width: 417px; }#col_main table tbody td {	padding-right: 0px; }#col_right{	display: block;	z-index: 12;	float: right;	width: 146px;	max-width: 150px;	/*min-height: 160px;*/	height: 100% !important;	height: 1%;	display: table;/**	padding: 0 2px 0 0;*/	background: url('../images/right_bg.png'); }#col_right #top {	background: url('../images/right_top.png');	width: 145px;	height: 42px;	margin: 0px; }#col_right #content {	position: relative;	top: -39px;	width: 145px;	margin: 0px; }#footer{	width: 100%;	height: 42px;	font-size: 0.6em;	padding: 21px 0 8px 0;	clear: both;	text-align: center;	background: #DBEDF2 url('../images/footer.png') left top no-repeat;	color: #000; }	#footer hr{		display: none;	 }textarea {	max-width: 423px; }.textbox{	margin: 0 17px 0 17px;}.textbox_col{	margin: 0 7px 0 7px;}#col_left .moduletable,#col_right .moduletable {	padding-left: 4px;	padding-left: 4px; }#col_left .moduletable:after,#col_right .moduletable:after {	display: block;	content: " ";	height: 1px;/*	width: 90%;*/	margin: 3px 6px 3px 5px;	border-bottom: 1px solid #BBF; }.intender {	font-size: 1pt;	width: 9px; }/* Standard ----------------------------------------------------------- */p {	color: #5B5B5B;	margin: 0 0 1.4em 0;	font: .7em/1.3em verdana, helvetica, sans-serif; }div { /* Samma som p ovan, men utan margin (sabbar designen...), anpassning för joomla  */	color: #5B5B5B;	font: .6em verdana, helvetica, sans-serif;  }#col_main table tbody td table td {	color: #5B5B5B;	padding: 12px;	padding-right: 20px;	margin-right: 17px; }#col_main table tbody td {	font-size: 0.8em;}#col_main div {	font-size: 0.8em; }td {	font-size: 0.9em; }td h1 {	font-weight: bold;	font-size: 1.9em; }/* Contenttabell ------------------------------------------------------ */.contentpaneopen {	border-bottom: 1px solid #eef;	width: 100%;	border-collapse: collapse; }.contentpaneopen td {	margin-left: 0px;	margin-right: -6px; }.contentpaneopen td.contentheading,.contentpaneopen td.buttonheading {	border-bottom: 1px solid #ccf;	margin-right: -6px: }/* Standardtext ------------------------------------------------------- *//** NOTE: THE ONE ABOVE **/h1, .componentheading, .contentheading,td.componentheading, td.contentheading {	font-weight: bold;	font-size: 1.9em !important;	font-size: 1.9em;	font-family: "trebuchet ms", verdana, arial, sans-serif;	color: #000;	padding: 2px 0 2px 0;	margin: 0 0 .3em 0; }h2 {	font: bold 1.0em "trebuchet ms", verdana, arial, sans-serif;	color: #000;	margin: .6em 0 .3em 0; }h3 {	font: bold .8em tahoma, "trebuchet ms", verdana, arial, sans-serif;	margin: .6em 0 .3em 0;	color: #000; }#col_left p, #col_left table, #col_right p {	margin-left: 15px; }#col_left table {	font-size: 0.9em; }.coltitle, .moduletable h3 {	font: bold .7em "trebuchet ms", verdana, arial, sans-serif;	margin: 0 0 .1em 0;	padding: 5px 0 2px 0;	text-indent: 8px;	color: #000;	background: url('../images/coltitle_bg.png') left center; }.quoted {	display: block;	text-align: right;	font-style: italic;	margin-right: 10px; }/*/Standardtext ------------------------------------------------------- */a{	/*text-decoration: none;*/}a:link{ color: #126DB6;}a:visited{ color: #126DB6;}a:hover{ color: #505050;}a:active{ color: #126DB6;}/* Sektioner/Topp-meny ----- */#buttons_inner {	/*vertical-align: middle;*/ }#topmenu {/*	border: 2px solid #AFA;*/	width: 764px;	background: url('../images/topmenu_bg.png');	float: left;	height: 24px;/*	margin-top: 0px;*/	vertical-align: middle;	clear: right;	z-index: 1;	margin-bottom: -1px; }#topmenu ul {	height: 24px;	margin: 0;	padding: 0;	vertical-align: middle;	text-align: center;	clear: right;	margin-left: 14px; }#topmenu li {	display: block;	width: 119px;	height:18px;	font-size: 1em;	float: left;	vertical-align: middle;	text-align: center;/*	list-style: list-style-image;	list-style-image: url('../images/ico_menulink.gif');* /	margin: auto;*/	margin: 0px;	padding-top: 4px; }#topmenu a,#topmenu a:visited,#topmenu span {	text-decoration: none; }#topmenu ul#mainlevel li.mainlevel,#topmenu ul#mainlevel li.mainlevel_current {	background: url('../images/knapp.png');	font-size: 0.9em; }#top_submenu {	width: 755px;	height: 18px;	margin-bottom: -3px; }#top_submenu ul#mainlevel,#top_submenu ul#mainlevel_1,#top_submenu ul#mainlevel_2,#top_submenu ul#mainlevel_3,#top_submenu ul#mainlevel_4,#top_submenu ul#mainlevel_5,#top_submenu ul#mainlevel_6 {	clear: left;	float: left;	width: 759px;	height: 17px;	padding-top: 6px;	margin-top: -1px;	z-index: 2;}#top_submenu ul#mainlevel_1 {	background: #FFF url('../images/bar_1.png'); }#top_submenu ul#mainlevel_2 {	background: #FFF url('../images/bar_2.png'); }#top_submenu ul#mainlevel_3 {	background: #FFF url('../images/bar_3.png'); }#top_submenu ul#mainlevel_4 {	background: #FFF url('../images/bar_4.png'); }#top_submenu ul#mainlevel_5 {	background: #FFF url('../images/bar_5.png'); }#top_submenu ul#mainlevel_6 {	background: #FFF url('../images/bar_6.png'); }#top_submenu ul {/*	border: 1px solid #AAA;*/	display: block;	height: 15px;	width: 100%;	margin: 0;	padding: 1px 0px 0px 5px;	list-style-type: none;	vertical-align: middle;	z-index: 3; }/*#top_submenu li ul ul {	margin: -1.3em 0 0 13em;		/* Ev. en offset på menyn * /}*/#top_submenu a,#top_submenu a:visited,#top_submenu span {	color: #000;/*	border: 2px solid #000;*/	display: block;/*	width: 10em;*/	text-decoration: none;	padding: 0 0 0 5px;	margin: 0 12px 0px 0;	vertical-align: middle;	font-size: 0.8em;	z-index: 2;/*	background: url('../images/ico_menulink.png') no-repeat 1px 3px;*/ }#top_submenu li {	float: left;/*	width: 9em;**/	z-index: 3; }#top_submenu li ul {	position: absolute;	width: 12em;	left: -999em;	background: #dbedf2;	border: 1px solid #ABD;	border-top: none;	padding: 0px 0px 0px 0px;	line-height: 1;	z-index: 3;/*	display: block;*/ }#top_submenu ul#mainlevel li.mainlevel,#top_submenu ul#mainlevel li.mainlevel_1,#top_submenu ul#mainlevel_1 li.mainlevel,#top_submenu ul#mainlevel_1 li.mainlevel_1, #top_submenu ul#mainlevel li.mainlevel_2,#top_submenu ul#mainlevel_2 li.mainlevel,#top_submenu ul#mainlevel_2 li.mainlevel_2, #top_submenu ul#mainlevel li.mainlevel_3,#top_submenu ul#mainlevel_3 li.mainlevel,#top_submenu ul#mainlevel_3 li.mainlevel_3, #top_submenu ul#mainlevel li.mainlevel_4,#top_submenu ul#mainlevel_4 li.mainlevel,#top_submenu ul#mainlevel_4 li.mainlevel_4, #top_submenu ul#mainlevel li.mainlevel_5,#top_submenu ul#mainlevel_5 li.mainlevel,#top_submenu ul#mainlevel_5 li.mainlevel_5, #top_submenu ul#mainlevel li.mainlevel_6,#top_submenu ul#mainlevel_6 li.mainlevel,#top_submenu ul#mainlevel_6 li.mainlevel_6 {	/*border: 1px solid #FFF;*/	height: 15px;/*	vertical-align: middle;*/	/*padding-top: -1px;*/	padding-bottom: 1px;	display: block;	margin-right: 10px;	z-index: 3; }#top_submenu ul#mainlevel ul,#top_submenu ul#mainlevel_1 ul,#top_submenu ul#mainlevel_2 ul,#top_submenu ul#mainlevel_3 ul,#top_submenu ul#mainlevel_4 ul,#top_submenu ul#mainlevel_5 ul,#top_submenu ul#mainlevel_6 ul {	z-index: 3;	height: auto; }#top_submenu ul#mainlevel li.mainlevel:hover,#top_submenu ul#mainlevel li.mainlevel.sfhover,#top_submenu ul#mainlevel_1 li.mainlevel_1:hover,#top_submenu ul#mainlevel_1 li.mainlevel_1.sfhover,#top_submenu ul#mainlevel_2 li.mainlevel_2:hover,#top_submenu ul#mainlevel_2 li.mainlevel_2.sfhover,#top_submenu ul#mainlevel_3 li.mainlevel_3:hover,#top_submenu ul#mainlevel_3 li.mainlevel_3.sfhover,#top_submenu ul#mainlevel_4 li.mainlevel_4:hover,#top_submenu ul#mainlevel_4 li.mainlevel_4.sfhover,#top_submenu ul#mainlevel_5 li.mainlevel_5:hover,#top_submenu ul#mainlevel_5 li.mainlevel_5.sfhover,#top_submenu ul#mainlevel_6 li.mainlevel_6:hover,#top_submenu ul#mainlevel_6 li.mainlevel_6.sfhover {	/*border: 1px solid #AAD;	background-color: #dbedf2;	margin-right: 8px;*/ }#top_submenu li.sublevel,#top_submenu li.sublevel_1,#top_submenu li.sublevel_2,#top_submenu li.sublevel_3,#top_submenu li.sublevel_4,#top_submenu li.sublevel_5,#top_submenu li.sublevel_6 {	display: block;	border-top: 1px solid #ABD;	height: 1.5em;	width: 12em;	padding-top: 4px;	z-index: 2; }#top_submenu li:hover ul,#top_submenu li.sfhover ul {	margin-top: 3px;	margin-left: -1px;	left: auto; }#top_submenu li.sublevel:hover,#top_submenu li.sublevel.sfhover,#top_submenu li.sublevel_1:hover,#top_submenu li.sublevel_1.sfhover,#top_submenu li.sublevel_2:hover,#top_submenu li.sublevel_2.sfhover,#top_submenu li.sublevel_3:hover,#top_submenu li.sublevel_3.sfhover,#top_submenu li.sublevel_4:hover,#top_submenu li.sublevel_4.sfhover,#top_submenu li.sublevel_5:hover,#top_submenu li.sublevel_5.sfhover,#top_submenu li.sublevel_6:hover,#top_submenu li.sublevel_6.sfhover	 {	background: #f2f9fb; }#top_submenu li ul li a,#top_submenu li ul li span {	width: 12em;	z-index: 2; }#top_submenu a:hover {	color: #AA0077;	/*text-decoration: underline;*/	/* offseta bakgrundsbilden vid hover */	background-position: 1px -21px; }#top_submenu a#active_menu-nav {	font-weight: 600;}#telefon {	margin: 6px 10px 0px 0px;	padding-left: 10px;	float: right;	vertical-align: middle;	text-align: center;	background: url('../images/ico_telefon.gif') no-repeat 1px 3px; }/* Kalender ------------------------- */.calendar {	margin-top: 5px;	margin-left: -2px;	font-size: 0.7em;	background-color: #fff;	width: 135px; }.calendar caption {	background-color: #FFF;	margin-bottom: -5px;	margin-left: -2px;	padding-top: 2px;	padding-bottom: 5px;	font-weight: bold; }.calendar-prev, .calendar-next {	font-weight: normal; }.calendar td/*, .calendar th*/ {	padding: 0px;	margin-bottom: 3px;	text-align: center;	vertical-align: middle;	background-image: url('../images/kalenderplupp_0.gif');	background-repeat: no-repeat;	width: 16px;	height: 16px; }.calendar td.today {	padding: 0px;	margin-bottom: 3px;	text-align: center;	vertical-align: middle;	font-weight: bold;	/*background-image: url(../images/kalenderplupp_1.gif);	background-repeat: no-repeat;*/ }.calendar td.hasEvents {	background-image: url('../images/kalenderplupp_HE.png');	background-repeat: no-repeat; }ul.rss {	list-style-type: none;	display: block;	font-size: 0.8em;	padding-right: 3px;	padding-left: 3px;	padding-top: 1px;	padding-bottom: 1px;	margin-left: 3px;	margin-right: 4px;	margin-top: 0px;/*	border: 1px solid #AAF;*/	background-color: #DDF; }ul.rss li {	margin-top: 3px;	margin-bottom: 2px;	padding: 3px;	/*border: 1px solid #000;*/	background-color: #F2F3FF; }ul.rss li a {	color: #002;	text-decoration: none; }ul.rss li a:hover {	color: #126DB6;	text-decoration: underline; }/* copyright Text */.copyText {	font-size: 0.4em;	color: #AAA; }.copyText a {	color: #AAF; }/* Inputs ----------------- */.inputbox, textarea {	border: 1px solid #669;	border-bottom: 1px solid #CCE;	border-right: 1px solid #CCE; }.button {	background: #F2F3FF;	border: 2px solid #CCE;	border-bottom: 2px solid #669;	border-right: 2px solid #669; }/* Login ------------------ */table#loginform td {	/*border: 1px solid #DDD;*/ }table#loginform td.title {	padding: 3px;	font-weight: bold; }table#loginform td.field {	padding: 3px; }table#loginform td.submit {	text-align: center;}table#loginform td.subbox {	text-align: center;}/* Döda nedärvningsproblem ---------- */form {	font-size: 0.8em; }select, input, textarea {	font-size: 1em; }/*table {  font-size: 1em;}*//*td{	font-size: .8em;}*/ /* Finns ovan *//*ul{	font-size: 1em;	margin-top: 1em;	margin-bottom: 1em;	margin-left: 15px; /* For IE * /	padding-left: 5px; /* For real browsers  * /}li{/*	font-size: .8em;* /	margin-bottom: .5em;	line-height: 1.2em;}*/

Thankfull for all ideas..

[jlhaslip]

I think you need to understand the Cascading Style Sheet "cascade" and the reasons for allowing clients to alter the page on their machine. It is a accessibility issue. Some users need larger font sizes, so I can not recommend that you change this feature on your page. If you must use a specific font size to view a page without "breaking" it, then you should review the structural layout and change something. IMHO.

[Mr_CHISOL]

That I get.And I don't think you get the problem. I'm trying to distinguish a heading from the other text as they look the same at the moment.Last I checked it is better, more accesible to have it like thisHeadingText, A lot of Text...Than this:HeadingText, A lot of Text...And I can't get it like the first one at the moment (without !mportant), but I guess I must reorder the CSS...