By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,473 Members | 1,267 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,473 IT Pros & Developers. It's quick & easy.

IE - table elements appear too big

P: 7
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)...
Expand|Select|Wrap|Line Numbers
  1. body {
  2.      margin        :0;
  3.     padding        :0;
  4.     font-family:     Verdana, Tahoma, Arial, sans-serif;
  5.     font-size:     100%;
  6.         background:     #F8F8FF;
  7.     text-align:     center;
  8. }
  9.  
  10. #wrapper { 
  11.      margin:         0 auto;
  12.      width:         922px;
  13.      border:         2px solid #E8E6E6;
  14.      margin-top:     10px;
  15.      margin-bottom:     20px;
  16.      text-align:     left;
  17.      background:     #FFFFFF;
  18.  }
  19.  
  20. #content { 
  21.      float:         left;
  22.      border-left:     2px solid #E8E6E6;
  23.      background:     #FFFFFF;
  24.      margin:         0px 0px 0px 197px;
  25.     padding-top:     4px;
  26.      padding-left:     16px;
  27.      padding-right:     5px;
  28.      padding-bottom: 5px;
  29.      width:         498px;
  30.      display:     inline;
  31.      min-height:     1200px;
  32.     font-size:     76%;
  33.  }
  34.  
[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
Apr 11 '08 #1
Share this Question
Share on Google+
13 Replies


drhowarddrfine
Expert 5K+
P: 7,435
I don't see any difference.
Apr 11 '08 #2

P: 7
When I load the page from Dreamweaver, the table text appears fine in FF but is too big in IE...
Apr 11 '08 #3

P: 4
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.
Apr 11 '08 #4

drhowarddrfine
Expert 5K+
P: 7,435
We probably need to see the complete markup. Snippets don't usually help.
Apr 11 '08 #5

P: 7
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;
}
Apr 11 '08 #6

drhowarddrfine
Expert 5K+
P: 7,435
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.
Apr 12 '08 #7

P: 7
I forgot to mention - I am using IE 7
Apr 12 '08 #8

AutumnsDecay
100+
P: 170
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.
Apr 12 '08 #9

P: 7
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.
Apr 13 '08 #10

drhowarddrfine
Expert 5K+
P: 7,435
IE always screws up on font sizes so it has to be set in the body. In CSS, do:

body{font-size:100%}
Apr 13 '08 #11

P: 7
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...
Apr 13 '08 #12

drhowarddrfine
Expert 5K+
P: 7,435
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.
Apr 14 '08 #13

P: 7
I realized that after posting the message. Sorry about it.
Apr 14 '08 #14

Post your reply

Sign in to post your reply or Sign up for a free account.