HTML source editor does not support empty anchor tags

Topics: General, Troubleshooting
Dec 17, 2014 at 3:28 PM
I'm attempting to add an anchor tag with an HTML menu item. The tag is very simple: empty with some CSS styling to make it an image. However, I'm finding that when writing the HTML in the HTML source editor the entire body can sometimes be removed after selecting the Update button. What it comes down to is that the source editor will not accept empty anchor tags. I'm not sure if this is just a submission issue, or if the WYSIWYG refuses to render the element and drops it.

I can probably work around this by directly entering my markup in the database, but I'm not sure which table the content would be located in.
Coordinator
Dec 28, 2014 at 2:41 AM
Can you explain what you mean by "add an anchor tag with an HTML menu item"? Why use an HTML menu item? If it's a menu item, shouldn't it have text for accessibility, even if you style it to show an image using CSS?
Dec 29, 2014 at 5:40 PM
I'm basically leveraging the menu system for external links. It seemed to be the least invasive way to manage them within a standard interface. I neglected to update, but I can add anchor tags with image displays using the standard image within an anchor (<a><img></a>). I previously was attempting a simple empty anchor tag using a background url style. The WYSIWYG and/or HTML editor do not allow this. A very basic example of <a href="http://www.google.com/" style="display: block; background: url('https://www.google.com/favicon.ico') no-repeat center; width: 32px; height: 32px;"></a> will not be accepted with the HTML editor. The entire tag will be removed when returning to the WYSIWYG without notification.
Coordinator
Dec 30, 2014 at 12:56 AM
As I was saying, this is not accessible. You should always have text in an A tag (see http://www.w3.org/TR/html5/dom.html#palpable-content-0). What I would recommend in this case is to have relevant text in the A tag, replace the inline styles with a CSS class, and in your stylesheet, add the background image, and send the text to oblivion by using one of the CSS techniques described here: http://css-tricks.com/css-image-replacement/
Marked as answer by null_d3v on 12/30/2014 at 7:34 AM
Dec 30, 2014 at 3:34 PM
Nice! I'll likely be using a few of those approaches when I start to work on a theme. Thanks!