Forum Moderators: not2easy

Message Too Old, No Replies

css to overrule html bug

trying to get 0 space between images

         

meriwa

4:00 am on Jun 9, 2005 (gmt 0)

10+ Year Member



As I'm sure many of you know, there is a bug (I assume it's a bug!) in HTML whereby spaces in the code are replicated in the front end.

For example, code on two lines:

<img src="images/image1.gif">
<img src="images/image2.gif">

will get you a result of two images, side by side, but with a 4-ish pixel gap between then, while code all on one line;

<img src="images/image1.gif"><img src="images/image2.gif">

will give you two images, side by side, with no gap between them.

I'm working on a site that will have several images output dynamically, side by side, and my dev team say they may or may not be able to get the code to be all on one line.

Therefore I've tried to apply styles to my images that gives the gap I want (2px) between the images, instead of the 4-5px that most browsers leave, regardless of how the code is laid out.

Is this possible?

My code (in very brief format without all the sexy extras like h and w etc!)

<img src="images/image1.gif" class="imageborder">
<img src="images/image2.gif" class="imageborder">

.imageborder { /* puts a 2px space on the right of an image */
border-right: green 2px solid;
border-left: 0;
}

It doesn't work tho - there is still a 2-3px gap after my sexy green border. :(

Does anybody know if this can work, or will I just have to either accept a wider gap between my images, or beg my dev team to find a way of outputting the code the way I want it?

Thanks in advance for ideas!

benihana

7:55 am on Jun 9, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



have you tried adding:

margin:0px;
padding:0px;

to your css?

Farix

2:15 pm on Jun 9, 2005 (gmt 0)

10+ Year Member



That is not a bug; that is how it is suppose to work. Newlines are treated as spaces when content is rendered by the browser. So if I break up a paragraph to be on more then one line for code readability, then I don't have to manually insert a space at the end of each line.

<p>This is the first line,
and this is the second.</p>

... should render as ...

This is the first line, and this is the second.

... and not ...

This is the first line,and this is the second.

... nor ...

This is the first line,
and this is the second.