HTML 4.01 - <p>IMAGE</p> queries

[kolax]

Here is the code I'm using:

<p><img src="Images/banner.jpg" alt="Banner" width="600" height="120"></p>

I need to use the paragraph syntax in order for this pass the W3C HTML validation test, however I want the image to snap up with what is below it (a table). Without the paragraph statement, it snaps up fine, however obviously because it is a paragraph, there is spacing after the banner image.

What other statement can I use (I'm using a CSS file too) that will comply with HTML 4.01 validation rules that will enable the banner to snap with the table?

Thanks.

 

[dalvin200]

you could try a border="0" in your <img>?

Here is the code I'm using:

<p><img src="Images/banner.jpg" alt="Banner" width="600" height="120"></p>

I need to use the paragraph syntax in order for this pass the W3C HTML validation test, however I want the image to snap up with what is below it (a table). Without the paragraph statement, it snaps up fine, however obviously because it is a paragraph, there is spacing after the banner image.

What other statement can I use (I'm using a CSS file too) that will comply with HTML 4.01 validation rules that will enable the banner to snap with the table?

Thanks.

 

[kolax]

Thanks for the reply - I eventually decided just to add another row to the table and stick the image in there.

 

[savar]

Thanks for the reply - I eventually decided just to add another row to the table and stick the image in there.

You could put the table inside the <p>

Edit: Or use <div> instead of <p>

 

[kolax]

What does <div> do that differs it from <p>?

 

[angelwatt]

What does <div> do that differs it from <p>?

It doesn't have the same default margins and padding that paragraph tags do. You could also use CSS to make the p tag not have those extra spacing.

p {
 margin: 0;
 padding: 0;
}

but you would probably want to make the CSS selector more specific than just p, as you likely don't want that to be applied to all paragraphs on the page. I can't give you a more specific selector without seeing your code. You're better off using the div tag though.

Also, if you really want to setup the pages properly, you should use CSS to do the entire layout. It sounds like the layout is currently being done with tables.

 

[SrWebDeveloper]

@OP

If you must use the <p> wrapped around that image then do this to uniquely identify and affect only that <p> tag as angelwatt mentioned:


HTML:

<p id="banner_image"><img src="Images/banner.jpg" alt="Banner" width="600" height="120"></p>

CSS:

p#banner_image {
    margin: 0;
    padding: 0
}

-jim

 

[kolax]

Fantastic - thanks for the replies!