...

View Full Version : IE Margin and Padding Issue



aspekt9
04-02-2009, 05:32 AM
Can anyone explain why IE is not properly padding these pictures and content properly like FF does?


Officers Page (http://www.cis.umassd.edu/~psteidinger/derek/officers.html)

oesxyl
04-02-2009, 06:42 AM
Can anyone explain why IE is not properly padding these pictures and content properly like FF does?


Officers Page (http://www.cis.umassd.edu/~psteidinger/derek/officers.html)
box model is different between different version of IE, which one cause the problems?

also you have invalid html markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.cis.umassd.edu%2F~psteidinger%2Fderek%2Fofficers.html

tags in xhtml strict must be lower case.

best regards

SB65
04-02-2009, 10:52 AM
Hi there

Worth amending the code as earlier post - make mainPhoto a class not an id, and sorting the header out.

Then, I think there's a couple of problems causing the issue in IE.

The div main-content is not triggering "hasLayout" in IE. Try amending to:


#main-content {
margin-left: 225px;/*changed from padding-left*/
height:1%
}

Additionally, the div .photo is too big to fit in its parent div.mainPhoto - because of the 4px border applied to .photo. So try amending your css to:


.mainPhoto {
width:243px;
height:250px;/*both increased by 8px to enclose .photo*/
float:right;
text-align:center;
clear:none;
margin-left:8px;
margin-bottom:14px;
padding-bottom:17px;
}

There are a few unnecessary divs here I think as well.

This looks OK to me in IE7. But the header's not right (anyway) in IE6. Urgh.

This is because you're falling foul of the IE6 double margin float bug (http://www.positioniseverything.net/explorer/doubled-margin.html) I think, triggered by float:left on #logo p. Take this off (I don't think you need it) and give that a try.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum