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

Discussion in 'Web Design and Development' started by kolax, Nov 27, 2008.

  1. kolax macrumors G3

    Joined:
    Mar 20, 2007
    #1
    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.
     
  2. dalvin200 macrumors 68040

    Joined:
    Mar 24, 2006
    Location:
    Nottingham, UK
    #2
    you could try a border="0" in your <img>?

     
  3. kolax thread starter macrumors G3

    Joined:
    Mar 20, 2007
    #3
    Thanks for the reply - I eventually decided just to add another row to the table and stick the image in there.
     
  4. savar macrumors 68000

    savar

    Joined:
    Jun 6, 2003
    Location:
    District of Columbia
    #4
    You could put the table inside the <p>

    Edit: Or use <div> instead of <p>
     
  5. kolax thread starter macrumors G3

    Joined:
    Mar 20, 2007
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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.
    Code:
    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.
     
  7. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #7
    @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:

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

    Code:
    p#banner_image {
        margin: 0;
        padding: 0
    }
    
    -jim
     
  8. kolax thread starter macrumors G3

    Joined:
    Mar 20, 2007

Share This Page