MozillaZine

CSS position in DIV

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
IslandGuy
 
Posts: 26
Joined: July 24th, 2004, 6:52 pm

Post Posted October 10th, 2004, 10:06 pm

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
 
Posts: 2379
Joined: November 19th, 2002, 5:37 pm

Post Posted October 11th, 2004, 1:30 am

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
 
Posts: 26
Joined: July 24th, 2004, 6:52 pm

Post Posted October 11th, 2004, 4:45 am

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
Moderator
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted October 11th, 2004, 7:17 am

-> Web Development

old np
 
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post Posted October 11th, 2004, 4:20 pm

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

IslandGuy
 
Posts: 26
Joined: July 24th, 2004, 6:52 pm

Post Posted October 11th, 2004, 4:35 pm

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%.
Thanks for some reason it is working now. Can't figure out what I did to make it work.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 2 guests