Div shifts down after adding <hx> tag

Hi,

I'm building a design for a website as a practice, but it seems i'm missing sthg as every time i try to add tag of any size, the div shifts down leaving a blank space above, but it works fine if i replaced the with a large size regular font. here's my css as a sample:

body{
	width:80%;
	margin:auto;
	background:#FFFFCC;
	border:#000666 medium;
	}

#header{
	height:100px;
	width:100%;
	background:#bdd44f url(../images/logo.gif) no-repeat;
}



#logo {
text-align:center;
font-size:50px;
font-family:"fantasy";
 }

here's the use in the HTML page

<!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=utf-8" />
<link type="text/css" href="../CSS/main.css" rel="stylesheet" />
<title>Untitled Document</title>
</head>

<body>

<div id='header'>
	<div id="logo">
		<h1> Website's Name as a header </h1>
	</div>
</div>

I don't know how to fix it, can anyone help??
thank you in Advance

learning_php

Newbie Poster

5 posts since Dec 2010

Reputation Points: 10

Solved Threads: 0

3 Months Ago

Heading tags are considered block level elements (as are divs) so the inclusion of a H tag forces everything below it to move down. Text added directly or in elements like are considered inline and don't have the same effect.
If you ever want a block element to behave like an inline element add

display: inline-block;

to the CSS for the block element.
I hope that helps.

hericles

Practically a Posting Shark

823 posts since Nov 2007

Reputation Points: 136

Solved Threads: 169

3 Months Ago

if you mean the margin/padding over the h block, that would come from browser's default css rules and may differ from one browser to another, if you want to make sure every browser display stuff as close as possible to what you would like (it's impossible to have EXACTLY the same thing on everybrowser since they handle css diferently to their liking) what i would suggest is importing a reset.css set of rules that clears the browsers default values for generic elements.

the order for css rules is : broswer's css < website's css file/style elements < inline style arguments < user's personal css

im probly missing some here but the important point i'm trying to make is that your website's css is rarely gonna overwrite every single possibile rules that the browser possibly implements, this is where the reset.css comes into play and wipes as much as possible off by setting default values for elements that could otherwise be implemented diferently by diferent browsers...

so you end up with : broswer's css < reset.css < website's css file/style elements < inline style arguments < user's personal css

here is the reset.css i found a bit ago on the net and use currently :

edit : when i talk about css rule's order i do not mean the weight, that still takes over the order the diferent files are loaded.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Philippe.Lahaie

Posting Whiz

326 posts since Oct 2007

Reputation Points: 103

Solved Threads: 46

3 Months Ago