Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    link area expanding by one pixel in IE

    I have a weird IE inconsistency I can't seem to figure out.

    Click on the 'Upcoming Events' link on this page: http://www.coseecoastaltrends.net/

    and you'll see that the background area of the link expands one pixel larger in a downwards direction. I have applied a css class to the 'a' tag to apply the background color and text colors to this link.

    It works fine in FF and Safari 3. I tried putting a span around the a tag and applying the class to that, but for some reason IE 7 wouldn't apply the background color.

    Any ideas would be greatly appreciated - it is annoying because the line below the link doesn't line up with the bottom of the link area when the events are expanded.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Have you tried setting a height?
    Code:
    a.scroller_header{
    padding: 3px;
    font-size: 0.85em;
    background-color: #0870C9;
    color:#FFFFFF;
    height:15px;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot - that got me on the right track - I actually had to set the height of the div containing the link - didn't work to directly set the height of the a tag. It seems to done the trick, except that now in FF there is an ugly dotted focus line that wasn't as noticeable before because it was over white, not blue.

    Quote Originally Posted by _Aerospace_Eng_ View Post
    Have you tried setting a height?
    Code:
    a.scroller_header{
    padding: 3px;
    font-size: 0.85em;
    background-color: #0870C9;
    color:#FFFFFF;
    height:15px;
    }

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just to finalize this post - I remembered the old trick using

    onfocus="if(this.blur)this.blur();"

    which has fixed the ugly dotted line problem


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •