Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE Margin and Padding Issue

    Can anyone explain why IE is not properly padding these pictures and content properly like FF does?


    Officers Page

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by aspekt9 View Post
    Can anyone explain why IE is not properly padding these pictures and content properly like FF does?


    Officers Page
    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?verbos...Fofficers.html

    tags in xhtml strict must be lower case.

    best regards

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts

    Macintosh

    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:

    Code:
    #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:

    Code:
    .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 I think, triggered by float:left on #logo p. Take this off (I don't think you need it) and give that a try.
    Last edited by SB65; 04-02-2009 at 12:06 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •