RESOLVED - height problem: IE good, Opera bad

[davebarnes]

Please surf to
http://www.evaluatorgroup.com/newindex.html

Notice, with IE 6 as your browser, the vertical height between the main menu images on the left-hand menu are correct.
Now, surf to it using Opera 7.23. Notice how the vertical distance between the first 4 images is too small. And, it is not the same as using IE.

The menu is at http://www.evaluatorgroup.com/javascrip ... nu_data.js

What did I do wrong?
What do I need to change?

thanks,
dave

[Ruth]

"Opera bad"...you got that right

Though this is not the problem you need to upgrade to 5.12.

The problem seems to be particular to Opera 7x, since it renders correctly in Opera 6x. I tried putting in imagepadding=3; in your menu definition along with the itemheight, but that didnt' work, then just on the off chance, I put that in the actual style definition for that menu and that seemed to fix the problem in Opera 7.

Ruth

[davebarnes]

Ruth,

I added imagepadding=3 as you suggested to my MainMenuStyle.

Well, I got the VERTICAL spacing that I wanted, but I also got 3 pixels of HORIZONTAL spacing that I did not want. That is the trouble with padding. It adds space all the way around.

So, any other suggestions?

thanks,
dave

[kevin3442]

Hi Dave,

...That is the trouble with padding. It adds space all the way around.

Not necessarily. If you set any padding as a single value, like

Code: Select all

padding=3;

then indeed it does pad the intended object all the way around. But if you specify it like so:

Code: Select all

padding="3 2 1 0";

then you can control the ammount of padding on any side. The numbers apply to Top, Right, Bottom, and Left padding, in that order. If you don't specify a measure, px is used by default (as in this example). So, if you wanted to add 3px to the top of the image padding, but nothing anywhere else, you'd do:

Code: Select all

imagepadding="3 0 0 0";

These are css rules btw, not "milonic" rules. So the same thing can be done with any style.

Hope that helps,

Kevin

[davebarnes]

Kevin,

THANK YOU.

Perfect solution was imagepadding="3 0 2 0";

AND, I learned something new today.

,dave