471,598 Members | 1,162 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

how to display images without gap

Hi!
im unable to make the images displayed beside each other wihtout gaps.

this is my code:
[html]
<table width=600 hight=800>
<tr>
<td>
<a href="Images/bg2.gif" target="_blank"> <img src=Images/pic2.jpg></a>

<a href="Images/bg2.gif" target="_blank"> <img src=Images/pic2.jpg></a>

<a href="Images/bg2.gif" target="_blank"> <img src=Images/pic2.jpg></a>
</td></tr>
</table>
[/html]
but in the output the images have space inbetween. is there a way to put them without any space . thx
Oct 22 '07 #1
10 3135
drhowarddrfine
7,435 Expert 4TB
This happens because images are always inline, just like text, and create 'inline boxes'. So you have to simply change the property of the div to 'display:block'. The only problem is that block level elements occupy the full width of the page so 'float:left' will keep them on the same line.
Oct 23 '07 #2
This happens because images are always inline, just like text, and create 'inline boxes'. So you have to simply change the property of the div to 'display:block'. The only problem is that block level elements occupy the full width of the page so 'float:left' will keep them on the same line.

thx for ur help. it works for the top and bottom images, but the image on the horizontal level still have gabs. i don know how to resolve this.
Oct 23 '07 #3
drhowarddrfine
7,435 Expert 4TB
Well, it shouldn't, so post a link or your markup.
Oct 23 '07 #4
JamieHowarth0
533 Expert 512MB
Hi there,

Try using:
Expand|Select|Wrap|Line Numbers
  1. <table style="border:0px;padding:0px;margin:0px;">
  2.  
Normally works for me. Hope it helps!

Best regards,

medicineworker
Oct 23 '07 #5
Hi there,

Try using:
Expand|Select|Wrap|Line Numbers
  1. <table style="border:0px;padding:0px;margin:0px;">
  2.  
Normally works for me. Hope it helps!

Best regards,

medicineworker

thx for all ur help.
Oct 24 '07 #6
drhowarddrfine
7,435 Expert 4TB
Well, there you go, and me spouting off on the other stuff and not paying attention to the fact that the images are in a table. My advice applies to non-table images (not that I would ever lay a page out using tables :) ).
Oct 24 '07 #7
JamieHowarth0
533 Expert 512MB
Well, there you go, and me spouting off on the other stuff and not paying attention to the fact that the images are in a table. My advice applies to non-table images (not that I would ever lay a page out using tables :) ).
Lol - even the W3C Schools' website uses tables for layout (which technically isn't a conformity to their own WAIA standards, as you're really meant to use <div>'s - but everyone knows that... don't they... like I do on my website *cough* not *cough* 8-)).

medicineworker
Oct 24 '07 #8
drhowarddrfine
7,435 Expert 4TB
W3CSchools is in no way affiliated with the W3C.
Oct 24 '07 #9
JamieHowarth0
533 Expert 512MB
W3CSchools is in no way affiliated with the W3C.
My apologies, you are correct (W3 Schools is (c) Refsnes Data).
My boo-boo.

med
Oct 24 '07 #10
The reason as mentioned above (as I recently found out) is because you have your linked images on separate lines of the HTML. Put them all on the same line w/out the breaks in the code. OR you can use display:inline for the img.
Feb 13 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.