SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Extended Hyperlink

    When I go into Opera, Safari, and Chrome, I am getting this "extended hyperlink" that extends past the Username, underneath the "Online Indicator" and to the right of that.

    It looks weird, and I believe is causing me some spacing issues.

    Here is what I mean...
    Attachment 63890


    Is there some way to get rid of that extra stuff, so just the Username is underlined??

    BTW, no issues with this in FireFox...

    Thanks,


    Debbie

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,332
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    I would say this can only be if your anchor tag includes the 'online indicator'

    HTML Code:
    <a href="http://doubled.com">username<img src="online.png" /></a>
    VERSUS

    HTML Code:
    <a href="http://doubled.com">username</a><img src="online.png" />
    But if your CSS sets the text decoration to 'none' you should not see ANY underline.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Debbie,

    If this refers to the other thread then make sure you close the whitespace gaps especially between the image and the break.
    e.g.
    Code:
    <a href=''>username1 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br /><img src='http://placehold.it/80x80' width='80' alt='' title='' /></a>

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If this refers to the other thread
    Yes.


    Quote Originally Posted by Paul O'B View Post
    then make sure you close the whitespace gaps especially between the image and the break.
    e.g.
    Code:
    <a href=''>username1 <img class='onlineStatus' src='http://placehold.it/10x10' width='10' alt='' /><br /><img src='http://placehold.it/80x80' width='80' alt='' title='' /></a>
    This is what I have...
    PHP Code:
        $fromData "<a href='/account/profile/$pmSender'>
                        
    $pmSender
                        <img id='onlineStatus' src='/images/
    $senderStatus[0]' width='10' alt='$senderStatus[1]' />
                        <br />
                        <img src='/uploads/"
                        
    getSafePhoto($senderPhotoName$senderPhotoApproved) .
                        
    "' width='80' alt='Thumnail of $pmSender
                        title='" 
    str2htmlentities($senderPhotoLabel) . "' />
                     </a>"


    Are you saying my "pretty formatting" is causing the issue??

    If so, why?

    Sincerely,


    Debbie

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Are you saying my "pretty formatting" is causing the issue??

    If so, why?
    YesbecauseifIwrotelikethisyouwouldn'tunderstandwhatIwassaying.

    Therefore browsers treat white space between inline elements as a space and therefore you get a space in your layout. Otherwisethiswouldhappen.

    So it's important to close the gaps in the html where inline elements are concerned. It's not needed between divs as they signify an end of the block but for inline elments like text, spans and images any gaps between them will be treated as a space character.

    The gap at the end of your username is the white-space after the image and before the break. If you just move the break up next to the img tag then the gap will go away.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    YesbecauseifIwrotelikethisyouwouldn'tunderstandwhatIwassaying.

    Therefore browsers treat white space between inline elements as a space and therefore you get a space in your layout. Otherwisethiswouldhappen.

    So it's important to close the gaps in the html where inline elements are concerned. It's not needed between divs as they signify an end of the block but for inline elments like text, spans and images any gaps between them will be treated as a space character.

    The gap at the end of your username is the white-space after the image and before the break.
    I don't think you understand what I was asking...


    Point #1: At the very least, I want the "Username" and the "User Thumbnail" to be hyperlinked back to the Member's Profile. (I don't care if the "Online Indicator" - located in between those two things - is technically hyperlinked since it is too small to be a practical "clickable target"?!

    Point #2: This is how I want things to look...

    Attachment 63892

    (Notice that you only see a hyperlink beneath the *Username* even though the Username + Online Indicator + Thumbnail are all one big hyperlink.)


    One obvious thing might be for me to change my code from this...
    HTML Code:
    <a href=''>
    	username2
    	<img id='onlineStatus' src='' width='10' alt='' />
    	<br />
    	<img src='/uploads/NoImage.png' width='80' alt='Thumbnail of username2' title='' /> 
    </a>

    To this...
    HTML Code:
    <a href=''>
    	username2
    </a>
    	<img id='onlineStatus' src='' width='10' alt='' />
    	<br />
    	<img src='/uploads/NoImage.png' width='80' alt='Thumbnail of username2' title='' /> 

    But by doing that, I lose the hyperlink behind the Member Thumbnail?!


    The key takeaway here is that...

    In FireFox, the hyperlink is not extending underneath the "Online Indicator" (image) or underneath the spaces... It only appears beneath the Username.


    Why does FireFox behave the way I want, and the other browsers don't?


    And is there a way to get the "FireFox effect" across all browsers??

    Follow me?

    Sincerely,


    Debbie

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I don't think you understand what I was asking...
    Hi,

    I thought the issue was the underline protruding to the right of the online indicator and the fix I suggested will fix that.

    However you can avoid the issue altogether if you wrap a span around the username and underline the span only.
    Code:
    <span>username2</span>
    Then in the css you do this:

    Code:
    .users a{text-decoration:none}
    .users a span{text-decoration:underline}
    Of course that won't remove the gap at the end because that is a white space as I already explained

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I thought the issue was the underline protruding to the right of the online indicator and the fix I suggested will fix that.
    In retrospect, I guess that is one issue that might need to be addressed. (Whether there was an underline or not underneath that trailing space probably doesn't matter as far as possible spacing issues. It just drew my attention it !!)

    As far as your first suggestion, I'll have to consider if losing my nicely formatted code is worth gaining a space in the display?!


    As far as the "Online Indicator" being underlined when I don't want it to be...

    Quote Originally Posted by Paul O'B View Post
    However you can avoid the issue altogether if you wrap a span around the username and underline the span only.
    Code:
    <span>username2</span>
    Then in the css you do this:

    Code:
    .users a{text-decoration:none}
    .users a span{text-decoration:underline}

    Is that an acceptable approach? (Or is that hokey?)

    And would it impact the "clickability" of the Username, Online Indicator, and Thumbnail inside the anchor?


    Also, why is it that FireFox behaves the way I want it to out-of-the-box, but the other browsers underline everything?

    Sincerely,


    Debbie

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Is that an acceptable approach? (Or is that hokey?)
    No its fine. That's what spans are for. Don't be afraid to use a suitable element when necessary.

    And would it impact the "clickability" of the Username, Online Indicator, and Thumbnail inside the anchor?
    It will make no difference to the anchor as it still surrounds all the content. WEe are just putting an underline on the span and not on an anchor.

    Also, why is it that FireFox behaves the way I want it to out-of-the-box, but the other browsers underline everything?
    Browsers vary and some underline white space and some don't. Whether its a bug or not is dependent on whether the exact behaviour is defined in the specs but sometimes not everythng has been defined and hence browers differences in interpretation. (As an aside old version of IE give linked images a blue border outline by default.)

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks again!!


    Debbie


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
  •