Jump to content

noob image question


marderiii
 Share

Recommended Posts

The code below displays some simple square images -- however, there are spaces between the images... how can I get rid of them?

<html><head><title>Map</title></head><body><body bgcolor="black"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><br><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"><img src="grass10-10.gif"></body></html>

test

Link to comment
Share on other sites

that happens to me quite a bit also.The only thing that i found that fixes it is to:1.)Put every image in the same row of code2.)Put each row in its own table cell and set the padding and cellspacing to 0

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

instead of putting that break, start a new <tr> tag.Try that.

Link to comment
Share on other sites

in the head section put this

<style type="text/css">img{border: 0px;margin: 0px}</style>

that should work i think, even if it doesnt you should do that to stop firefox putting a border around themedit: the firefox thing only happens for links, i dont think my advice was right

Link to comment
Share on other sites

The reason why this happens is quite simple. Every newline in HTML, is interpreted as a space. Next with all other space characters like tab, space, carriage return.If you keep those elements from getting on a new line in the code, then spaces won't come up between them on the page. However, all code on one line is not very readable.Attributes MAY have spacecharacters between them, those are not interpreted at all :) So if you do it like this:

<body><img  src=".." /><img  src=".." /><img  src=".." /><img  src=".." /><img  src=".." />etc</body>
They all would come on one line at the page :)
Link to comment
Share on other sites

<html><head><title>Map</title></head><body><body bgcolor="black"><table cellspacing="0" cellpadding="0" border="0"><tr><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td></tr><tr><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td><td><img src="grass10-10.gif"></td></tr></table></body></html>

Try that out :)

Link to comment
Share on other sites

That's what I have:
<head><title>Map</title><style type="text/css">img{border: 0px;margin: 0px;}</style></head>

But there are still spaces.

Then you may have put in a linebreak between the images, which are interpreted as spaces on the webpage. Could you link your site, so we can see what is wrong?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...