IE - table elements appear too big

[ed08857]

Hello,

I have a table that I use to display data.

When the the page is displayed in FF, table elements appear the same size as the text outside of the table, and that's what I want. However, in IE and Safari, the text appears much larger.

I tried defining a class to assign a font size to each cell but I can't find a value that's right for IE and FF - if data is displayed correctly in IE, it's too small in a FF. If it's displayed correctly in FF, it appears too big in IE.

Only tables seem to be having this problem.

Here are sniplets of my CSS and HTML (the table is displayed inside #content division. the #wrapper wraps all divisions, including #content)...

body {
     margin        :0;
    padding        :0;
    font-family:     Verdana, Tahoma, Arial, sans-serif;
    font-size:     100%;
        background:     #F8F8FF;
    text-align:     center;
}
 
#wrapper { 
     margin:         0 auto;
     width:         922px;
     border:         2px solid #E8E6E6;
     margin-top:     10px;
     margin-bottom:     20px;
     text-align:     left;
     background:     #FFFFFF;
 }
 
#content { 
     float:         left;
     border-left:     2px solid #E8E6E6;
     background:     #FFFFFF;
     margin:         0px 0px 0px 197px;
    padding-top:     4px;
     padding-left:     16px;
     padding-right:     5px;
     padding-bottom: 5px;
     width:         498px;
     display:     inline;
     min-height:     1200px;
    font-size:     76%;
 }
 

[html]
<table width="464" border="0">
<tr>
<td width="16">&nbsp;</td>
<td width="78">&nbsp;</td>
<td width="151"><strong>Height</strong></td>
<td width="201" ><strong>Weight</strong></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><strong>Male</strong></td>
<td>18 to 22 inches</td>
<td>33 to 45 pounds</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><strong>Female</strong></td>
<td>17 to 21 inches</td>
<td>22 to 35 pounds</td>
</tr>
</table>
[/html]
The page is not on the WEB, so I can't post the link. Sorry.

Any suggestion?

Thank you,
Ed

[drhowarddrfine]

I don't see any difference.

[ed08857]

When I load the page from Dreamweaver, the table text appears fine in FF but is too big in IE...

[Phox]

First: try loading it as plain HTML instead of from Dreamweaver.
Second: try a different font. Likely whichever font is being used for tables is having scaling issues.

[drhowarddrfine]

We probably need to see the complete markup. Snippets don't usually help.

[ed08857]

Sorry,

Here is the link to the sample page: http://www.puppy-training-solutions.com/test-page.html

This is a recent problem. I just made extensive changes to my CSS file but really don't see what could have caused this (before this change, everything was displayed correctly in all browsers).

If you click on http://www.puppy-training-solutions....-shepherd.html , which is basically an older version of the sample page, the text withing tables is displayed correctly.

Here is my new CSS:

body {
margin:0;
padding:0;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 100%;
background: #F8F8FF;
text-align: center;
}

#wrapper {
margin: 0 auto;
width: 922px;
border: 2px solid #E8E6E6;
margin-top: 10px;
margin-bottom: 20px;
text-align: left;
background: #FFFFFF;
}


/*********************/
/* Header Attributes */
/*********************/
#header {
width: 922px;
float: left;
padding: 0px;
border: 0px;
height: 100px;
margin: 0px 0px 0px 0px;
background: #FFFFFF;
}

.slogan {
color:#543C1C;
font-weight: bold;
margin-left: 5px;
}

#logo{
clear:none;
background-color:#FFFFFF;
font-size: 11px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #000000;
margin-top: 1px;
margin-bottom: 1px;
float: left;
}

/* Horizontal ads */
#topads{
background-color: #F5F0E9;
color: black;
float: none;
width: 100%;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight:normal;
height: 20px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #543C1C;
clear: both;
margin-bottom: 5px;
}

/* top navigation */
#topnav {
float:right;
width: 342px;
padding-top:51px;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 68%;
}

ul#nav,ul#nav li{
list-style-type:none;
margin:0;
padding:0;
}

* html ul#nav {
margin-right: -6px;
}

ul#nav{
margin-left: 4px;
width:342px;
}

ul#nav li{
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
float:left;
margin-right: 3px;
text-align: center;
}

ul#nav a{
float:left;
width: 5.95em;
padding: 5px 0;
background-color: #FFE3BF;
text-decoration:none;
color: #000000;
font-weight: bold;
}

ul#nav a:hover{
background-color: #FFC77F;
color: #FFFFFF;
font-weight: bold;
}

ul#nav li.activelink a,ul#nav li.activelink a:hover{
background-color: #F5F0E9;
color: #000000;
font-weight: bold;
}

#rGoogleBox {
width: 180px;
}

.GoogleVerticalAds {
background-color:#FFFFFF;
width:160px;
margin: 1px auto 10px 5px;
min-height:30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 71%;
color:#000000;
text-align: left;
padding-top: 5px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 5px;
line-height: 1.37em;
}


/***********************/
/* Commerce Attributes */
/***********************/
#commerce {
background: #FFFFFF;
margin: 0px 0px 0px 3px;
padding-left: 2px;
padding-right: 0px;
padding-bottom: 5px;
min-height: 1204px;
width: 183px;
float: left;
display: inline;
}

