Home/ Questions/Q 8954259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T14:16:55+00:00

Stumped to find out the layout for this page is wrong in both IE

  • 0

Stumped to find out the layout for this page is wrong in both IE and Firefox, with completely (as far I know) neutral code.

In IE the box containing this next is far too huge for it.

In Mozilla it is too small.

Mozilla shows box shadows when I use the property:

box-shadow

Which is very strange, I thought it used -moz-box-shadow

Here’s what’s going on: http://i.imgur.com/SvPAP.png (that line on the Mozilla box is from photoshop).

Here’s all associated code:

HTML:

<!DOCTYPE hmtl>

<html>

<head>

    <link rel="stylesheet" type="text/css" media="screen, projection" href="page.css"/>
    <link rel="stylesheet" type="text/css" media="screen, projection" href="text.css"/>
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Arvo' />
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=PT+Sans' />

<head>

<body>
    <div class="divCentre">
        <div class="divTitleCon">
            <p class="titleText">What Is This?</p>
        </div>
        <div class="divContentCon">
            <p class="contentText">

                TEXT

                <br /><br />

                TEXT

                <br /><br />

                TEXT

                <br /><br />

                <span class="footerText">

                    TEXT

                </span>

            </p>
        </div>
    </div>
</body>

</html>

CSS PAGE:

html, body
{
    margin: 0;
    padding: 0; 
}
body
{
    background-color: rgb(241, 250, 253);   
}
.divCentre
{
    position:absolute; 

    top: -25%;
    bottom: 0;
    left: 0; 
    right: 0;
    margin: auto;

    width: 380px;
    height: 230px;

    padding: 20px;

    overflow: hidden;

    border: 1px solid rgba(200, 200, 200, 1); /* BORDER */

    background-color: rgba(255, 255, 255, 1); /* BACKGROUND */

    color: rgb(100, 100, 100);


    -moz-box-shadow:
                0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
          inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */ 
    -webkit-box-shadow:
                0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
          inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */ 
}
.divTitleCon
{
    position: relative;

    width: 100%;
    height: 15%;
}
.divContentCon
{
    position: relative;

    margin-top: 20px;

    width: 100%;
    height: auto;
    max-height: 80%;

    word-wrap: break-word;

    overflow: hidden;
}

CSS TEXT:

p
{
    margin: 0;
    padding: 0; 
}

.titleText
{
    font: 32px Arvo;
    text-shadow: 0px 1px rgb(255,255,255);  
}

.contentText
{
    font: 14px PT Sans; 
    color: rgb(150, 150, 150);
    text-shadow: 0px 1px rgb(255,255,255);
}

.footerText
{
    color: rgb(200, 200, 200);  
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It appears that Mozzila and Chrome render text completely differently (the text in question here is from Google’s font API, maybe a more local version wouldn’t have this issue. I’ll experiment).

    Anyway, specifying the line-height and using a common font is important.

    Specifying just line-height will fix the gap between lines, spaced by <br /><br />, however, the amount of text on that line will vary.

    Firefox tended to squash it together more, while Google rendered it ‘correctly’, which is understandable. The fonts from Google’s API are probably optimised for -webkit-, or their fork of it.

    Either way this is annoying but a required workaround.

    TL;DR:

    Fixed by changing:

    font: 14px PT Sans;

    to

    font: 14px Arial, Sans-Serif;
    line-height: 14px;
    • 0