Why is my font always bold in tables?

Get Started
1

Hello, I am having a problems with my tables. Any text that I put within a table on my page is automatically bolded and I can’t seem to find out why. I will post my css file below, but I have searched it thoroughly and I cannot figure it out. Any help would be greatly appreciated!

Thanks!

* {margin:0; padding:0;} /* add a reset*/

html, body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	background: #EDFBD2 url(images/img01.jpg) repeat-x left top;
	background-color:#B6DA9E;
	color: #2B4E15;
	}

form {
	margin: 0;
	padding: 0;
}

input, textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000000;
}

	h1, h2, h3 {
Font:"Times New Roman", Times, serif}

h1 {font-size: 3em; text-align:center	}		
h2 {font-size: 2em; text-align:center	}
h3 {font-size: 2em; text-align:center	}
h4 {font-size: 1em; text-align:justify; }
h5 {text-align:center; font-size:1.4em	}
h6 {font-size: .6em; text-align:right 	}~

p, ul, ol {
	margin-bottom: 1.8em;
	line-height: 160%;
	}

ul, ol {
}

blockquote {
}

a {
	color: #2B4E15;
}

a:hover {
	text-decoration: none;
}

hr {
	display: none;
}

/* Wrapper */

#wrapper {
	height: 100%;
	min-height: 100%;
	
}

html>body #wrapper {
	height: auto;
}

/* Menu */

#menu {
	width: 906px;
	height: 57px;
	padding-top: 10px;
	margin: 0 auto;
}

#menu ul {
	float: right;
	margin: 0 64px 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	float: left;
	height: 16px;
	padding: 10px 15px;
	text-decoration: none;
	text-transform: uppercase;
	font-size:1em;
	font-weight: bold;
	color: #000000;
	font:Georgia;
	}

#menu a:hover {
	background: #B6DA9E;
	color: #FFFFFF;
}

#menu .current_page_item a {
	background: #B6DA9E;
	color: #FFFFFF;
}

/* Logo */

#logo {
	width: 906px;
	height: 180px;
	margin: 0 auto;
	color: #FFFFFF;
	text-align:center;
}

#logo h1, #logo h2 {
	float: left;
	margin: 0;
}
#logo h2 {
	padding: 36px 0 0 10px;
	letter-spacing: -1px;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 14px;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
}

/****main*****/

.main {
font-size:1.2em;
text-align:justify;
border:medium;
border-right:3px outset #009900;
border-left:3px inset #009900;
background-color:#9BCE79;
width: 900px;
margin: 0 auto;
margin-top:-30px;
padding:0px 0;
min-height:400px;
overflow:hidden;
padding:20px 0;
position:relative;
}



/* Page */

#page {
	float:left;
	width: 580px;
	margin: 0 auto;
	padding: 20px 0 0 50px;
}

#page p {
font-size: 1em}

/* Content */

#content {
	float: left;
	width: 494px;
	text-align:justify;
	}

/* Sidebar */

#sidebar {
	float: right;
	width: 260px;
		}
	
#sidebar ul {
	margin-left:1.3em;
	padding: 0;
	list-style: none;
}

#sidebar li {
	
	margin-bottom:20px;
	line-height:17px}
	
#sidebar li li {
	margin: 0;
	}
/*
#sidebar p {
	padding: 0 20px;
}
*/

#sidebar h2 {
	height: 29px;
	margin: 0;
	padding: 9px 0 0 0;
	background: #B6E074;
	border: 1px  dotted #4D7C2B;
	font-size: 1.4em;
	font-weight: normal;
	color: #000000;
	margin-bottom:20px;
	text-align:center}

/* Footer */

#footer {

	clear: both;
	padding: 0;
	font-size: 12px;
	background: url(images/footer.gif) repeat-x left bottom;
	line-height:56px
	}

#footer p {
	margin: 0 auto;
	text-align: center;
	width: 906px;
}


