SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone explain the overflow:hidden for this?

    I am following a tutorial but they didn't explain why they use the overflow:hidden on the nav bar? What does this do and why use it?

    and should anchors be set to block in a nav bar?

    Thanks

    Code:
    ul#nav_main a { display : block; 
    width : 100px; 
    height : 37px; 
    text-indent : -9999px; 
    text-decoration : none; 
    overflow : hidden; }

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems like a strange bit of code to me.

    overflow hidden in this situation looks like it's being used so that anything that exceeds the width 100px and height 37px is hidden from view.

    However, the text-indent: -9999px; suggests to me that this bit of text is being hidden from view anyway and therefore the display, text-decoration and overflow aren't actually doing anything.

    I'd need to see the full CSS and HTML to see what it's doing but based on just that bit of code you've provided I'd guess that the overflow: hidden; isn't actually doing anything unless the text-indent is being brought back into view with another style.`

  3. #3
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by keano View Post
    and should anchors be set to block in a nav bar?
    This is a common technique to make the the navigation anchor a certain dimension so that the whole area is clickable rather than just the text. It's used often when the <a> tags are inside floated list elements.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by seriocomic View Post
    This is a common technique to make the the navigation anchor a certain dimension so that the whole area is clickable rather than just the text. It's used often when the <a> tags are inside floated list elements.
    It's also required (although a float will also work) if you want to apply a width, height or margin to an inline element such as an <a>nchor.

    As I mentioned in my previous post though... I'm not sure why it's required in this situation as the text-indent will be hiding the text off the page.

    It's possibly being used as an image replacement techinique and the image is smaller than the text and therefore the overflow is stopping text from forcing the space the image is taking up from being higher.

    However, if this is the reason for it being used then there are better methods.

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys!~


Bookmarks

Posting Permissions

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