473,734 Members | 2,514 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 8831
Gustaf Liljegren <gu*****@algone t.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*****@algone t.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*****@algone t.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
1841
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 1px on 3 sides. It looks the same in firefox and ie. Then the same box is wrapped in yet another box with a red border on the bottom. In Firefox the 'middle' box still has padding on only 3 sides, and the red border is showing on the bottom. In...
5
28855
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, there's one <div> of 400px and another of 200px, laying side by side. The right <div> has padding on the left and right, to add some space within the box, but Firefox (0.9.2) seem to confuse paddings as margins. Here's the right <div> in my CSS:
2
6754
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
25429
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 http://www.geocities.com/binnyva/code/javascript/jasfer/ The problem that I have is that this script works only in IE. The XML reading part goes fine - but I don't know how to access the DOM sturcture in Firefox. The used code is given below.
4
1291
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 password dialog box appear with Mozilla Firefox? Greg
3
2362
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 are incorrectly positioned. VS sets the positioning of the controls to absolute, and because the DIV is to the right of another DIV Firefox (correctly, I suspect) positions the controls absolutely, which means they are too far to the left, while...
36
3041
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 get this kind of inconsistent result. -- ----------------------------------------------------------------------------- | Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
10
12905
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 you look at it in IE (6 or 7), you find it also looks fine, except for the top margin missing from the links across the top of the page. That's not the main issue here, but any pointers as to why it doesn't show them would be appreciated.
3
1417
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 have the following elementID in my One.CSS file... #masthead { text-align: right; margin-right: 13px; margin-left: 13px;
0
8777
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9310
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9237
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6737
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6033
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4551
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4813
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3262
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2180
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.