Extended Hyperlink

HTML & CSS
1

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…

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

I would say this can only be if your anchor tag includes the ‘online indicator’


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

VERSUS


<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.

3

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.


<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

Yes.

This is what I have…


	$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

YesbecauseifIwrotelikethisyouwouldn’tunderstandwhatIwassaying.:slight_smile:

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

I don’t think you understand what I was asking… :slight_smile:

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…

(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…


<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…


<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

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.


<span>username2</span>

Then in the css you do this:


.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 :slight_smile:

8

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?! :slight_smile:

As far as the “Online Indicator” being underlined when I don’t want it to be…

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

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

Thanks again!! :slight_smile:

Debbie