That IE fix worked, once I figured out where to position it in the code. Thanks!
I'm still having the problem with the spacing between/around the buttons. With the
Code:
.header ul li {
margin: 10px;
as you initially had it set things up, each button has the following problem:
- Margin values above 10px don't seem to make any changes one way or the other relative to how things appear when set at 10.
- This margin value is not leaving any space between the left and right sides of each button.
- A bit of the right side of the button is also being covered up/cut-off by the button that follows it. If you look at the right most button in each row - where there isn't another one next to it on the right to cover anything - you'll see a bit more of the button (noticeable on how the design comes a little further down on that side) than the ones in the other positions
If I use a margin value lower than 10px, it helps the placement vertically somewhat depending on how I adjust things. My goal is to have the total height of the area - two rows of buttons with a height of 90px each + a bit of space above/below, equal the 186px height of the logo. However, any margin value below 9px is making things look worse side to side, with more of the right side of the buttons getting covered up. Such settings are also pushing the buttons further away from the logo, when they should be closer (so everything fits in the 517 x 186 area without anything getting cut-off/obscured). I tried making different variations of distinct left/right/top/bottom margin values, but couldn't get any of them to be an improvement.
I've attached a screenshot of this set at 1px for comparison to the one I previously posted, and also the file for my button image (if that helps).