Sorry, more HTML help needed

Miscellaneous Forums/General Discussion/Sorry, more HTML help needed

OK, problem #3 in a series of 15,000,000...

I simply want a paragraph of text (in a <p> tag) to display directly below a single-cell table. What I get is a space between the bottom of the table and the paragraph text.

Can someone please tell me how I can remedy this?

I tried adding a style="padding-top: 0;" thingie to the <p> tag but that doesn't work. Not even sure if that's a legal command though, TBH. :P

Thanks!

Jake L.

If I remember right, <table> has a bottom-padding by default, so you'll need a style="padding-bottom:0" in your table-tag.

JazzieB

The <p> tag has some spacing above and below the paragraph of text. I found this rather annoying when I wanted text to line up with something else on screen (the gap is also different between IE and FF!).

Anyway, what I did was to not use the <p> tag for the first paragrah and just had it as normal. Following paragraphs use it to resume normal spacing.

big10p

Jake: That doesn't seem to work. I believe the 'padding' is the space between the cell's content and the 'edge' of the cell, not the space below the cell. Thanks, anyway. :)

JazzieB: Yeah, that seems to work - thanks. Problem is, all my <p> text on my page has a right margin of 20%. I would also need to apply this same margin to the text below the table so that it looks like a regular paragraph. So, I need to enclose that text in some kind of tag so that I can apply the margin to it. I tried enclosing it in a <body> tag but the HTML editor I'm using (nVU) just deletes the tag. :/ I guess it's not legal, or something?

I've just tried enclosing the text in a <div> instead and that seems to work but I'm sure I tried this yesterday and, for some unknown reason, it just suddenly stopped working when I added more stuff to the page.

the gap is also different between IE and FF!.

This is what's driving me nuts! Opera displays stuff exactly as I'd expect but IE seems to make things up as it goes along. I haven't even tried FF yet.

Arrrggghhhh! I'm never getting a job as a web developer, that's for sure. :)

Cheers. I'll report back here with my next problem - give me a few minutes! :P

Grey Alien

use <br> It moves to the next line without missing one out (#13). You need to position it carefully and remove <p> </p> from round your text or table, I can't tell unless you post source!

big10p

Grey, I put a <br> in like so:

.
.
.
</table>
<br>
This is my paragraph text
<br>

But that doesn't work. Did you mean something else?

Anyway, as I said above, I need to enclose the text in a tag to apply the right margin I'm using. :)

Grey Alien

You can use a <font> tag can't you?

Grey Alien

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
	hello
    </tr>
</table>
more<br>
new line

In this example, the same gap is between all 3 lines, If you add cellpadding it will increase a bit and cellspacing increases it more. There is nothing else you can do.

big10p

You can use a <font> tag can't you?

I could, I guess, but I haven't finalized the design of the page yet and won't do until it's complete. I'm trying to keep all design specifics in my internal CSS, so that I can make global changes to the page easily. If I use a <font> tag, I'll have to also asign it a class that matches the style I'm using for my <p> tags. No big deal, I guess, just seems a bit hacky. I may just give it a go, though. :)

The main problem is that I'm new to HTML and am expecting the same elegance in code as we get with most programming languages. No one told me HTML was such a dog! :P

Peter Scheutz

#10

Put your paragraph in a table.

[EDIT] Don't use <font> tags, they are deprecated.

big10p

#11

Never though of that, thanks Peter. Still seems a bit hacky, though. :)

Peter Scheutz

#12

Not more hacky than not putting you pararaph in the last cell of your table if that's where you wan't it... :)

Go with the flow man, go with the flow... ;)

big10p

#13

Hmmm, you got me thinking - maybe I'm doing my layout all wrong. :)

The paragraph isn't part of the table. I'm just using a single-cell table with a set background colour to put my headings in, so that the table 'bar' extends across the page as a kind of visual separator, like:

#####################################
#Heading#############################
#####################################
Paragraph text goes here.

I'm probably doing this all wrong. :/

Grey Alien

#14

well, try using breaks instead, those ruler things. Or make a bitmap for the heading and be done with it!

Html is a bit crap in lots of ways actually, so little control over certain things.

octothorpe

#15

I believe it's margin-top, not padding-top that's creating the space you want to get rid of. Haven't tested this in Opera, just IE and FF:

<style>
TD { font-size: 18pt; font-weight: bold; width: 300px; background-color: red; }
H2 { width: 300px; background-color: red; margin-bottom: 0; }
</style>

<table><tr><td>Heading</td></tr></table>
<p style="margin-top:0;">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

<hr>

<h2>Heading</h2>
<p style="margin-top:0;">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

Why use a single-celled table when a block element will do?

PS: this would be a great time to break out Adjacent Sibling Selectors but unfortunately they're not supported very well.

big10p

#16

Yeah, thanks octo - I've been playing with margin-top/bottom too but must have been using it wrong, or something. I can't remember all the different things I've tried, TBH. :P

Anyway, I think I'm on top of the problem now - fingers crossed.

Why use a single-celled table when a block element will do?

Do you mean something like a <div>? I was using this originally but I couldn't get it to display the same in IE as Opera.

Thanks all.

octothorpe

#17

I meant the <h2> I used above. I don't have Opera installed though. I pretty much only test in IE and FF; and when available, Safari, FF, and IE on Mac.

big10p

#18

Hmmm, using a heading tag does seem to work, too. I guess it would make more sense to use that. I seem to remember there was a reason I tried a single-cell table but can't remember what it was. :/ I'll have a play tomorrow and see what works out best. Cheers.