SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation DIVs in HTML: 4.01 Transitional?

    I'm trying to validate a page as HTML 4.01 transitional, but I'm having problems with some DIVs inside a nested table that I've used to align a single word to the right.


    <table cellspacing="0" cellpadding="0" class="wide">
    <tr>
    <td valign="top" width="132"><img src="blah.gif" width="64" height="64" alt="&gt;&gt;"></td>
    <td valign="top" width="11" class="vertical">&nbsp;</td>
    <td valign="top" width="327">
    <p><font class="headline">blah blah</font></p>
    <p><font>blah blah</font>
    <br>
    <br>
    <font>blah blah blah
    <br>
    <div class="right"><a href="http://www.blahblah.com/">More</a></div></font></p>
    </td>
    </tr>
    </table>


    The class 'right' is simply text-align: right;

    The W3C validator is choking on the divs- giving me...

    Error: element "DIV" not allowed here; possible cause is an inline element containing a block-level element


    Spans validate ok, but lose the right alignment.

    I need a way round this that still aligns the word More to the right.
    I need to find it fast.

    Big, huge, enormous thanks in advance
    Last edited by Bill Posters; May 22, 2002 at 10:33.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the FONT tag inside the DIV tag. FONT is the inline element that the validator is referring to.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you also tried using span instead of div?

    <span align="right">
    or
    <span style="text-align;">
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    spans don't work. It won't use the positioning attributes.

    I created an extra closing </font> tag so that I could next the <font>...</font> tags within the <div>

    Now the validator is questioning the closing </p> tga, saying...

    Error: end tag for element "P" which is not open; try removing the end tag or check for improper nesting of elements

    The new structure is which is giving me the <p> tag errors is...

    <table cellspacing="0" cellpadding="0" class="wide">
    <tr>
    <td valign="top" width="132"><a href="..." class="mainnav"><img src="blah.gif" width="64" height="64" alt="&gt;&gt;"></a></td>
    <td valign="top" width="11" class="vertical">&nbsp;</td>
    <td valign="top" width="327">
    <p><font class="headline">...</font></p>
    <p><font>...</font>
    <br>
    <br>
    <font>... <a href="..." class="headline">...</a> ...</font>
    <div class="right"><font><a href="...">More</a></font></div></p>
    </td>
    </tr>
    </table>
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm...

    Is the DIV being used once? If it is, then why not set the font style for the text inside the DIV in the DIV selector in your stylesheet? Then you won't have to use a FONT tag in that position.

    You could try this:
    <td valign="top" width="327">
    <div>
    <font class="headline">...</font>
    <br><br>
    <font>...</font>
    <br><br>
    <font>... <a href="..." class="headline">...</a> ...</font>
    <div class="right"><a href="...">More</a></div>
    </div>
    </td>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    SitePoint Zealot 19nine78's Avatar
    Join Date
    Feb 2002
    Location
    Ayr, scotland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Error: end tag for element "P" which is not open; try removing the end tag or check for improper nesting of elements
    You can't place a <div> inside a <p>.
    the The w3c says so

    The P element represents a paragraph. It cannot contain block-level elements (including P itself).
    Creole's suggestion is pretty much the same as I came up with.

    cheers

    alastair

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The final incarnation that went off yesterday was...

    <table cellspacing="0" cellpadding="0" class="wide">
    <tr>
    <td valign="top" width="132"><a href="http://..." class="mainnav"><img src="blah.gif" width="64" height="64" alt="&gt;&gt;"></a></td>
    <td valign="top" width="11" class="vertical">&nbsp;</td>
    <td valign="top" width="327">
    <p><font class="headline">...</font></p>
    <p><font>...</font>
    <br>
    <br>
    <font>... <a href="http://..." class="headline">...</a> ...</font>
    <div class="right"><font><a href="http://...">More</a></font></div><br>
    </td>
    </tr>
    </table>


    I wasn't totally comfortable with this as it lacks a </p> tag, but still validates.

    I could have also done this...
    ...
    <font>... <a href="http://..." class="headline">...</a> ...</font></p>
    <div class="right"><font><a href="http://...">More</a></font></div>
    </td>
    </tr>
    </table>


    ...but I would have needed to place a <br> after the closing </div> to linebreak space beneath the word 'More'. ...
    ...
    <font>... <a href="http://..." class="headline">...</a> ...</font></p>
    <div class="right"><font><a href="http://...">More</a></font></div><br>
    </td>
    </tr>
    </table>


    Both ways validated ok, but the one with the trailing <br> seemed untidy to me, so I went with the first option (no closing </p> tag).

    I'm still not happy, but it validated.

    Perhaps I've just been playing with xhtml too much and expect everything to be closed

    thx again for the help guys
    Last edited by Bill Posters; May 21, 2002 at 22:30.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can't put DIV's inside a Paragraph tag... You would have to switch them around.

    You could always make a paragraph class with no extra line return by using negative borders. But then you could use paragraphs within your DIV and get rid of most of the linebreaks (<BR>) and still get the same formatting...

    If you want to move more into 4.01 strict and XHTML transitional you should change your font tags into spans though.
    Wayne Luke
    ------------


  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wayne...

    You don't even need negative borders. Simply specifying

    p.something {margin: 0px; }

    will remove the extra line break on a p tag with a class of "something". The P will still incldue a line break equal to one <br> tag.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay that is an even better solution... Wasn't sure how the browsers handled the line feed and didn't test it. I did know you can overlap elements by using negative borders easily and it even works properly in Netscape 4.7 which doesn't always like absolute positioning.
    Wayne Luke
    ------------



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •