Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

image in form

Posted on 1999-06-22
10
Medium Priority
?
190 Views
Last Modified: 2010-04-09
I have a gif image witch is 483*190 Pixel. I would now like it to fit into a table like this:
<table border=0 cellpadding=0 cellspacing=0>
<tr><td>
<img src="images/myimg.gif" border=0>
</td></tr>
</table>
In Netscape (4.5) the image just won't fit in:-( Theres a space about 3-5 Pixels large at the bottom of the image! I can't have that space because i need a seemless page. I tried Opera and IE and IE was the only browser to do this correctly.
0
Comment
Question by:lucasbickel
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 4

Expert Comment

by:siabod
ID: 1851026
Why don't you give a height to the image then ? 483*187 ?

0
 

Author Comment

by:lucasbickel
ID: 1851027
The image once had a height of 184 I the made it 190 because I thought that I could make it work with a other number. I also tried setting the hight attribute of the Table-delimiter to the height of the image, but that didn't work to.


0
 
LVL 9

Expert Comment

by:TTom
ID: 1851028
What else is in the table?  If you are trying to get two images to blend seamlessly in two rows of a table, you will probably not be able to do it in NS.  There are a couple of places where NS insists on a small border space, and I believe table cells is one of them.

Tom
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 7

Expert Comment

by:nettrom
ID: 1851029
you'd probably also like to make sure there's no whitespace between the table start- and end-tags and the image tag.  like this:

<td><img
src="images/myimage.gif"
border="0"></td>
0
 
LVL 1

Expert Comment

by:syrinx
ID: 1851030
you can also give a HEIGHT and WIDTH for the table..
0
 
LVL 1

Expert Comment

by:BillyAbbott
ID: 1851031
take out the line feeds.

<table border=0 cellpadding=0 cellspacing=0>
<tr><td><img src="images/myimg.gif" border=0></td></tr>
</table>  


it worked for me.... :>
0
 

Author Comment

by:lucasbickel
ID: 1851032
Taking out the line-feeds does work! I would like a solution that makes the code look more legant but this way will do, thanks alot. Does anybody now why this is happening?
0
 
LVL 7

Expert Comment

by:nettrom
ID: 1851033
It's because of the brower's way of dealing with whitespace.

whitespace really doesn't matter much unless there's some actual content in the element that you're concerned about.  in your code you have this:

<td><img src=" ... "></td>

if you write the code like I did, without any line breaks (easy when you have an editor that wraps lines for you automagically) there will not be any whitespace in the _content_ of the table cell element (TD).  that in turn means that the browser will not show any spacing.

but if you do it like this:

<td>
<img src=" ... ">
</td>

what you're actually saying is that the content of the table cell is:

<td> <img src=" ... "> </td>

because the line feeds (/CR) in your document converts to single spaces.  so, the browser puts those single spaces into the document when it's rendered, and the image shows up with some space around it.  it's a common problem when you're used to putting in line-breaks in your code to make it easy to read. :)

so, who gets the points?
0
 

Author Comment

by:lucasbickel
ID: 1851034
To me it seems, that you (nettrom) came up first with the solution so i think that you deserve the points.

0
 
LVL 7

Accepted Solution

by:
nettrom earned 400 total points
ID: 1851035
thanks, I'll summarize and mark it as an answer. :)

the problem arises from the table cell's content, which because of the line breaks in the code contains whitespace.  this code:

<td>
<img src="images/myimg.gif" border=0>
</td>

is because of whitespace conversion (CR/LF to regular spaces) equivalent to writing

<td> <img src="images/myimg.gif" border=0> </td>

as you can see the content of the table cell is now suddenly an image and two spaces.  the first isn't rendered by the browser, but the second is, which means that the image doesn't line up with the edges of the table cell.  this is a common problem, and it's easily fixed by removing all whitespace in the table cell's content.  if you have an editor that does line-wrapping for you it's easy to simply put the whole table cell's content on one line, whithout whitespace.  e.g:

<td><img src="images/myimg.gif" border=0></td>

if you have to put in line breaks put them in during the image element, where whitespace doesn't matter, e.g:

<td><img
src="images/myimg.gif"
border=0></td>

that way, the content of the table cell doesn't change, both ways say it's only an image (no white space), but they look a lot different. :)
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question