CSS driving me crazy. Why is this happening?

Discussion in 'CSS' started by lonewolff, Dec 29, 2009.

0
  1. #1
    Hi guys.

    Why does this sit flush with the top of the page (intended) but then if I put a H1 in it moves down by ~12 pixels?

    HTML
    <!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>
	<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="toppanel">
		<h1>test</h1>
	</div>
</body>
</html>
    Code (markup):
    CSS
    body{border:0px;
		padding:0px;
		margin:0px;
		background-color:#FFFFFF;
		color:#000000;
		font:12px/16px arial,verdana,tahoma;}

#toppanel{position:relative;
		width:1000px;
		background-color:#FFCCCC;
		margin:0px;
		padding:0px;
		border:0px;}
    Code (markup):
    Forgive me if I seem confused :confused:

    Thanks in advance.
     
    Last edited: Dec 29, 2009
    lonewolff, Dec 29, 2009 IP
  2. Scorpiono

    Scorpiono Well-Known Member

    Messages:
    1,330
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    120
    #2
    H1 might have pre-padding/margin.

    h1 { padding:0px;margin:0px; }
    // might work
     
    Scorpiono, Dec 29, 2009 IP
  3. excaflowne

    excaflowne Well-Known Member

    Messages:
    138
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    you may add rules to h1

    h1{
    font-size : xx-large;
    }

    or try not to declare any font size in body tag.
    it may overriden the #toppanel.
    instead, declare rules for each tags and elements first.

    hope this work..
     
    excaflowne, Dec 29, 2009 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Scorpiono is most likely correct. H1's start out with margins, and margins can collapse to the parent element on some browsers... There's a reason many CSS developers use a "reset" so we don't have to worry about things like that.

    Simple reset, sucks if you want form elements:
    * { margin:0; padding:0; }

    My reset, just hits the elements I am likely to use and not waste time on setting up values I'm just as likely to change:
    /* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}
    Code (markup):
    ... and then there's CSS reloaded, which is fat, bloated and waste time setting a bunch of values your likely to be overriding anyways.

    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

    The margin-collapse issue you are seeing gets worse if you test across multiple browsers, because I'm willing to bet some (like IE) will show that top margin, while others (Opera/Chrome/Saffy) won't.
     
    deathshadow, Dec 31, 2009 IP
  5. opuschamber

    opuschamber Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi .. lonewolff

    I Agree with Scorpiono and deathshadow.

    The problems is the h" elements, p, list has default margin and padding.
    We should set the margin and padding first if we want to reset it.
     
    opuschamber, Jan 5, 2010 IP
  6. lonewolff

    lonewolff Member

    Messages:
    338
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #6
    Great tips!
    Thanks guys :)
     
    lonewolff, Jan 7, 2010 IP