SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with margin. (different result in IE and firefox)

    hi

    i have problem with this piece of code
    i've search but i couldn't find any answer for this problem

    please see this code

    Code:
    <div style="width:700px; height:100px; background:#ccc;">
    	<h1 style="font:10pt tahoma; margin:30px; background:#eee;">hello</h1>
    </div>
    IE (7, 6):



    firefox, opera:



    im using xhtml 1.0 doctype
    it seems that opera and firefox ignore margin that applied to h1 tag but IE take that margin into account.

    when i change the code to this form:

    Code:
    <div style="width:700px; height:100px; background:#ccc; border:1px solid #fff;">
    	<h1 style="font:10pt tahoma; margin:30px; background:#eee;">hello</h1>
    </div>
    just with adding 1px border to div tag, all browsers show the page correctly and opera and firefox won't ignore margin his time.

    what is the problem

    thanks in advance

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Collapsing margins
    http://www.sitepoint.com/forums/showthread.php?t=500949

    problem solved ?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.x{width:700px;background:#ccc;padding:30px 0;}
    	
    	.x h1{font:12px tahoma,sans-serif;background:#eee;margin:0 30px;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <div class="x">
    
    <h1>hello</h1>
    
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ow.
    margin collapsing ?
    i'd thought that margin collapsing won't apply to nested elements.
    i found this article too:

    http://www.researchkitchen.de/blog/a...collapsing.php

    this article explain this problem completely
    thanks a bunch all4nerds

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    i'd thought that margin collapsing won't apply to nested elements.
    It will apply to all nested elements unless there is something in the way to stop the collapse as explained in the articles .


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
  •