#commerce ul {
list-style: none;
padding: 0;
margin-left: 1.5em;
margin-top: 0em;
margin-bottom: 7px;
}

#commerce ul li {
background-position: left;
background-repeat: no-repeat;
line-height: 1.4em;
padding-top: 0em;
padding-bottom: .60em;
list-style-image:url(http://www.puppy-training-solutions....burgundy.gif);
list-style-position: outside;
}

/* Defines appearance of "Welcome" and "Suggested Reading" sections*/
.openningMessage {
background-color:#FFFFFF;
width:171px;
min-height:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color:#000000;
text-align: left;
padding-top: 3px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
line-height: 1.42em;
margin-top: 1px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 5px;
border: 2px solid #E8E6E6;
}
* html .openningMessage {
width:208px;
}

/* Similar to openingMessage but with an invisible borders*/
.misc1 {
background-color:#FFFFFF;
width:171px;
min-height:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 78% ;
color:#000000;
text-align: left;
padding-top: 0px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 0px;
line-height: 1.42em;
margin-top: 0px;
margin-right: auto;
margin-bottom: -8px;
margin-left: 1px;
border: 1px solid #FFFFFF;
}

/* Similar to openingMessage but with an invisible borders*/
.misc2 {
background-color:#FFFFFF;
width:171px;
min-height:5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color:#000000;
text-align: center;
padding-top: 3px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 3px;
line-height: 1.42em;
margin-top: 1px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 3px;
border: 1px solid #FFFFFF;
}


/**********************/
/* Content Attributes */
/**********************/
#content {
float: left;
border-left: 2px solid #E8E6E6;
background: #FFFFFF;
margin: 0px 0px 0px 197px;
padding-top: 4px;
padding-left: 16px;
padding-right: 5px;
padding-bottom: 5px;
width: 498px;
display: inline;
min-height: 1200px;
font-size: 76%;
}
* html #content {
width: 521px;
w\idth: 498px;
}

p {
line-height: 1.45em;
margin:0 0 15px;
}

#content p {
line-height: 1.45em;
margin:0 0 15px;
}
#content h1, #content h2,#content h3,#content h4 {
background-color:inherit;
color:#606060;
font-weight:bold;
letter-spacing: 0px;
margin:0 0 15px;
padding-top: .25em;
text-align: left;
}

#content h1 {
font-size: 180%;
letter-spacing:-1px;
padding-top: .25em;
text-align: center;
}

#content h2 {
font-size:141%;
margin-bottom:10px;
line-height: 1.3em;
}

#content h3 {
font-size:116%;
margin-bottom:10px;
line-height: 1.1em;
}

#content h4 {
font-size:75%;
margin:0 0 0px;
font-weight:normal;
margin-bottom: 1.25em;
padding-top: 0;
line-height: .75em;
}

#content img {
border:1px solid #B0B0B0;
float:left;
margin:5px 15px 6px;
padding: 4px;
display: inline;
}

#content ul {
list-style: none;
padding: 0;
height: auto;
margin-bottom: 1.5em;
margin-left: 3.5em;
}

#content ul li {
background-position: left;
background-repeat: no-repeat;
padding-left: 0.05em;
line-height: 1.45em;
padding-top: .0em;
padding-bottom: .75em;
list-style-image:url(http://www.puppy-training-solutions....burgundy.gif);
list-style-position: outside;
}

/* noBorder was created to nullify image borders from #content */
#noBorder {
border:none;
background-color:#FFFFFF;
}

#noBorder img {
border:none;
background-color:#FFFFFF;
float:left;
margin:5px 5px 5px;
padding:5px;
}

#noBorderNoPadding {
background-color:#FFFFFF;
}

#noBorderNoPadding img {
border:none;
float:left;
margin:0px 0px 0px;
padding:0px;
}


.disclaimer {
font-size:75%;
}

.sidebar {
padding-top: 1px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #F5F0E9;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}

.sidebar p {
line-height:1.5em;
margin:0 0 10px;
}

.separatorDotted {
border-top-width:2px;
border-top-style:dotted;
border-top-color:#FFC77F;
margin-right:200px;
margin-left:5px;
margin-top:10px;
}

.hide {display:none;}
.small {font-size:.8em;}
.medium {font-size: 1em;}
.large {font-size:1.4em;}
.center {text-align:center;}
.right {text-align:right;}


A:link {
color:#0000FF;
text-decoration: none;
}

A:visited {
color:#0000FF;
text-decoration: none;

}

A:active {
color: #0000FF;
text-decoration: none;

}

A:hover {
color: #8D2800;
text-decoration:underline;
}


/*************************/
/* Navigation Attributes */
/*************************/
#navigation {
background: #FFFFFF;
margin: 0px 0px 0px -714px;
padding-left: 5px;
padding-right: 0px;
padding-bottom: 5px;
min-height: 1204px;
width: 185px;
float: left;
display: inline;
}
* html #navigation {
width: 190px;
w\idth: 185px;
margin: 0px 0px 0px -692px;
}

#vertnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 69%;
font-weight: bold;
width: 175px;
padding: 0px;
margin-bottom: 1em;
background-color: #FFFFFF;
color:#000000;
margin-left: 0px;
line-height: .70em;
}

#vertnav ul {
list-style: none;
margin: 0;
padding: 0;
height: auto;
}

#vertnav ul li {
margin: 0;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E8E6E6;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-image:url(http://www.puppy-training-solutions....av-arrow.gif);
padding-top: 3px;
padding-right: 2px;
padding-bottom: 3px;
background-position: left;
background-repeat: no-repeat;
}

#vertnav ul li a {
display: block;
color: #000000;
text-decoration: none;
width: 100%;
padding-left: 14px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
}

#vertnav ul li a {
width: auto;
}

#vertnav ul li a:hover {
background-color: #FFFFFF;
color: #0000FF;
padding-left: 14px;
background-image: url(http://www.puppy-training-solutions....av-arrow.gif);
background-position: left center;
background-repeat: no-repeat;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
}

.quotes {
background-color:#FFFFFF;
width:163px;
min-height:30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 71%;
color:#000000;
text-align: left;
padding-top: 3px;
line-height: 1.42em;
margin-top: 15px;
padding-left: 6px;
border: 1px solid #5D7CBA;
margin-left: 0px;
padding-right: 6px;
}
* html .quotes {
width:180px;
}

.subscribe {
background-color:#FFE3BF;
clear:both;
width:160px;
min-height:30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 71%;
color:#000000;
text-align: left;
padding: 2px 7px 15px 10px;
margin: 1px auto 10px 0px;
line-height: 1.42em;
}
* html .subscribe {
width:180px;
}

.ezine {
font-weight: bold;
font-size: 90%;
}

/*********************/
/* Footer Attributes */
/*********************/
#footer {
width: 100%;
clear: both;
color: #333;
border-top: 1px solid #E8E6E6;
background: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.footertextsmall {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:10px 0px 10px 0px;
font-size: 71%;
text-align:center;
color:#000000;
}

.footertextmedium {
font-family: tahoma, Arial, Helvetica, sans-serif;
margin:0px;
padding:10px 0px 10px 0px;
font-size: 76%;
text-align:center;
color:#000000;
border-top: 1px solid #E8E6E6;
border-bottom: 3px solid #E8E6E6;
}

#footer img,#footer img {
border:none;
float:none;
text-align:center;
border:thick;
}

#footer a {
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}


/**************************************/
/* Navigation and Commerce Attributes */
/**************************************/
#navigation h2,#commerce h2 {
margin:0 0 10px;
color: #A97838;
line-height: 1.3em;
font-size: 150%;
}

#navigation h3,#commerce h3 {
font-size: 105%;
font-weight:bold;
margin:0 0 3px;
color: #990000;
}


#navigation p, #commerce p {
font-size: 69%;
line-height:1.4em;
margin:0 0 16px 10px;
}


/***************************/
/* Attributes for Site Map */
/***************************/
#sitemap {
text-align:left;
}

#sitemap ul {
list-style: none;
padding: 0;
height: auto;
margin-bottom: 1.5em;
margin-left: 3em;
}

#sitemap ul li {
background-position: left;
background-repeat: no-repeat;
padding-left: 0.05em;
line-height: 1.3em;
padding-top: .5em;
padding-bottom: .0em;
list-style-image:url(http://www.puppy-training-solutions....burgundy.gif);
list-style-position: outside;
}

#sitemap h2 {
font-size:140%;
margin-bottom:10px;
text-align: left;
line-height: 1.3em;
letter-spacing: 0px;
margin-bottom: 0.25em;
}

#sitemap p {
font-size: 72%;
line-height:1.15em;
margin:0 0 .05em 0;
}

#sitemap A:link {
color:#0000FF;
text-decoration:underline;
}

[drhowarddrfine]

For some reason the code tags won't work but posting all that CSS isn't worth anything without the html. In any case, the link alone is all we need.

I still don't see any difference but I need a sec.

[ed08857]

I forgot to mention - I am using IE 7

[AutumnsDecay]

I think it has to do with you using percentages instead of pixels.

IE is probably setting the font size to 100% of the table height / width.

Try using a preset pixel amount.

[ed08857]

It works now...

I added the following to my CSS:

#content table { font-size: 100%; }

This line basically sets the table font size to the font size of the #content. What I still don't understand is why the table wasn't inheriting that in the first place (the table is inside the #content).

Thanks to everyone who took the time to help.

[drhowarddrfine]

IE always screws up on font sizes so it has to be set in the body. In CSS, do:

body{font-size:100%}

[ed08857]

I already had "body{font-size:100%}", but it didn't help. In any case, I know what the problem was and why the font-size was not being inherited...

[drhowarddrfine]

I didn't even notice that but, yes, as Paul said, anything before the doctype and IE chokes on it. That doesn't prevent inheritance, it just throws IE into quirks and you it's like 1996 all over again.

Links to other forums are not allowed, though.

[ed08857]

I realized that after posting the message. Sorry about it.