Another padding problem in Firefox

I continued on the example shown earlier today:

http://gusgus.cn/test/index.html

Now I get some unwanted space in Firefox (the red space just below the
first image) which doesn't appear in IE6. I've double-checked the CSS
for any padding or margings than may cause it, but have found none. How
can I remove it?

Thanks,

Gustaf

Gustaf Liljegren <gustafl (AT) algonet (DOT) se> wrote:

I continued on the example shown earlier today:

http://gusgus.cn/test/index.html

Now I get some unwanted space in Firefox (the red space just below the
first image) which doesn't appear in IE6. I've double-checked the CSS
for any padding or margings than may cause it, but have found none. How
can I remove it?

The image is an inline element, thus it creates a line box. The image
sits on the baseline of this line box. There is room beneath the
baseline for any descenders that letters in the line box may have. The
fact that you don't have letters in there at all is irrelevant as far
as Gecko browsers like FireFox are concerned (and Opera and probably
others).

The solution is to make the image a block element so that it doesn't
generate a line box.
#top img {display: block;}

BTW, what's the point of the paragraph <p class="first last"> ? It
doesn't seem to be marking up an actual paragraph. You might want to
consider removing it.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Steve Pugh wrote:

#top img {display: block;}

Great. Thanks.

BTW, what's the point of the paragraph <p class="first last"> ? It
doesn't seem to be marking up an actual paragraph. You might want to
consider removing it.

I know it's ugly, but I have found no other way to eliminate the
unwanted space around paragraphs. I wish to have no space above the
first <p> and no space below the last. If there's only one <p>, the
space should be supressed both above and below, so that's why all
paragraphs has this class="first last" attribute in the example.
Normally, it would look something like:

<p class="first">...</p>
<p>...</p>
<p>...</p>
<p class="last">...</p>

I'd welcome a better solution of course. :-)

Gustaf

Gustaf Liljegren wrote:

Steve Pugh wrote:


#top img {display: block;}


Great. Thanks.


BTW, what's the point of the paragraph <p class="first last"> ? It
doesn't seem to be marking up an actual paragraph. You might want to
consider removing it.


I know it's ugly, but I have found no other way to eliminate the
unwanted space around paragraphs. I wish to have no space above the
first <p> and no space below the last. If there's only one <p>, the
space should be supressed both above and below, so that's why all
paragraphs has this class="first last" attribute in the example.
Normally, it would look something like:

p class="first">...</p
p>...</p
p>...</p
p class="last">...</p

I'd welcome a better solution of course. :-)

An alternate solution can be that if you mostly wish to use <p> with no
margins at all (as current in your testpage above) then use

p { margin: 0px;}

and if you like, for the exeptional cases

p.first {margin-top: 0.6px;}
p.last {margin-bottom: 0.6px;}

Of cause you can change the "first" and "last" to "top" and "bottom" or
something else you like, and margins to whatever you like :-)

--
Arne
http://w1.978.telia.com/~u97802964/

Gustaf Liljegren <gustafl (AT) algonet (DOT) se> wrote in
news:cf8fl4$crb$1 (AT) green (DOT) tninet.se:

BTW, what's the point of the paragraph <p class="first last"> ?

I know it's ugly, but I have found no other way to eliminate the
unwanted space around paragraphs. I wish to have no space above the
first <p> and no space below the last. If there's only one <p>, the
space should be supressed both above and below, so that's why all
paragraphs has this class="first last" attribute in the example.
Normally, it would look something like:

p class="first">...</p
p>...</p
p>...</p
p class="last">...</p

I'd welcome a better solution of course. :-)

I don't know how practical it is, but using
CSS2 adjacent sibling selectors you should
be able to do something along the lines of:
- wrap all paragraphs inside a div
- set the default for all paragraphs inside
the containing div to have no space above
or below
- use adjacent sibling selectors to indicate
that all paragraphs that follow a paragraph
have top spacing

--
Dave Patton
Canadian Coordinator, Degree Confluence Project
http://www.confluence.org/
My website: http://members.shaw.ca/davepatton/

I dare not start a new thread now, but I seem to have encountered yet
another padding "problem" in Firefox. My page:

http://gusgus.cn/test/

Here's the CSS that won't work:

#left {
float: left;
width: 390px;
overflow: hidden;
background-color: #DDFFDD; /* green */
text-align: justify;
padding: 10px 10px 10px 0px;
border-right: 5px solid black;
}

When the let column is rendered in Firefox, its right padding is 20
pixels, not 10. No matter what value I put there, Firefox doubles it! Is
there a reason for this too?

Gustaf

Gustaf Liljegren <gustafl (AT) algonet (DOT) se> wrote:

Steve Pugh wrote:

BTW, what's the point of the paragraph <p class="first last"> ? It
doesn't seem to be marking up an actual paragraph. You might want to
consider removing it.

I know it's ugly, but I have found no other way to eliminate the
unwanted space around paragraphs.

In this case why are you using a paragraph at all? Get rid of the
paragraph and you don't need to worry about the margins at all.

You have <div><p><img></p></div> with styles to remove the margins
from the <p>. Why not just <div><img></div> ?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Gustaf Liljegren wrote:

I dare not start a new thread now, but I seem to have encountered yet
another padding "problem" in Firefox. My page:

http://gusgus.cn/test/

Here's the CSS that won't work:

#left {
float: left;
width: 390px;
overflow: hidden;
background-color: #DDFFDD; /* green */
text-align: justify;
padding: 10px 10px 10px 0px;
border-right: 5px solid black;
}

When the let column is rendered in Firefox, its right padding is 20
pixels, not 10. No matter what value I put there, Firefox doubles it! Is
there a reason for this too?

Gustaf

Since you float left, #left, it is taken out of the normal flow. Padding
(or margin) will affect the box itself which you don't want. The
solution, and proper method, is to remove the padding from #left and to
instead apply margin to its content as in:

#left {
float: left;
width: 390px;
overflow: hidden;
background-color: #DDFFDD; /* green */
text-align: justify;
/* padding: 10px 10px 10px 0px; */
border-right: 5px solid black;
}
#left p { margin: 10px 10px 10px 0; }

The reason I use margin instead of padding, is that padding would give
you extra spacing between paragraphs, whereas margin is collapsed.

--
Gus