CSS position in DIV

[IslandGuy]

I am using FireFox 1.0 Preview
I am having a problem with CSS position on a DIV in FireFox

If I specify absolute

#header {
position: absolute;
top:0;
width: 100%;
margin: 12px 0 0 0;
background-color: #FFFFFF;
border: 1px solid #000000;
background-image: url(images/bk1.jpg);
}

The graphic appears within the DIV but the width is more like 110% instead of 100%

A sample can be seen here:

http://www.stempsoft.com/csssample1.htm


If I use relative addressing:

#header {
position: relative;
width: 100%;
margin: 12px 0 0 0;
background-color: #FFFFFF;
border: 1px solid #000000;
background-image: url(images/bk1.jpg);
}


The width works properly but the grpahic does not appear within the DIV.

A sample can be found here:


http://www.stempsoft.com/csssample2.htm

Is this something I should report to Bugzilla or am I doing something wrong?

Both samples work fine in IE.

I can get it to work in Firefox if I just throw in some <br> tags.

And I just noticed the animation in the gif does not seem to work under FireFox.

[mw22]

You are doing something wrong.
The image is floating inside the div, so it doesn't take up any space in the normal flow.
If you would put the <br clear="all"> just after the paragraph, it will work. Or you could make the <div id="header"> a display:table one, but that is not supported in IE.

[IslandGuy]

Sorry I am a little dense you say

"If you would put the
just after the paragraph, it will work."

I have

<div id="header">
<img border="0" src="images/sslogo.gif" align="left"><p><a href="index.htm">Home</a>
<a href="contact.htm">Contact</a></p></div>


where do I need to put the image tag?

[old jasonb]

-> Web Development

[old np]

#header {
position: absolute;
top:0;
width: 100%;
margin: 12px 0 0 0;
background-color: #FFFFFF;
border: 1px solid #000000;
background-image: url(images/bk1.jpg);
}

The graphic appears within the DIV but the width is more like 110% instead of 100%

If I recall correctly, margin gets added to the width instead of substracted like in IE. So, your width is 100% of the containing block, plus 12 pixels. You could try setting width to 99% and margin to 1%.

[IslandGuy]

#header {
position: absolute;
top:0;
width: 100%;
margin: 12px 0 0 0;
background-color: #FFFFFF;
border: 1px solid #000000;
background-image: url(images/bk1.jpg);
}

The graphic appears within the DIV but the width is more like 110% instead of 100%

If I recall correctly, margin gets added to the width instead of substracted like in IE. So, your width is 100% of the containing block, plus 12 pixels. You could try setting width to 99% and margin to 1%.

Thanks for some reason it is working now. Can't figure out what I did to make it work.