473,320 Members | 2,000 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

IE - table elements appear too big

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
13 4046
drhowarddrfine
7,435 Expert 4TB
I don't see any difference.
Apr 11 '08 #2
When I load the page from Dreamweaver, the table text appears fine in FF but is too big in IE...
Apr 11 '08 #3
Phox
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
7,435 Expert 4TB
We probably need to see the complete markup. Snippets don't usually help.
Apr 11 '08 #5
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
7,435 Expert 4TB
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
I forgot to mention - I am using IE 7
Apr 12 '08 #8
AutumnsDecay
170 100+
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
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
7,435 Expert 4TB
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
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
7,435 Expert 4TB
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
I realized that after posting the message. Sorry about it.
Apr 14 '08 #14

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

Similar topics

5
by: ccjunk | last post by:
This may be a simple one but I have been working on it without joy for a couple of days now. Reading books and searching these groups hasn't helped yet either. I am trying to create a table...
25
by: kie | last post by:
hello, i have a table that creates and deletes rows dynamically using createElement, appendChild, removeChild. when i have added the required amount of rows and input my data, i would like to...
61
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will...
47
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
47
by: Matt Kruse | last post by:
http://www.mattkruse.com/temp/css_expressions.html One of the standard CSS questions is "how can I shade every other table row a different color with CSS?" The answers are usually 1) you can't...
10
by: Peter Kirk | last post by:
Hi there can someone please help me with creating dynamic content in a table? For example, see the below javascript and html - why is a new row not created in the table when I click the button?...
6
by: Christopher Benson-Manica | last post by:
I have some markup like the following: <form> <table> <script> <!-- Write the table markup //--> </script> </table> <form>
5
by: Patient Guy | last post by:
In my reading of the Strict and Transitional DTD for HTML 4.0, the table row (TR) elements are contained within table section elements: THEAD, TFOOT, and TBODY. The table section elements are...
117
by: phil-news-nospam | last post by:
Is there really any advantage to using DIV elements with float style properies, vs. the old method of TABLE and TR and TD? I'm finding that by using DIV, it still involves the same number of...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.