#titlebar {
color:white;
font-size:17px;
font-weight:bold;
text-indent:28px;
padding-top:3px
}

#titlebar2 {
color:white;
font-size:17px;
font-weight:bold;
text-indent:48px;
padding-top:3px
}

#right {
position:absolute;
right: 55px;
top: 38px;	
font-size:16px;
float: right;
list-style: none;
width: 196px;
padding-top: 3px;
height: 165px;
padding-left:20px;
margin-left:-20px;
background:url(images/background.png);
}

#right ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#right a:link{
color: #4A7629;
font-family: Trebuchet MS;
font-size: 18px;
height: 23px;
display:block;
text-decoration: none;
padding: 8px 0 0 0px;
font-weight:normal;
}

#right a:visited{
text-decoration: none;
}

#right a:hover{
color:white;
}

#right a:active{
color: #dbdbdb;
}

#right2 {
font-size:16px;
position:absolute;
right:55px;
top:220px;
margin-top:10px;
float: right;
list-style: none;
width: 196px;
padding-top: 3px;
height: 165px;
padding-left:20px;
margin-left:-20px;
background:url(images/background.png);
}


#right2 ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#right2 a:link{
color: #4A7629;
font-family: Trebuchet MS;
font-size: 18px;
display:block;
text-decoration: none;
padding: 8px 0 0 0px;
font-weight:normal;
}

#right2 a:visited{
text-decoration: none;
}

#right2 a:hover{
color:white;
}

#right2 a:active{
color: #dbdbdb;
}


.sermons {
color:black;	
}



#links {
position:absolute;
background-color:#D9E5CF;
min-height:399px;
width:215px;
right:0px;
border-left:3px solid #005C00;;
top:0px;
line-height:30px;
font-size:18px;
height:500%;
}

#links A:link {
color:black;
text-decoration:none;
text-indent:5px;
}

#links a:visited {
text-decoration:none;
color:black;
}

#links A:hover {
color:black;
}
#links ul li {
list-style:none}

#links li a{
border-bottom:thin #000000 solid;
display:block;
text-indent:5px	}

#links li:hover {
background-color:#9BCE79;
color:black
}

#centerpic {
margin-left:45px;
}


/*****************************************Contact Us Form**********************************/
#contact-area {
	width: 600px;
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 350px;
	font-family: Helvetica, sans-serif;
	font-size: .8em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #900;
}

#contact-area input.submit-button {
	
	width: 100px;
	float: left;
	margin-left:300px
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}

#page-wrap {
	width: 455px;
	background: white;
	border: thin solid black;
	padding: 20px 50px 20px 50px;
		min-height: 270px;
	height: auto !important;
	height: 270px;
}


/*****************************************Tables**********************************/

#tables {
width 100%;
font-size: .8em;
font-weight:500}


/****************************************Order of Service*************************/

#order {
position:absolute;
float:right;
width:215px;
right:0px;
top:0px;
line-height:30px;
height:500%;

}
2

well you did tell it to use font-weight:500 for the tables and since 400 is normal some browsers will make 500 bold.

3

@jordan8201 - For now so you do not run into issues such as these stick to ‘bold’ and ‘normal’ for font-weight.

4

That was just for a div that was called tables. Anyway, I removed that line and I am still having the problem with my tables.

5

Well without seeing the HTML it is impossible to tell which of the styles you have defined is the one setting the table content to bold.

6

Ok, here is an example:
http://www.mzbc.com/main.htm

Thanks

7

Sidenote - <th> defaults to font-weight: bold;

th { font-weight: normal; }

8

I am not certain of this answer, but
looking at your markup I wonder why you used THs within TRs instead of TDs? I think that may be the root cause… hope I have helped. :slight_smile:

9

You should only be using <th> for the table column and row headings. The table content should be in <td> tags. The purpose of the two tags is to distinguish the headings from the data in the table. If you use the correct tags in the table then you don’t have to attempt to override the way they look in the CSS as much since only the headings default to bold.