Pictures and Text mis-aligned in different browsers

[TheBulldog]

Hey BV Nation!

I have a page (http://www.colorworkshairco.com/our-crew.html) with a lot of text (personal profiles) and a row of pictures to the right of it. In the BV builder, the pictures line up exactly next to each person's profile. However, when published, it looks like different browsers render the text with more padding or something which makes the pictures not line up with the text.

It looks the closest in IE, followed closely (but worse) in Chrome and is WAY off in FireFox. And in Safari, the page has A LOT of issues!!

Any ideas why this might be happening and what can be done to eliminate the shifting?

Thanks,
Scott

www.sellingudesign.com

[limebrook1]

Re: Pictures and Text mis-aligned in different browsers

I believe this is a common problem. On discovering 1/3 of my sites' visitors use Safari I now have both IE and Safari open when first publishing a page, and I alter the spacing until it looks right in both. Firefox and IE seem to render in a similar way. Unfortunately I've now noticed that on viewing on an ipad this issue still remains, so I suppose I'll have to have the ipad with me when first publishing too.

I'm afraid it's only hard work and experimentation which will resolve. Other people I know using different webpage builders also have similar issues.

[Vasili]

Re: Pictures and Text mis-aligned in different browsers

See this post ...

[navaldesign]

Re: Pictures and Text mis-aligned in different browsers

This is due to the fact that each browser uses a different interline distance for text.

So when text is in a unique, very long (hight) block, images will appear in different positions because it is the text that expands more or less.

Solution:

Break your unique, long text, in small blocks of say 5 - 8 lines each (each paragraph on its own) and you will be just fine.