Span text over image not showing in IE and Firefox, but fine in Chrome

HTML & CSS
1

So, I have these images which I put a color overlay on and text over that. However, the text is not lining up correctly in firefox and IE. For some reason it is shifting over one column. It is actually shifted over 2 columns when below 900px and no text is showing in mobile view with less than 600px.

#Services > a > section > span
{
position:absolute;
top:50%;
text-align:center;
width:100%;
color:#FFF;
font-size:1.832680226660318em;
z-index:5 !important;

}

http://rpn.epicsrv.com/

What’s going on?

Thanks!

2

So, Add:

left:0;

to the above code and see if that helps.

3

Thanks! It worked perfect. You da man! I’ve never used that property before.

4

You should consider using top/right/bottom/left (depending on the situation), one horizontal axis and one vertical axis coordinate so the browser konws exactly where to place the element. Otherwise, the browser will basically guess based off the surrounding elements. This was more of a problem in older browsers but obviously it’s not perfect still.