Different Text Display in Different Browser ???

Question

j4mes_bond25 0 Junior Poster in Training

20 Years Ago

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 ???

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;
}

html-css:bootstrap user-interface web-design

3 Contributors
3 Replies
135 Views
8 Hours Discussion Span
Latest Post 20 Years Ago Latest Post by j4mes_bond25

Dani AI

Generated 9 Months Ago

A quick, practical follow-up that ties together and and gives a reliable fix.

Browsers and OSes expose different default sizes and font rendering, and keyword sizes (medium/large/xx-large) are intentionally relative. That can make a single element look larger in IE than in Firefox. Two reliable approaches: set a clear base and use scalable units, or set explicit pixel sizes where you need exact cross-browser parity.

A simple, modern pattern is to establish a baseline and use rem for component sizing so everything scales predictably with the user/browser base:

html { font-size: 100%; }   /* 1rem equals the browser default */
body { font-family: Georgia, serif; font-size: 1rem; }
p    { font-size: 0.95rem; line-height: 1.5; }

Use rem to respect user preferences and zoom; use px only if you must force exact layout. Avoid relying on pt for screen layout — points are a print-oriented unit and can behave inconsistently on different displays. For details on units and font sizing see MDN: CSS length units and MDN: font-size.

Quick troubleshooting checklist:

Inspect the element’s computed font-size in each browser’s dev tools to see what’s actually inherited.
Check browser zoom and IE’s View→Text Size (older IE versions expose separate text scaling).
Verify the font stack and fallbacks — different fonts have different metrics.
Consider adding a normalizer like normalize.css to reduce default differences.

Note: reported that switching to a point size “fixed” it; that’s a workable quick fix but using a consistent base + rem yields more accessible and future-proof results.

All 3 Replies

tgreer 189 Made Her Cry

20 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

hollystyles 113 Veteran Poster · Answer 1 · 2006-07-07T02:13:36+00:00

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 0 Junior Poster in Training · Answer 2 · 2006-07-07T02:27:20+00:00

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 ;)

Different Text Display in Different Browser ???

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers