PDA

View Full Version : Button crowding in IE with 'title' attribute



KenJackson
08-02-2006, 02:26 PM
On the right side of my website (http://jackson.io/) you will see a column of buttons. The lowest 6 or them are 80x15 pixels, equally spaced with a top and bottom margin of 4 pixels. In Firefox every thing is wonderful.

But in Internet Explorer, the lower three are crowded together with no margin. The only difference AFAICT is they have a 'title' attribute assigned.

Is this a known IE bug? Did I do something wrong? Is there a simple solution?

dvessel
08-02-2006, 03:24 PM
This ruleset in the page is giving 0 margin on top & bottom. And 4 pixels left & right.


.button80 { margin: 0 4px; }

The margins in-between the images are coming from the containing links.

KenJackson
08-02-2006, 03:41 PM
The containing links? I haven't assigned any margin to the containing links (".buttons a" here). Why is it different in Firefox and IE? Why are the top three different than the bottom 3 in IE?

.buttons { width: 88px; margin: 0 auto; } /* div */
.buttons a { display:block; padding: 0; } /* a */
.button80 { margin: 0 4px; } /* img */

dvessel
08-02-2006, 03:52 PM
I'm not sure what's triggering here. It has to be an IE bug since Safari & Firefox are rendering it the same with consistent margins.

Looks like there's a bottom margin when I look through Xylscope (a CSS tool). It's below all the buttons. What you could try is to explicitly state a bottom margin for ".buttons a" to help along IE.


.buttons a { display:block; padding: 0; margin-bottom: 4px;}

dvessel
08-02-2006, 06:46 PM
The containing links? I haven't assigned any margin to the containing links (".buttons a" here).

Just to be clear, even if you don't explicitly set a margin doesn't mean it doesn't exist. Certain elements have their own properties. Well, umm, in the case of anchors there should be no inherent margin so that doesn't help. Sorry..

It could be related to your override for turning it into a block element. Why did you set that? Could you leave it as in-line?

KenJackson
08-02-2006, 08:44 PM
Thank you for looking, dvessel.

This is really starting to annoy me. I have spent a disproportionately large amount of time on this simple little feature--a stack of neatly ordered and centered buttons. I put "display: block;" on the anchors because I've interated many times on this and at one point I tried to apply 'auto' left and right margins to them and that didn't seem to work. Now I've removed it.

Now it seems to be OK in IE, but not in Firefox 1.5.0.5 on Linux where it's behaving in a bizarre manner. I sit here and click reload and the vertical spacing on that column of buttons is somewhat randomly either 3 or 9 pixels button to button.

dvessel
08-02-2006, 09:40 PM
This is just a guess.. Those images are being called from different servers causing different draw times. Maybe it's some rare quirk where the drawing of those images is causing some odd interference with the rendering of the page.

If you care to try it, copy the image to your server and try to recreate the problem.

KenJackson
11-02-2006, 09:07 PM
... it's behaving in a bizarre manner. I sit here and click reload and the vertical spacing on that column of buttons is somewhat randomly either 3 or 9 pixels button to button.
If anyone is interested, I finally stumbled upon what was causing that bizarre behaviour. I had coded the images inside the anchors like this:
<img width="88" height="31" src="..." alt="..." title="..." /> I thought I was supposed to specify the height and width to help the browser render it. But they were causing the problem.

That's right. I just deleted width="..." height="..." and the problem went away!