SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Top margin mess in IE vs FF

    Hello,

    A very friendly shout out to you all, as this is my first post here.

    These forums are busting with activity, so I thought it would be a great place to ask a question in and hopefully get some good answers.


    Here’s a simple test case that illustrates what's been bugging me for a while now in the back of my head:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>just a test case</title>
    <style type="text/css">
    <!--
    * {
    	padding:0;
    	margin:0;
    }
    body {
    	font: 62.5%/1.5 Verdana;
    }
    p {
    	font-size: 1.2em;
    	margin:1.5em 5%;
    	text-align: justify;	
    }
    #divContent {
    	width: 500px;
    	margin: 5px auto;
    /*	border: 1px solid red;	Why does just adding a border for example fixes this top margin IE vs FF difference? */
    }
    -->
    </style>
    </head>
    <body>
    	<div id="divContent">
    		<p>
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce turpis.  Proin congue dui luctus magna. Aliquam vitae nisi ut odio viverra  rhoncus. Integer id tellus. Praesent faucibus tortor sit amet nibh.  Donec id ligula id dolor convallis luctus. Mauris suscipit dolor ac  neque. Aliquam erat volutpat. Nunc nibh. Praesent nunc nisi, suscipit  vel, venenatis vitae, tristique sed, elit. Donec eget odio vel sapien  ultrices suscipit.
    		</p>
    	</div>
    </body>
    </html>
    Compare how it displays in FF and IE. Notice where the paragraph starts vertically between the two. There’s a difference.

    Now curiously, if I just add a border around the div, then the paragraph starts vertically the same both in FF and IE.

    Why and how is IE messing up this top margin and how do I fix/avoid it so both FF and IE starts it vertically the same?

    Thanks a bunch for your thoughts,

    Matty76

  2. #2
    SitePoint Addict tina88's Avatar
    Join Date
    Jan 2007
    Location
    UK
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hiya, welcome to the forums I tested your code in both IE7 and FF and both look exaclty the same. Tina

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't looked at your code too closely (I'm about to fly out the door but it sounds like a collapsing margin issue: see if this helps / explains the issue


    Nadia

  4. #4
    SitePoint Member
    Join Date
    May 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tina88 View Post
    Hiya, welcome to the forums I tested your code in both IE7 and FF and both look exaclty the same. Tina
    Thanks for the welcome, tina Interesting, does it really? I tested it on all my comps, and IE displays it lower on all of them. It's been a head-scratcher for me for a while.

    Quote Originally Posted by Nadia P View Post
    I haven't looked at your code too closely (I'm about to fly out the door but it sounds like a collapsing margin issue: see if this helps / explains the issue
    Nadia
    Flying out the door, and still nailing it right on the head! It is the collapsing margin phenomenon indeed! More exactly, it is a case of FF applying it correctly according to the specs, but IE once again doing its own thing and "trying to help", by not collapsing the two touching margins that is.

    Thank you for the link, following links on that page described it in good detail.

    This forum and its users rock

  5. #5
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad to help :-)

    Nadia


Bookmarks

Posting Permissions

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