Unexpected results in Firefox, Safari, and Opera.

Discussion in 'CSS' started by crazyFoo, Aug 27, 2008.

0
  1. #1
    I need help understanding this better.

    Why does the margin on the h2 tag push the parent container (hsaBottom) down? I would assume that the h2 tag would be pushed down inside the parent, but instead it pushed the entire container down.

    This doesn't happen in IE 6 and IE 7, but does happen in Firefox 3, Opera 9.5, Safari 3 all on Windows.

    Any ideas?


    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
	<title>Child Margin Test</title>
	<style type="text/css">
	#hsaBottom{
		width: 400px;
		height: 100px;
		background: #cccccc;
		margin:10px;
	}

	#hsaBottom h2{
		margin:100px 0 0 0;	
	}
	</style>
</head>
<body>

    <div id="hsaBottom">
    	<h2>What is the deal?</h2>
    </div>
  	
</body></html>
    Code (markup):
     
    crazyFoo, Aug 27, 2008 IP
  2. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You must either float the #hsaBottom, or give it absolute position, or change margin to padding in h2 style.
     
    risoknop, Aug 27, 2008 IP
  3. KatieK

    KatieK Active Member

    Messages:
    116
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #3
    KatieK, Aug 27, 2008 IP
    crazyFoo and risoknop like this.
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    kk5st, Aug 27, 2008 IP
  5. crazyFoo

    crazyFoo Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks for the awesome article KatieK. That explained everything perfectly.
     
    crazyFoo, Aug 28, 2008 IP
  6. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yeah great article. There was lots of stuff I didn't know.. Rep added :)
     
    risoknop, Aug 28, 2008 IP
  7. bvchandu

    bvchandu Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Hi... try this css

    <style type="text/css">
    #hsaBottom{
    width: 400px;
    height: 100px;
    background: #cccccc;
    margin:10px;
    }

    #hsaBottom h2{
    padding:78px 0px 0px 0px;
    margin:0px;
    }
    </style>
     
    bvchandu, Aug 29, 2008 IP
  8. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #8
    The fact this doesn't work in any of the modern browsers, but did in IE, speaks volumes on IEs incompetence as a web browser.
    Never, ever use any version of IE as a reference for what works. Always, always use any other browser as your initial test. Even IE8 is 10 years behind web standards and wrong in much of its implementation.
     
    drhowarddrfine, Aug 31, 2008 IP
  9. crazyFoo

    crazyFoo Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I agree that IE doesn't follow web standards, but if a site doesn't look good in IE, it isn't really worth putting out on the web.
     
    crazyFoo, Sep 2, 2008 IP
  10. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #10
    Never said you shouldn't make it look right in IE.
     
    drhowarddrfine, Sep 2, 2008 IP
  11. crazyFoo

    crazyFoo Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    My bad. Thanks for the advice.
     
    crazyFoo, Sep 2, 2008 IP
  12. sjlogan88

    sjlogan88 Peon

    Messages:
    74
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #12
    nice article and advice
     
    sjlogan88, Sep 3, 2008 IP