It has to be something simple...

Discussion in 'CSS' started by chowderhound, Jan 21, 2012.

0
  1. #1
    Hi! I'm having an issue with a design that's making me age quickly and keeping me up at night. :)

    If you visit www.rimrockcomputer.com/site/ and hover over the main navigation, you'll see that when you hover on a new link, the wording moves a bit. WHY???

    I've researched and tried all sorts of CSS code but nothing seems to stop the links from shifting when you hover over them. Please, there has to be a guru out there that can tell me why.

    Thank you!
     
    Solved! View solution.
    chowderhound, Jan 21, 2012 IP
  2. kmap

    kmap Well-Known Member

    Messages:
    2,215
    Likes Received:
    29
    Best Answers:
    2
    Trophy Points:
    135
    #2
    its the size of the text

    when u hover if size is more than normal then movement will happen

    Regards

    Alex
     
    kmap, Jan 21, 2012 IP
  3. chowderhound

    chowderhound Member

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    I've tried changing the font size and it still does it. Am I missing a place to change this? I might not be in the right area. Thanks for the quick reply!
     
    chowderhound, Jan 21, 2012 IP
  4. chowderhound

    chowderhound Member

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    It doesn't seem to be a text issue as the size doesn't change when you hover over it... just the position changes.
     
    chowderhound, Jan 21, 2012 IP
  5. chowderhound

    chowderhound Member

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #5
    Another 1.5 hours and I still hate this issue. I will PayPal anyone who can fix this.
     
    chowderhound, Jan 21, 2012 IP
  6. #6
    It's probably the padding within the menu. In www.rimrockcomputer.com/site/templates/yoo_nano/css/style.css line #24-28, compare the red to the blue phrases. When I set the blue to have the same value as the red, your menu item won't move.

    .menu-dropdown a.level1,
.menu-dropdown span.level1 { [SIZE=4][COLOR="#FF0000"]padding: 1px;[/COLOR][/SIZE] }

/* Set Hover and Active */
.menu-dropdown li.level1:hover .level1,
.menu-dropdown li.remain .level1,
.menu-dropdown li.active .level1 {
	[SIZE=4][COLOR="#0000FF"]padding: 0[/COLOR][/SIZE];
...
    Code (markup):
    This is strange, since both seem to be not related to each other.
    Well, you might want to first fix your CSS first, because I get quite a lot of CSS warning seeing your site in FF.
     
    Last edited: Jan 22, 2012
    hdewantara, Jan 22, 2012 IP
  7. chowderhound

    chowderhound Member

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #7
    Thank you, you're good. Any idea why it only fixes it in Firefox? Is it just because IE blows?
     
    chowderhound, Jan 22, 2012 IP
  8. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #8
    You're welcome Chowderhound,

    Honestly, I haven't tested the solution through all of my Windows browsers. I got that by debugging your site through Firefox's DOM Inspector plugin.
    So really, the true fix is to get all those warnings gone first, or at least get them reduced in numbers. I believe that it will bring your site "well behaved" in FF, Chrome, IE, Safari, and etc. :)


    Hendra
     
    Last edited: Jan 22, 2012
    hdewantara, Jan 22, 2012 IP