I've been using the Simonetta font on a page and find that two divs are not lining up properly i.e. the spacing between them differs depending on the web browser it's being viewed in.

 

Here's the page

<div class="simonettawrapper">

<div class="mozartrequiemwrapper">

<div class="mozartrequiemleft">
Requiem aeternam dona eis, Domine,
et lux perpetua luceat eis
</div> <!-- mozartrequiemleft -->

<div class="mozartrequiemright">
Grant them eternal rest, Lord, and
let perpetual light shine on them
</div> <!-- mozartrequiemright -->

</div> <!-- mozartrequiem -->

<div class="maintext" style="margin-top: 20px; margin-bottom: 10px;"><hr /></div>

<div class="time">1<sup>st</sup> January, 2008 - 31<sup>st</sup> December, 2008</div>

<div class="prayfordeceased">Please pray for our deceased</div>

</div> <!-- simonettawrapper -->

.simonettawrapper {
	font-family: Simonetta, "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height: 18px;
}

.mozartrequiemwrapper {
	width: 100%;
	font-size: 18px;
	text-transform: uppercase;
	margin: 0 auto;
}

.mozartrequiemleft {
	width: 334px;
	float: left;
	text-align: right;
}

.mozartrequiemright {
	width: 391px;
	float: left;
	font-weight: 900;
	margin: 0 0 0 7px;
}

.time {
	font-size: 38px;
	font-weight: 900;
	text-align: center;
}

.prayfordeceased {
	font-size: 26px;
	text-transform: uppercase;
	text-align: center;
} 

I think the issue lies with the font itself, but wanted to know if there was a viable way to around this.

 

Any help is appreciated!

try resetting the margins and padding in the body to zero.. You may find other stuff has moved but once that's corrected again that particular cross browser issue won't reoccur.

i remember you saying that the header graphic was a place holder but you should really remove the red eye from the deceased

I tried adding the following, but it makes no difference.

html,body {
	height: 100%;
	padding: 0;
	margin: 0;
}

I've also removed the red eye from the deceased - despite how grim that sounds!

In your 'time' class, add a line-height value and a margin below it;

.time {

   line-height:38px;
   margin-bottom:15px;
   
}

when specifying line height it's always better to use relative units (or rather unitless numbers)

 

so if your base font size is say 26px then

.time {

line-height:1.5;
margin-bottom:15px;

}

Edited January 14, 201511 yr by davep

.time {

line-height:1.5;
margin-bottom:15px;

}

 

I added that, but there's is still a noticeable difference between browsers i.e. Firefox pushes moves the div down approximately twice as much as in Chrome..

Unfortunately none of the above methods have worked - I fear I will have to replace the text with an image of the text, but I see no other way.

 

 

firebug isn't showing the line height in .time in firefox - if i add it in manually it then spaces ok

 

just to be sure is the issue then the spacing between the .time and the .prayfordeceased? not sure why you would use two divs for that anyway and not two paragraphs or a heading/heading - or heading /paragraph (with classes of course)

Pardon my ignorance, but I'm unfamiliar with headers and paragraphs...

 

 

I've changed to the following and although the 2 lines appear as I want in Chrome, it doesn't in Firefox and IE (the spacing differs depending on the browser).

<h1 class="time">1<sup>st</sup> January, 2014 - 31<sup>st</sup> December, 2014</h1>

<h1 class="prayfordeceased">Please pray for our deceased</h1>

.time {
	font-size: 38px;
	font-weight: 900;
	text-align: center; 
}

.prayfordeceased {
	font-size: 26px;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 15px;
	line-height: 1;
}

I replaced the div tags with h1 on the assumption that that is what you meant by headings. I also added line-height to .prayfordeceased instead of .time.

yes that's what i meant by headings (er, surprised you didn't know)

 

i would recommened setting line height as 1 on both .time and .prayfordeceased then add a margin-bottom:15px (or more) to .time then it should be more consistent across browsers - i tried this in firefox and chrome and it was acceptable

Yeah, I admit I should have known that - that's what you get from being self-taught!

 

Here's what I'm using now, but I'm still getting too much spacing between lines in FF - is it appearing differently than in the attached image for you?

<h1 class="time">1<sup>st</sup> January, 2008 - 31<sup>st</sup> December, 2008</h1>

<h1 class="prayfordeceased">Please pray for our deceased</h1>

.time {
	font-size: 38px;
	font-weight: 900;
	text-align: center;
	margin-bottom: 15px
	line-height: 1;
}

.prayfordeceased {
	font-size: 26px;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 15px;
	line-height: 1;
}

it is appearing differently for me - on windows 7 with these browser versions (latest stable versions) - are you using older version perhaps? or a mac?

 

Edited January 18, 201511 yr by davep

Strange, I'm using the same versions.

 

Could it be related to an extension or something?

On closer inspection it seems the problem lies with the font as using Trebuchet MS fixes the spacing issue.

 

I don't understand why the issue is only appearing with those 2 lines to a greater extent on my browser.

try removing the superscript ( <sup> ) from the numbers and see if that makes any difference. really dates are written as January 1, 2008 – December 31, 2008 anyway.

That's what the issue was, thanks very much1

 

I've changed the superscript to a span class so I can keep to the intended format.

I have always written the date in that way, though I guess either way is acceptable going by this page.

good point - the more strictly formal way is more suited to your use, though you notice that on the page you linked to that they don't use superscript for the "th"

True enough, I do a weekly bulletin where every little bit of space counts and I use superscript for dates as it takes up less space - it's become a habit across everything I do.

 

I do realise I could save even more space by doing away with that extension altogether, but old habits die hard!