Home/ Questions/Q 7087557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:41:19+00:00

I am trying to layout a web site but right away am having issues

  • 0

I am trying to layout a web site but right away am having issues with IE. You can see the issue at http://dhines.com/moyatest.

If you look at the page in IE vs Firefox, you’ll see two differences. The first is the top module on the right. IE is adding a 10px margin to the top, and ignoring the part in my CSS where I specify that the first-child has a top-margin:0px.

The other difference is the font. I am using a Google Web Font, which is working fine in FF of course, but in IE the font is changing every single time I refresh the page. Test it out for yourself, every page refresh changes the font. This is extremely weird because I am using Google Web Fonts on my personal site with no cross-browser issues.

CSS for the modules:

#page-modules
{width:250px; margin:0px; padding:0px; float:right;}

.module
{width:250px; margin:0px; padding:0px; margin-top:10px; background:url('../images/trans-bg.png');}

.module:first-child
{margin-top:0px;}

.module-spacer
{width:20px; height:200px; padding:0px; margin:0px; float:left;}

(The module-spacer class keeps text 20px from left side and its height controls the minimum height of a module)

And the HTML:

<div id="page-modules">
    <div class="module">
        <div class="module-spacer">
        </div>
            <div class="module-content">            
            Test            
        </div>
            <div class="clear">
        </div>
    </div>

    <div class="module">
        <div class="module-spacer">
        </div>
        <div class="module-content">
            Test        
        </div>
        <div class="clear">
        </div>
    </div>      
    <div class="clear">
    </div>
</div>

Now for the font stuff, I am adding this in the head section:

<link href='http://fonts.googleapis.com/css?family=Alegreya:400,700,400italic,700italic,900,900italic' rel='stylesheet' type='text/css'>

Then the body selector in my CSS:

 body
 {font-family: 'Alegreya', serif; font-weight:400; font-style:normal;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You forgot to add a DOCTYPE declaration to your page, so IE is falling back to quirks mode. As a result, it ignores your :first-child and :hover pseudo-classes and won’t render Web fonts that aren’t in the EOT format (Google only serves WOFF).

    Firefox is also rendering your page in quirks mode. However, it natively supports both pseudo-classes, so you don’t observe the same behavior in Firefox as you do in IE.

    • 0