Div tag
Adhal
Why does the div tag in FF leave a space. In IE it doesn't.
Please excuse my ignrance. I am new to web development.
The only way I seem to be able to avoid a space with the div tag in FF is to use float, like below.
#contentBox
{
float:right
width: 635px;
background-color: #66FFFF;
}
Surely there shouldn't be a space unless I tell it.
If I style it like below it leaves a space.
#contentBox
{
width: 635px;
background-color: #66FFFF;
}
Is there a way I can stop this from happening.
Thanks
Adhal
Ryan Doherty
without it.
-Ryan
> _______________________________________________
> web-developers-general mailing list
> web-develop...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/web-developers-general
Ryan Doherty
rdoh...@mozilla.com
Adhal
http://www.adhal.org/index.htm
I am made it colourful so you can note the difference.
If you go to the test page you will see the difference in styles.
Here are the links just in case:
http://www.adhal.org/software/TEST/float.htm
http://www.adhal.org/software/TEST/margin.htm
http://www.adhal.org/software/TEST/relative.htm
In FireFox
-----------
-When using "Relative" or "Margin" I get a pink gap at the top. But also the side (I want the side one)
-When I use "Float" I no longer get the pink container to resize. You note this by the fact there is
no pink on the left side panel.
It seems div tag always causes a space at the top unless I use margin or relative tag.
Internet Explorer
------------------
Displays it all correctly. There is not Pink gap the top, & the pink container is resized accordingly.
The CSS File is here
http://www.adhal.org/css/main.css
Any advice?
Thanks
Adhal
It seems to add padding according to the element inside. So in my case it is usually <p>.
All I have to do is set the top padding of the element to 0;
Gus Richter
> Found the a fix. Without a doubt the way FF handles it is iffy.
>
> It seems to add padding according to the element inside. So in my case
> it is usually <p>.
>
> All I have to do is set the top padding of the element to 0;
No.
The <p> has a top and bottom margin which all browsers have, even inside
a div, _except_ IE. It's the top margin in the first <p> which is
affecting it.
1. Make the first <p> have margin-top:0; or
2. Remove the <p> and </p> from the first paragraph.
--
Gus
Adhal
> 2. Remove the <p> and </p> from the first paragraph.
>
Thanks Gus,
Oops I meant margin and not padding.
It is still iffy. I would have thougth that the margin in the <p> tag should not affect the margin
in the <div>. So the <P> would leave a margin within the <div> and not alter the <div> margin like
it did.
Anyway thanks for the pointers. Never thought about second solution.
Melissa Ge
Where exactly is it leaving a space that you don't want?
Adhal
> Where exactly is it leaving a space that you don't want?
Thanks but it has been fixed. I assume you are reading my post from mozilla.dev.web-development. I
actually cancelled it before you posted. Must have been in your cache.
It was due to the way FireFox deals with margins. For some unknown reason it inherits the margin
from <p> onto <div> tag. It shouldn't, though according to Richter this is what "all" other browser
do apart from IE. IE is right in my view, it makes more sense. Child objects should not affect the
Parent (position).
I posted this question in two newsgroups. The one that has been answered is at
mozilla.web-developers.general. I would have thought replies would be posted automatically in both.
I guess other newsgroup readers don't behave same way as thunderbird.
If you are interested visit mozilla.web-developers.general and search "Div tag" for a better
explanation.
Gus Richter
> Melissa Ge wrote:
>> Where exactly is it leaving a space that you don't want?
>
> Thanks but it has been fixed.
I note that you chose the second option.
> I assume you are reading my post from
> mozilla.dev.web-development. I actually cancelled it before you posted.
> Must have been in your cache.
You cannot cancel a posting. It only appears so on your Thunderbird but
not on the server.
> It was due to the way FireFox deals with margins. For some unknown
> reason it inherits the margin from <p> onto <div> tag.
You have a misunderstanding of what plays here. There is no inheriting
from <p> to <div> and neither does the child affect the parent, position
or otherwise.
What I tried to point out is that the reason for the gap from the top of
the div container to the top of the paragraph text was due to the normal
top margin which all paragraphs have (as well as bottom margins). This
is so for all _block elements_ and therefore the first solution where I
suggested to remove the paragraph's top margin.
The second item which I tried to point out was that by removing the
paragraph tags, the anonymous text then is _inline element_ and does not
have any margin. This resulted in my second solution wherein I suggested
to remove the opening and closing paragraph tags.
> It shouldn't,
> though according to Richter this is what "all" other browser do apart
> from IE. IE is right in my view, it makes more sense.
All other _conforming_ browsers. IE is not conforming in this case and
is wrong. Read here:
<http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level>
> Child objects
> should not affect the Parent (position).
Read above in the paragraph: "You have a misunderstanding ..."
--
Gus
Adhal
Adhal
> not on the server.
Thunderbird help:
"Cancel a message posted to a newsgroup. You may only cancel your own posts to a newsgroup."
Reads like you can remove you posting. Misleading for newsgroup noobs.
Why can I only cancel my own message if it only deletes my local cache?
> I note that you chose the second option.
I used both methods. Other pages use the first.
I understood the fact it was due to the margins. I already noted it, but mistakenly typed padding
when I wanted to say margin. However, I didn't understand why it appears as though it affects the
parents (margin).
One would think the child will get adjust according to the parent container.
The W3C link has cleared the matter up somewhat. Thanks for link :)
You are absolutely right the IE breaks the standard. I still think from my view, foolish it may be,
it appears wrong.
It seems it is a lot more complex than I thought and they must have their reasoning.
I believe the explanation below is what causes the issue.
"When an inline box contains a block box, the inline box (and its inline ancestors within the same
line box) are broken around the block. The line boxes before the break and after the break are
enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes. When such
an inline box is affected by relative positioning, the relative positioning also affects the block
box. "
It seem MS ignores that rule. Oh well cest la vie.
Again thanks for the link