HTML and CSS

Basic question about positioning, margins and paddings

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2008

Posts: 69

Reputation: K?! is an unknown quantity at this point

Solved Threads: 0

K?!

Offline

Junior Poster in Training

Basic question about positioning, margins and paddings

Nov 5th, 2009

Hi all

I want a header to stick to the top of the browser window and left and right to it. (pretty standard, right?)

I have configured the following things for this: (never mind the colors, those ar just for testing purpose.)

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

body {
margin: 0;
padding: 0;
border: 0;
 
background: black;
}
 
#header {
background: red;
 
height: 80px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}

But Firefox, IE and Chrome are STILL displaying space between the top of the browser window and the header div. (haven't tested other browsers yet)

Any help?
Thanks in advance
Greetings, K?!

Ps: sorry if this question has already been asked.

Heaven ain't got no ghetto. It's got pearly gates and streets of gold.

•

Join Date: Sep 2004

Posts: 13

Reputation: Elbudster is an unknown quantity at this point

Solved Threads: 1

Elbudster

Offline

Newbie Poster

Nov 5th, 2009

The styles you included worked for me. DIV's by nature, unless explicitly told otherwise, will fill 100% of the width of its parent element, so you don't have to specify that. Can paste this in a new html file and it should work. Basically all the styles are yours yet, I just condensed them a little.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>
<title>CSS Example</title>
<style type="text/css">
* { padding: 0; margin: 0; }
 
body {
	background: black;
}
 
#header {
	background: red;
	height: 80px;
}
</style>
</head>
<body>
 
<div id="header"></div>
 
</body>
</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>
<title>CSS Example</title>
<style type="text/css">
* { padding: 0; margin: 0; }

body {
	background: black;
}

#header {
	background: red;
	height: 80px;
}
</style>
</head>
<body>

<div id="header"></div>

</body>
</html>

•

Join Date: Apr 2008

Posts: 69

Reputation: K?! is an unknown quantity at this point

Solved Threads: 0

K?!

Offline

Junior Poster in Training

Nov 5th, 2009

I was like "ok, it certainly doesn't do it for me", but it's the

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

* { padding: 0; margin: 0; }

in the CSS that does the trick.

I am in doubt whether to use this or not. It does the trick indeed, but on the other hand, EVERY margin and padding I need will have to be defined. So when a in the css undefined component pops up, it will have no margin or padding, and that's not really good.

I was wondering if fixed positioning at top 0 is a safe solution?

Heaven ain't got no ghetto. It's got pearly gates and streets of gold.

•

Join Date: Apr 2008

Posts: 69

Reputation: K?! is an unknown quantity at this point

Solved Threads: 0

K?!

Offline

Junior Poster in Training

Nov 5th, 2009

I had the margin and padding of the html and the body element set to 0, I would really like to know which element it is that is still preserving a space between the header and the top of the browser window.
If I know that, I can set that specific element's margin and padding to 0, without removing all the other margins and paddings.

Heaven ain't got no ghetto. It's got pearly gates and streets of gold.

•

Join Date: Sep 2004

Posts: 13

Reputation: Elbudster is an unknown quantity at this point

Solved Threads: 1

Elbudster

Offline

Newbie Poster

Nov 5th, 2009

I copied/pasted your CSS code directly and it worked for me, even before I added the * declaration. Does your file include a DTD? I've had some browsers not want to apply styles correctly without one.

As far as

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

* { padding: 0; margin: 0; }

goes...

I use it in almost every project I do. Yes you have to explicitly set the padding and margin of elements you want to use, but the amount of padding/margin that browsers apply by default varies... so this achieves somewhat of the effect that reset style sheets are used for in order to achieve a more consistent look between browsers.

•

Join Date: Apr 2008

Posts: 69

Reputation: K?! is an unknown quantity at this point

Solved Threads: 0

K?!

Offline

Junior Poster in Training

Nov 6th, 2009

Yes, I know it's kind of interesting, but the problem is that 1: I'm pretty new, and 2: I'm making a website for someone to manage with a CMS, so I might overlook an element he might use lateron, and then it will have no margin or padding. So indeed it will vary in different browsers, but at least it will be there.

Heaven ain't got no ghetto. It's got pearly gates and streets of gold.

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Nov 6th, 2009

Since years now, html element is a part of the document layout. You are seing the gap padding of the html now

you dont need the * selctor of course, its tricky and will cause much trouble as you develop further, jus try to add to it display: block and see what happens with fx sf and op render ...

the proper way to remove that padding safetly in all browsers is to use
html, body{...} selector.

Last edited by Troy III; Nov 6th, 2009 at 4:12 pm.