I am trying to learn how to make a horizontal nav bar using clickable images. The problem I am running into is how to make all the images be the same size. I tried different coding but can't seem to get it to work.

Here is what I have so far.... http://www.paperandclay.com/test-encircle-011209.htm

Thanks for your help
pk

oops... the page should be .... http://www.paperandclay.com/test-encircle-011209.html

thanks

IE 6 was showing some strange behavior when I did this using the code you had, so I changed the links into a list and removed the #navbarcont div.



And I used this styling:

Also, don't forget to remove that blank line above your doctype. That can cause IE to render in quirks mode which uses IE's broken box model.

For a test, your 10px font size will be fine, but for an actual page, 10px is just too small for many people to read easily, and because it's in pixels rather than percentages or ems, its size can't be overridden by IE 6 users who have their browsers set to use larger fonts.

Thanks Cary for the help. I made the changes and I have some questions....

* the nav buttons do not display in IE6 ( which is what I have on my computer. Not sure why this is happening

* the nav buttons display on Firefox but the text is not vertically centered. When you gave it a line-height, does it automatically center the text or do I need additional coding? If so, does the position:relative for the text do the trick?

* I'm trying to learn so why did you change the links to a list?

Thanks
pk

This bit of styling is what's throwing it off.



You need a space between ")" and "0".



Actually, the text is centered, but the background is not...



Since the background image is 40px high, I made the height of the link and the line-height both 40px. I set padding to zero. You have top and bottom padding of 10px, which makes a total height of 60px to be covered by the background image. The background image isn't centered vertically, so its 40px height leaves a 20px background-less gap under the links.

There are different ways to deal with this:

1) Remove the padding, and make sure the height is no more than 40px.

2) Keep the padding, but make sure the height + top padding + bottom padding is equal to or less than 40px.

3) Change the background styling to this:



In all cases, the height and line-height are equal to each other.




Two reasons:

1) When I tried styling your original code, it looked fine in IE 7, FF, Opera and Safari, but there was an odd artifact with the rendering in IE 6. The last half of "Contact" was being repeated below the menu, so the text, "tact", was showing up centered below the buttons. I don't know why.

2) When you have a series of links, such as your menu, best practice is to code the "list" of links as an actual list. I didn't want to bother you with this detail here when I initially tried to style your links, but i figured it might solve the unusual rendering problem in IE 6.

There is still the problem with your buttons "wrapping" instead of all being on the same row. Here you have to be careful with the width of #navbar.

I had 100px width + 5px left margin + 5px right margin = 110px

Multiplying that times six, the number of buttons, gives a total width of 660px which worked fine.

Your 10px padding on the left and right requires a new width:

6 x (100+5+5+10+10) = 780px, which won't really center unless you change the width of the body to at least 780px as well.

Thanks Cary. I really appreciate you taking the time to explain what you did and why. It really helps. One thing I need to pay more attention to is "the math" on how things add up through out the entire code and not just in one section.

Again, thanks for your time and effort
pk

Your welcome.