CSS Forum

**indyryan** · 08-13-2009, 11:19 AM

I am having some issues with my main navigation. On the hover state, the header height, re-adjusts. I

http://www.ballistix.biz/shred/pickup.php

on the link above, in the lower portion of the site, a few of the letters are getting duplicated. it doesn't make any sense why

Code:

#header{margin:0 auto;width:936px;padding:4px 0px 0px 0px;border-bottom:3px solid #929292;float:left;}
#header #logo{width:196px;height:203px;float:left;margin-right:4px;background:url('../images/logo_bg.jpg') repeat-x;}
#header #top{float:left;width:736px;height:203px;}
#header #top #mainNav{height:47px;width:736px;background-color:#f78429;margin-bottom:3px;color:white;letter-spacing:-.09em;}
#header #top #mainNav li{display:inline;font-size:13px;padding-left:4px;padding-right:4px;line-height:46px;border-right:1px solid white;height:40px;}
#header #top #mainNav li.last{border:none;margin-right:0px;padding-right:0px;}
#header #top #mainNav a#current{border-bottom:1px solid white;}
#header #top #mainNav a{color:white;text-decoration:none;}
#header #top #mainNav a:hover{border-bottom:1px solid white;}

HTML Code:

<ul id="mainNav">
    
    <li>
        <a href="index.php" >home</a> >>
    </li>
    <li>
        <a href="about.php"  id="current">about us</a> >>
    </li>
    <li>
        <a href="pickup.php" >pick-up service</a> >>
    </li>
    <li>
        <a href="onsite.php" >on-site service</a> >>
    </li>
    <li>
        <a href="http://ballistix.biz/records">document imaging/storage</a> >>
    </li>
    <li class="last">
        <a href="contact.php" >contact us</a> >>
    </li>
</ul>

**chrishirst** · 08-13-2009, 11:41 AM

Duplicate Characters Bug

Adding a bottom border on a hover state will increase the height of the element. Add a transparent bottom border to the element as standard so only the colour changes.

**indyryan** · 08-13-2009, 11:59 AM

that shouldn't throw it off. there is a 1px border-bottom on the current state and its fine through that, it's not until hover.

**i got the duplication bug worked out**

**chrishirst** · 08-13-2009, 12:09 PM

Quote:

Originally Posted by indyryan

that shouldn't throw it off. there is a 1px border-bottom on the current state and its fine through that, it's not until hover.

Of course it will be ok on the "current" link, because the border will be there ALL the time.

**indyryan** · 08-13-2009, 12:15 PM

but, being there all the time, should adjust the height already. so when the 1px border comes in nothing really changes. I don't know I'm just throwing it out there.

When you hover, it resizes, and then STAYS resized even when you take your mouse off.

**chrishirst** · 08-13-2009, 12:26 PM

Quote:

When you hover, it resizes, and then STAYS resized even when you take your mouse off.

That will be because your pseudo classes are in the WRONG order.
http://www.webmaster-talk.com/css-fo...tml#post288033
Read the rest of the thread as well (on borders on hover)

**indyryan** · 08-13-2009, 12:47 PM

alright. that makes sense. ive tried that.

Code:

#header #top #mainNav a:link,#header #top #mainNav a:visited {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    
}
#header #top #mainNav a:hover {
    border-bottom: 1px solid white;
}
#header #top #mainNav a:active {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
#header #top #mainNav a#current {
    border-bottom: 1px solid white;
}

it still isnt working. if you look at the page, there is a grey border at the bottom of the top portion, it appears to be adding about 2-3px margin above that grey line, bumping it down from that top portion.

http://ballistix.biz/shred

**chrishirst** · 08-13-2009, 01:19 PM

'fraid I can't test it I don't have a machine with IE 6 on available. (even I have upgraded

)

Mind I have missed out XP and Vista and gone straight to windows 7

**indyryan** · 08-13-2009, 01:39 PM

eh, ill get to the bottom of it. just pour a stiff drink and yank some hair out. thanks!