Having some trouble with the layout of a website, particularly in IE. The issue can be observed at .
When comparing the page in IE to Firefox, there are noticeable differences. Firstly, the top module on the right side is not displaying correctly in IE. It seems to be adding a 10px margin to the top, despite my CSS specifying that the first-child should have a top-margin of 0px.
Another disparity is seen in the font usage. I am incorporating a Google Web Font which appears fine in Firefox but behaves strangely in IE. Each time the page is refreshed in IE, the font changes. This behavior is puzzling as I have used Google Web Fonts without any cross-browser issues on my personal site.
CSS styles 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 maintains text alignment 20px from the left and controls minimum module height)
HTML structure:
<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>
To address the font issues, including 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'>
Ensure body styling in your CSS includes:
body
{font-family: 'Alegreya', serif; font-weight:400; font-style:normal;}