helllo everyone, new here and new to web design and loving it so far.

ok, so here's my issue. my buttons display correctly w/ no gaps but the coding is on one LONG line. (see attachment 1)

whenever I try to format my button code for organization, it puts a gap inbetween the buttons. (looks like i exceeded my newbie attachment quota so cant attach that image but hope you guys get the picture)

what can i do?

thanks.

Both the <a> tag and the <img> tag are inline elements. You might be able to fix this by adding this rule to your stylesheet:
".buttoncontainer img{display:block;}"
if that doesn't work, try
".buttoncontainer a{display:block}"

Originally Posted by angele803

Both the <a> tag and the <img> tag are inline elements. You might be able to fix this by adding this rule to your stylesheet:
".buttoncontainer img{display:block;}"
if that doesn't work, try
".buttoncontainer a{display:block}"

thanks for the input!

but when I added ".buttoncontainer img{display:block;}" to my style sheet,
it displayed my buttons stacked vertically.

Put the links into an unordered list, set the <li> to display:inline, that will give you a horizontal list.

I knew I was going to miss something. If you did it the way I suggested, you would have to float them all. Ladynred's suggestion is much easier and a lot better.

Originally Posted by LadynRed

Put the links into an unordered list, set the <li> to display:inline, that will give you a horizontal list.

That did the trick! thanks!