CODEWITHSUNDEEP
htmlcsscross-browserinternet-explorer-9css-selectors
Danny
Danny

Reputation: 3665

IE Headaches - CSS :first-child selector not working, weird behavior using Google Web Fonts

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

Upvotes: 2

Views: 1013

Answers (2)

BoltClock
BoltClock

Reputation: 723508

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.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

As well as what BoltClock said, you don't appear to be setting margin: 0 on the body. IE has a default margin - which is a good thing for unstyled pages because having the text smooshed up to the edge of the window is very unattractive.

Upvotes: 0

Related Questions