Different Text Display in Different Browser ???

[j4mes_bond25]

Why is it that text within certain elements are displayed BIGGER in Microsoft Explorer & perfectly well in Firefox on my website ??? See the "Template" text, for example. Is this normal due to browser's incompatibility, since I never had such problem before ???

darsh25.silverserve.co.uk/AllInclusiveWebDesign/

CSS is:

/* CSS Document */

body
{
    background-color:white;
}


/* .................................... HEADER & FOOTER ................................... */

#header
{
    background-image:url(headerbackground.jpg);
    height:5%;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:white;
    text-align:center;
    width:100%;
}

#header  a
{
    color:yellow;    
    text-decoration:none;
}

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

#footer
{
    background-image:url(headerbackground.jpg);
    font-family:Georgia, "Times New Roman", Times, serif;
    color:white;
    text-align:center;
    border-top:2px solid white;
    float:left;
    height:5%;
    width:100%;
}

#footer a
{
    color:yellow;    
    text-decoration:none;
}

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

/************************************ BANNER ************************************/

#banner
{
    background-image:url(bannerbackground.jpg);
    text-align:center;
    height:150px;
}



/************************************ TEMPLATE MENU ************************************/

#templateMenu
{
    float:left;
    width:11%;
    border:1px solid red;
    background-color:green;
}

#templateMenu ul
{
    list-style:none;
    margin:0px;
    position:relative;
    padding:0px;
    width:100%;
    border:thin solid red;
    border-bottom:0px;
}

#templateMenu ul a
{
    display: block;
    text-align:center;
    background-color:yellow;
    text-decoration:none;
    width:100%;
    border-bottom:thin solid red;
    color:blue;
    position: relative;
    font-size:large;
    line-height:30px;
}

#templateMenu ul a:hover
{
    color:black;
    background-color:yellow;
    text-transform:uppercase;
}


/************************************ CENTER CONTENT ************************************/

#centerContent
{
    background-image:url(contentbackground.jpg);
    width:700px;
    margin-left:35px;
    float:left;
    border-left:1px solid #999999;
    border-right:1px solid #999999;
}

#centerContent ul
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    list-style-type:decimal;
    color:black;
}

#centerContent li
{
    margin:3% 3%;
    line-height:1.5em;
}

/************************************ LEFT CONTENT ************************************/

#leftContent
{
    margin-top:30px;
    float:left;
}

/************************************ RIGHT CONTENT ************************************/

#rightContent
{
    float:right;
}

/*********************************** Pre-Defined Elements ************************************/

p.first-letter:first-letter
{
    font-family:Georgia, "Times New Roman", Times, serif;
    color:red;
    margin-left:5%;
    font-size:xx-large;
}

p
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    font-size:medium;
    line-height:1.5em;
    margin:2% 3%;
    color:black;
}

h3
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:left;
    font-size:x-large;
    margin:2% 3%;
    color:purple;
    letter-spacing:5px;
    border-bottom:thin solid #990000;
}

h4
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:center;
    font-size:x-large;
    color:green;
}

h5
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    font-size:medium;
    margin:2% 3%;
    color:blue;
}

h6
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    margin:0;
    font-size:medium;
    font-weight:normal;
    color:red;
}

.italic
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    color:black;
    font-style:italic;
}

.bold
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    color:black;
    font-weight:bold;
}

.colorTextRed
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    color:red;
}

.colorTextBlue
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    color:blue;
}

.colorTextGreen
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    color:green;
}

.colorTextLime
{
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:justify;
    color:#00FF00;
}

.background
{
 background-image:url(background.jpg);
}

/*********************************** TABLE ***********************************/

#contactTable
{
    border-spacing:2%;
    margin:3% 3%;
    font-family:Georgia, "Times New Roman", Times, serif;
    text-align:left;
}

#contactTable tr
{
    border:none;
}

#contactTable td
{
    font-size:medium;
    color:black;
}

.contactForm
{
    background-color:#99FF99;
    border:1px solid red;
}

/*********************************** TABLE CLASSES ***********************************/

.table
{
    background-color:white;
    border-spacing:2%;
    margin:3% 3%;
    font-family:Georgia, "Times New Roman", Times, serif;
    border-collapse:collapse;
    text-align:left;
}

.tr
{
    border:none;
}

.td
{
    border:thin solid red;
    font-size:medium;
    padding:2px;
    text-align:center;
    color:black;
}

[tgreer]

A quick perusal through your CSS didn't show that you were defining any absolute point sizes. Relative terms like "medium" will be displayed... in relative terms. :)

In the future, could you please just post scaled down versions, only those portions directly related to your question? Thanks.

[hollystyles]

That's right to be little clearer in case you're not aware, if you're not specific about point size in your HTML/CSS the browser defaults to:

IE view menu->text size (set to medium by default perhaps this has got changed by accident in your IE browser to larger or something)

Firefox view menu->text size this just goes + or _ (use ctrl+ or ctrl- with keyboard much easier)

In my experience Firefox tends to display text at a smaller default size to IE.

[j4mes_bond25]

A quick perusal through your CSS didn't show that you were defining any absolute point sizes. Relative terms like "medium" will be displayed... in relative terms. :)

In the future, could you please just post scaled down versions, only those portions directly related to your question? Thanks.

Yes, that's right. Internet Explorer was already set to "medium" so that wasn't a problem. Guess, in the past I didn't have problem with using "medium" so didn't think "point" would make a massive difference as compared to merely using "medium". But now using the "point" makes it displayed perfectly well on both browser. Thanks.

Yep, that makes sense ;)