A gap that is appearing underneath graphics

[IndigoRose]

I am trying to create some buttons that are right under each other without any gaps and I am getting a gap between the graphics where the background shows through. Can someone give me a bit of code that allows the graphics to be immediately under each other?

[KDLA]

You probably need to add some CSS to your tag:
<img src="file.gif" style="display: block; margin: 0; padding: 0;" />
KDLA

[IndigoRose]

The "style=display: block; " was the missing piece that fixed the problem. What is it that that does?

[KDLA]

Image usually displays as an inline element; adding "display: block" makes it a block level element, and takes away that extra spacing.

[Centauri]

To elaborate further, as an inline element (the default) the image is normally aligned to the text baseline, and there is space below this to allow for the text decenders (tails of letters like y, g etc).

[payter]

Depending on how your images appear throughout the website, you might not want all of them to be treated as block level elements. Especially if these items are used for navigation, tables have never failed me to align images without spaces. People get caught up with using divs and css styles, but tables still work across all browsers perfectly!

<table cellspacing="0" cellpadding="0">

This is the key for eliminating the spacing under or between the images. All the other posts are correct, however.

Just another thought!

payter
http://www.synotac.com

[Centauri]

but tables still work across all browsers perfectly!

Except non-visual browsers such as screen readers, where the content order can be extremely confusing.

[Declan1991]

Except non-visual browsers such as screen readers, where the content order can be extremely confusing.
And not to mention the fact that all the table must display together.

[IndigoRose]

Depending on how your images appear throughout the website, you might not want all of them to be treated as block level elements. Especially if these items are used for navigation, tables have never failed me to align images without spaces. People get caught up with using divs and css styles, but tables still work across all browsers perfectly!

<table cellspacing="0" cellpadding="0">

This is the key for eliminating the spacing under or between the images. All the other posts are correct, however.

Just another thought!

payter
http://www.synotac.com


I put the block level element in, the button graphics are in a table, and they were working, ... and then yesterday I added something to a different part of the table, and the rollover highlighting for two of the buttons stopped working. At first I thought that the graphics might be damaged, and I tried recreating them. The rollover highlight still does not work for the same two of the buttons, so I went back to the original code, and it is still working. Now that I know that the graphics are not the problem, and the code is identical for both sets of buttons, what should I be looking for in other parts of the table that could cause two of them to stop working?

[KDLA]

Take a look at your javascript. See if there are CSS styles in it.

KDLA

[IndigoRose]

Take a look at your javascript. See if there are CSS styles in it.

KDLA

No, there are not, and the JavaScript is identical in both versions. The only difference was adding additional stuff to other parts of the table. What should I be looking for in other parts of the table that would have caused only two of the highlights to stop working?

[IndigoRose]

I found the problem. I had added a new graphic elsewhere, and had accidently given it the name img01 instead of img11. That resulted in two images with the name img01.