img and spacing

Leo Smith

I am trying to create a tab row, but the image tags that I am using are spaced too far apart. The tabs are between a div tag, and have been assigned a class. In the CSS file I have removed padding, margins, display is inline. Other than setting the position on the img itself, what else can I do remove the space between the tabs?

Thanks,
Leo

philleep

I am trying to create a tab row, but the image tags that I am using are spaced too far apart. The tabs are between a div tag, and have been assigned a class. In the CSS file I have removed padding, margins, display is inline. Other than setting the position on the img itself, what else can I do remove the space between the tabs?

Thanks,
Leo

maybe start your css with

Expand|Select|Wrap|Line Numbers

 *{

padding:0;

margin:0;

border:0;

}

that sometimes work then add a class for your picture paddingas required

cheer
philleep

nomad

I used columns for my tabs. I made all the tabs the same sized.
Then I made a table at 500 pixels with the number of tabs I had.
So if I had 6 tabs I divided 6 into 500 then I div center.

nomad

Leo Smith

These suggestions work when I am not using an image tag. The problem is that the image tag is leaving about 3 to 4 pixels space between the images. I have done very little with images, and I would like to know if removing this space is possible. The space is not there when I am using anchors, buttons, div tags, or even tables. It appears something related to images only. Like there is a built in padding on the images. Is there something specific with PNG images that need to be looked at?

Thanks,
Leo

KevinADC

No there is not, how are you writing the hml code? If you don't want a space don't leave one in the code:

Expand|Select|Wrap|Line Numbers

<img src="frog.jpg><img src="cat.jpg><img src="cow.jg">

Leo Smith

Thanks that was the problem. I had all the img tags on separate lines for easy reading and editing.

Leo

KevinADC

you can do it like this:

Expand|Select|Wrap|Line Numbers

 <img 

src= frog,jpg><img

src= cat.jpg><img

src= cow.jpg>

which might or might not help you with keeping the source code editable/readable.

drhowarddrfine

This is a bug in IE only.

Leo Smith

This is a bug in IE maybe, but I find the same bug handy when I am using title attributes. This bug lets me put carriage returns in the title attibute. This helps when I am using the title attribute like a tooltip to give a formatted bubble information that has multiple lines of information (i.e. an anchor tag in a table that displays an abrreviated name that when you mouse over, not only do you get the full name but a second line with the contact information). Bug in one place, feature in another. It is a matter of perspective and frustration when you forget the rules of the game.

drhowarddrfine

The only problem is you shouldn't rely on bugs to continue to exist in the future. Especially when there are reliable ways to make this work without bugs.

Leo Smith

I agree completly. Which is why my pages are designed for cross browser support and I have ways to make them acceptable without relying on bugs. But I also have it setup in such a way that as long as the bug exists the pages can leverage them for better display. When the bug vanishes then we go back to what every other browser displays. Simple, but it makes my users happy, and really doesn't take any extra time to code.

img and spacing

Post your reply

Similar topics