Nov 15

Written by: Chris Garrett
11/15/2006

Alliteration aside, I've noticed a lot of skins with this problem, even commercially available skins. The SolPartMenu can be your best friend or your worst enemy and the pixel problem I'm referring to is one that I've seen numerous times but it's an easy fix.

Situation:
You've just finished your skin and you're darn proud of it. I would be too, it's a nice looking skin after all. The problem is when you move your mouse over the submenu for the first time everything adjusts itself two pixels south for some reason. Traipsing through the CSS everything looks to be in it's proper place so you're left with a choice. Call it good and people can just deal with it. OR... Read my quick fix and be a skinning pro again. :)

Solution:
Now, obviously if your menu items are shifting two pixels down you shouldn't have to worry about the left or right of the menu. The area that you're looking for is in your skin's css (generally the same name as your skin file). Open this file up in your favorite text editor and search for a class called  .MainMenu_MenuItem. The culprit is generally two attributes, border-top and border-bottom set them both to 1px solid #color; where the color is the background color of your menu items. Viola! You're right back to impressing people with your mad skinning skills.

Cheers!

Tags: