Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
a:hover quirky in IE6
Old 08-13-2009, 11:19 AM a:hover quirky in IE6
Experienced Talker

Posts: 37
Name: Ryan
Location: Indianapolis, IN
Trades: 0
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>
indyryan is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 08-13-2009, 11:41 AM Re: a:hover quirky in IE6
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
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.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 08-13-2009, 11:59 AM Re: a:hover quirky in IE6
Experienced Talker

Posts: 37
Name: Ryan
Location: Indianapolis, IN
Trades: 0
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**
indyryan is offline
Reply With Quote
View Public Profile
 
Old 08-13-2009, 12:09 PM Re: a:hover quirky in IE6
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Quote:
Originally Posted by indyryan View Post
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.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 08-13-2009, 12:15 PM Re: a:hover quirky in IE6
Experienced Talker

Posts: 37
Name: Ryan
Location: Indianapolis, IN
Trades: 0
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.
indyryan is offline
Reply With Quote
View Public Profile
 
Old 08-13-2009, 12:26 PM Re: a:hover quirky in IE6
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
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)
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 08-13-2009, 12:47 PM Re: a:hover quirky in IE6
Experienced Talker

Posts: 37
Name: Ryan
Location: Indianapolis, IN
Trades: 0
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
indyryan is offline
Reply With Quote
View Public Profile
 
Old 08-13-2009, 01:19 PM Re: a:hover quirky in IE6
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
'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
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 08-13-2009, 01:39 PM Re: a:hover quirky in IE6
Experienced Talker

Posts: 37
Name: Ryan
Location: Indianapolis, IN
Trades: 0
eh, ill get to the bottom of it. just pour a stiff drink and yank some hair out. thanks!
indyryan is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to a:hover quirky in IE6
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.37456 seconds with 12 queries