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.
CSS position in DIV
-
- Posts: 2379
- Joined: November 19th, 2002, 5:37 pm
-
- Posts: 26
- Joined: July 24th, 2004, 6:52 pm
-
- Posts: 0
- Joined: December 31st, 1969, 5:00 pm
Re: CSS position in DIV
IslandGuy wrote:#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%.
-
- Posts: 26
- Joined: July 24th, 2004, 6:52 pm
Thanks for some reason it is working now. Can't figure out what I did to make it work.np wrote:IslandGuy wrote:#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%.