Member Avatar for K?!

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.)

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.

  • 4 Contributors
  • 8 Replies
  • 97 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by xigmapro

Recommended Answers

All 8 Replies

Member Avatar for Elbudster

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.

<!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>
Member Avatar for K?!

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

* { 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?

Member Avatar for K?!

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.

Member Avatar for Elbudster

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

* { 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.

Member Avatar for K?!

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.

Member Avatar for Troy III

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.

Edited by Troy III because: n/a
Member Avatar for K?!

Ok, thank you.

Member Avatar for xigmapro

I want to solve your problem by discussing mu client. May be she solve it. Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.