IE image/paragraph alignment

HTML & CSS
1

Hello CSSers,

I’m trying to tweak a template so it’s consistent across browsers.

Here’s the site

In IE7, the paragraph next to his head shot is pushed down by something and I’m not seeing what it is. Could I get some help on what’s going on?

Thanks in advance.

2

ah, didn’t even think to check it since it was a paid for template…kinda figured that stuff would already be ironed out.

3

ugh, I think I found it. Why do FF, Chrome and others ignore the element margin and IE doesn’t?

annoying.

4

Chrome and others ignore the element margin and IE doesn’t?

Assuming you’ve dealt with the normal default margin inconsistency between browsers then it’s probably a collapsing margin issue and elements in IE that have haslayout don’t collapse their margins in the same way the other browsers do. In IE(less than 8) elements with haslayout behave much the same as other browsers when overflow is set to anything other than visible.

As mentioned above you need a full doctype or you will be in quirks mode in IE.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Or Better :):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
5

A valid DOCTYPE and a rest usually work wonders on fixing browser specific bugs; well not really, but the results will usually be more reliable across browsers. The DOCTYPE you are using is missing half. Using that will cause you page to use quirks mode.