473,320 Members | 1,861 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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
Jul 20 '05 #1
7 8809
Gustaf Liljegren <gu*****@algonet.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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2
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
Jul 20 '05 #3
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/
Jul 20 '05 #4
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
Jul 20 '05 #5
Gustaf Liljegren <gu*****@algonet.se> wrote in
news:cf**********@green.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/
Jul 20 '05 #6
Gustaf Liljegren <gu*****@algonet.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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #7
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
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Red | last post by:
This is apparently an ie display bug, I can't seem to figure out which ie bug this is. a 3 sided border is created by wrapping the 'inner' box in the 'middle' box and padding the 'middle' box...
5
by: Gustaf Liljegren | last post by:
I use to trust Firefox, but in this case, I don't know what to think. My test page: http://gusgus.cn/test/index.html IE6 does the right thing. The containting <div> is 600px, and within it,...
2
by: StarQuake | last post by:
At this site: http://forwarding.robas.com You can see in IE there is cell padding in 'Berkman Bedrijven' and with Firefox there isn't. I don't want any cell padding. Anyone? --...
3
by: binnyva | last post by:
Hi everyone. I just made a JavaScript program to read a RSS feeds and display it in a HTML file. The script - Jasfer or JAvaScript FEed Reader - is available at...
4
by: Greg Burns | last post by:
I think I already know the answer to this, but I'll ask anyways. If I uncheck anonymous access and check Integrated Windows authentication (an intranet webapp), is there anyway to not have the...
3
by: Dave | last post by:
I am designing a web page using VS2003 ASP.NET. The page contains various DIVs (panels), one of which is in grid layout. The controls in this DIV render correctly in IE, but when using Firefox they...
36
by: phil-news-nospam | last post by:
Here is a simpler (no drop shadows) example of the padding bug I see: http://phil.ipal.org/usenet/ciwas/2006-05-08/buttons-1.html So far I find nothing in the CSS2 document that says I should...
10
by: Alan Silver | last post by:
Hello, In my (seemingly) endless quest to understand CSS, I have yet another problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in Opera, where you will see it how I expected. If...
3
by: GaryDean | last post by:
If you go to my website, www.deanblakely.com, in I.E. you will see that it displays fine but if you browse it in FireFox 1.7 you will see stuff on the Master Page that is not alligning right. I...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.