• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

important HTML tidbit

 
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi all,

I have been having a problem with my HTML rendering as it should. I'm
using tables as containers to organize the home page of my application.
It contains a lot of images, text boxes, Submit buttons (all on the same
page). Well, the rendering problem was that IE appeared to ignore the height attribute on the <td> when height was specified at anything less than 15.

Now, I don't know about everyone else, but the importance readability of
code has been pounded into my head since school. So, of course, I've been
trying to make my HTML code as readable as possible. For example:

<table>
<tr>
<td height="5" width="100">
<img src="imageName">
</td>
</tr>
</table>


DO NOT do this! Whitespace is the reason my smaller cell heights were not rendering correctly. Do not use spaces or line breaks between the
<td> tag and the contents of the cell!

I changed my code as follows:

<table>
<tr>
<td height="5" width="100"><img src="imageName"></td>
</tr>
</table>

and it renders beautifully.

I'm sure there are a lot of HTML experts out there who knew this,
but I posted this in hopes that I could save someone (even
one person) some time and frusteration.

 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
With IE, you have to make sure you put it into compliance mode and you need to use CSS and set the line height. That keeps it from having that problem.

Eric
 
Ranch Hand
Posts: 1211
Mac IntelliJ IDE
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
A similar tidbit-

I was once told to fix a bug in a web application. Every time a page was submitted, it mysteriously added a newline to a field in the database, even when the user did not change anything.

Guess where the problem was!

A textarea field coded like

<textarea>blah blah
</textarea>

Thanks to almighty 'Search and Replace', I was able to change them all in on e go to
<textarea>blah blah</textarea>
 
Maria Sills
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sonny,

Thanks for that tip. I have a form with a textarea coded for readability like that. It hasn't been fully tested yet, and I'm sure that would have come into play at some point or other.

Regards,

--ms
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It is common for IE to add white space if there is a break between tags, same thing can happen with table cells, paragraph tags, divs, etc.

Eric
 
Maria Sills
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for the info, Eric.

So, what's the accepted "best" practice? Just accept these limitations, and work around them as best you can? Surely, it's not to string all/most HTML tags on one long ugly line?!

--ms
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
In 99.9% of your HTML the line breaks are immaterial. So only worry about it in places that are causing concrete problems.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
To add what Bear says..

I would not mess up format unless you see this gap and it is messing up your gap!
 
Maria Sills
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thank you, Bear & Eric. That helps.

Regards,

--ms
 
Ranch Hand
Posts: 823
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
From my personal experience I've found it's only having the closing tag on it's own line that causes unwanted whitespace, the main culprit being </td> tags (there's even a special setting for it in Dreamweaver!). I would echo Bear and Eric in saying don't compromise your code layout unless you find you have to. I've found that moving towards more standards-based HTML using CSS, with an eye to accessibility reduces the incidence of this kind of problem, e.g. no layout tables.

Jules
 
Maria Sills
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Jules,

Thanks for the info. So far, my CSS experience has involved "borrowing" a coworker's CSS file which contains only font descriptions. I am scheduled to attend a two-day CSS class the first week in Oct., so maybe after that I will know of better ways to lay out my pages.

This whole project (using HTML, JSP, Java, Struts -- 44 Use Cases) has been a huge learning experience for me. My biggest problem is that every time I learn about something that may have a significant impact on my application, I want to go back and redo everything to incorporate what I've just learned about. I have no doubt that this will be the case after learning more about CSS.

Regards,

--ms
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
http://www.w3schools.com/css/default.asp

Eric
 
Maria Sills
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for the link, Eric. I skimmed it Friday, and I think it will help me a lot.

--ms
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Another great link for CSS tutorials is :EchoEcho

I should have also posted that too.

Eric
 
Maria Sills
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Cool. Thanks. I'll check it out.

--ms
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic