News:

Wondering if this will always be free?  See why free is better.

Main Menu

Fixing the bbc image underline

Started by MLM, December 24, 2011, 07:31:29 PM

Previous topic - Next topic

MLM

Well, I have come up with a solution to remove the underline from bbc images but not text, or anything else.

Here is a working demo:
http://jsfiddle.net/MadLittleMods/Ln4KG/

The only catch is that you have to put some tag around the plain text nodes like a span tag.

I am trying to come up with the regex to find the plain text nodes and add spans around them but i thought i would just get it out there in case someone can whip up the regex.

My Themes:

My Mods:

Unsolved Threads:
  • None atm...

Suki

why not doing it with css?

<img src="url" class="no_line"....


.no_line
{
border:none;
}
Disclaimer: unless otherwise stated, all my posts are personal and does not represent any views or opinions held by Simple Machines.

MLM

#2
Quote from: Suki on December 24, 2011, 08:04:38 PM
why not doing it with css?

<img src="url" class="no_line"....


.no_line
{
border:none;
}

Go ahead and try(doesn't work):

My Themes:

My Mods:

Unsolved Threads:
  • None atm...

Suki

Disclaimer: unless otherwise stated, all my posts are personal and does not represent any views or opinions held by Simple Machines.

MLM

Quote from: Suki on December 24, 2011, 08:09:13 PM
what browser are you using?

http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/

Chrome 16 - Does on any browser...

That solution does not work this case. That is more targeting links that target images.

My Themes:

My Mods:

Unsolved Threads:
  • None atm...

Matthew K.

@MAS - It doesn't work because the LINK is what has the line, NOT the image. So hacking the image up itself won't do anything, you have to get it at the source.

MLM

#6
Here is how to match bbc but we want the opposite. Just posting this for anyone working on the regex:

Normal:
\[(.*?)\](.*?)\[\/\g{1}\]

Relative version:
\[(.*?)\](.*?)\[\/\g{-2}\]

Named version:
\[(?'tag'(.*?))\](.*?)\[\/\g{tag}\]

My Themes:

My Mods:

Unsolved Threads:
  • None atm...

Oldiesmann

Quote from: MLM on December 24, 2011, 08:07:15 PM
Quote from: Suki on December 24, 2011, 08:04:38 PM
why not doing it with css?

<img src="url" class="no_line"....


.no_line
{
border:none;
}

Go ahead and try(doesn't work):


That's a linked image. The underline is coming from the link, not the image itself. It's still an easy fix though...

a img
{
border: 0;
}


If that doesn't work, try this:
a img
{
text-decoration: none;
}
Michael Eshom
Christian Metal Fans

Matthew K.

Neither of those work, Oldies. The fix isn't that simple, or it would have been included in SMF 2.0.

MLM

Quote from: Oldiesmann on December 28, 2011, 12:13:31 PM
That's a linked image. The underline is coming from the link, not the image itself. It's still an easy fix though...

a img
{
border: 0;
}


If that doesn't work, try this:
a img
{
text-decoration: none;
}


That does not work because it targets the img not the a.

My Themes:

My Mods:

Unsolved Threads:
  • None atm...

Thantos

The simplest fix I've found is to use javascript and to see if the only child node of those links is an image.  If it is then remove the border and if not leave it be.

MLM

Quote from: Thantos on December 28, 2011, 04:43:52 PM
The simplest fix I've found is to use javascript and to see if the only child node of those links is an image.  If it is then remove the border and if not leave it be.

Why not have it so it works for everyone without js. All you have to do is use my solution and use some regex to put <span> tags around plain text.

My Themes:

My Mods:

Unsolved Threads:
  • None atm...

Arantor

Hmm, so revisiting this.

It doesn't seem to have been a major issue, mostly just an aesthetic one - and honestly, there is value to knowing that an image can be clicked on.

Splicing in span tags everywhere in links is not actually a good idea. There are other considerations like SEO at work (more tags, especially in links, is not smart)

I don't know what to do for the best on this one. I'm tempted to chalk it up to 'not a big deal' but I can see why it might bother some people.

MLM

Quote from: Arantor Beeblebrox the First on December 30, 2013, 11:13:04 PM
Splicing in span tags everywhere in links is not actually a good idea. There are other considerations like SEO at work (more tags, especially in links, is not smart)

`span` tags will not hurt seo. See this SO question - `span` has no semantic meaning and is for visual effects. SMF uses spans when styling bbc so why not have blank `span` around text nodes.

In markdown, the parser puts `<p></p>` tags around text nodes

My Themes:

My Mods:

Unsolved Threads:
  • None atm...

Arantor

P tags have semantic meaning, funnily enough. Makes an SEO difference. In fact so does all extraneous markup. That's why HTML5 introduced a buttload of new tags that all were largely identical for presentational purposes but semantically different.

If I understood you correctly, and it's hard to be sure from the weaving about you were doing, you were suggesting putting span in the text part of a link, which is extremely sensitive SEO wise.


Arantor

Except we're not arguing about span inside H1 (link 1), nor did you get advice from Google (link 2, all respondants were regular users, plus Google has changed its algorithm multiple times since then), nor are we using it to break a word when a proper CSS fix exists (link 3), nor using it to group or break inline elements (link 4) and other than broad generalities, SEO advice from 2005 is going to be very out of date (link 5)

So, we're back to this. Putting a span inside a link text (which none of your sources actually cover), just because you want to make an image not look like a link inside a post.

SEO issue 1: signal to noise is increasingly being used as a measuring tool, as well as things like download and rendering time. Extra tags do not help here.

SEO issue 2: a link's text is still more relevant in terms of ranking than other things, cluttering it up with markup is not going to help that, span or otherwise.

Flipside issue 1: usability is important, and people having some kind of UI hinting that something is clickable is better than not.


The bottom line, we have what amounts to a minor aesthetic issue, that pretty much you were the only complainant of (if not, please feel free to show me where the other complaints are), that requires nasty hacks that all have side effects to resolve, be they adding markup or rewriting it somewhere between page start and page end.

MLM

The google product forums link did speak about a span being in a link even if it isn't from the most authoritative source.

Here are some people wondering about the border:

My Themes:

My Mods:

Unsolved Threads:
  • None atm...

emanuele

Quote from: Arantor Beeblebrox the First on December 31, 2013, 01:30:55 AM
SEO issue 1: signal to noise is increasingly being used as a measuring tool, as well as things like download and rendering time. Extra tags do not help here.

SEO issue 2: a link's text is still more relevant in terms of ranking than other things, cluttering it up with markup is not going to help that, span or otherwise.
* emanuele wonders where the guy that wrote this is.

Quote from: Arantor Beeblebrox the First on December 31, 2013, 01:30:55 AM
Flipside issue 1: usability is important, and people having some kind of UI hinting that something is clickable is better than not.
And I wonder why the heck people do not want links to actually look like links... ::) (Just so that you don't misunderstand I'm agreeing with your sentence above)


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

Arantor

Because while the concept of trying to optimise user generated content is inane as I pointed out, that doesn't negate the fundamentals. There are things SMF does not get right, and has not done for years, one of which I fixed in 2.0.6, and more will be fixed in 2.1.

Right, so we have a handful of people, including one guy who gave me a headache. So what if I posted in those other topics? You'll notice that my attitude over this issue hasn't changed in that time. I'm trying to be convinced that I shouldn't just close this and write it off as a non issue, and arguing by various logical fallacies doesn't help with that.

Advertisement: