I'm trying to put a block of HTML into a field in a content management system, but it keeps stripping out one of the elements. In particular it is stripping out the <i class="sprite arrowDDnav"></i> from the block below.
<a class="static selected menu-item rootActive" href="/community/presbyterian-healthcare-foundation/Pages/default.aspx">
<i class="sprite arrowDDnav"></i>
<span class="additional-background">
<span class="menu-item-text">Presbyterian Healthcare Foundation</span>
<span class="ms-hidden">Currently selected</span>
</span>
</a>
Any idea why this might be? And any idea how I can "trick" the CMS into preserving the above HTML, or should I resort to using JQuery and document.ready(...) to inject the element in the appropriate place?
Related
I have a html webpage containing with lot of css. Let's say if I have one style per div, do I need to add it to my external css file or just write internal css inside of that html page?
Take a look at this example.
<div class="sub">
Link <i class="fa fa-user-circle-o" aria-hidden="true"></i>
</div>
I need to add two different colors to "link" and icons. I can simply do this way.
<div class="sub">
<a href="#"> <span style="color:red"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" style="color:black"></i></a></div>
Or can add classes and write it to external css also.
<div class="sub">
<a href="#"> <span class="color-1"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" class="color-2"></i></a>
</div>
I know those two methods are working but need to know the best practice for this type of situation. Internal or external?
In a short answer:
As far as possible don't use inline style, because inline style has Highest priority after !important keyword.when we have too many lines and use of inline style, it is very hard if we want to find and overlay it.
Actually it's a good practice to have your CSS in external, but it depends upon the situation. For this, it is best to use inline CSS.
I'm new to this.. cookie thing, but a friend of mine told me to check it out if I wanted my notification to disappear.
this is what I have
<font style="float:right">
<nav class="dropdownContainer">
<span class="lightpill-n dropdown-toggle"><i class="fa fa-bell dropdown-toggle"></i> 1</span>
<ul class="dropdown">
<span class="text1">
Hello!
<p>We updated a few changes to the website. Keep yourself updated by reading more.
<p>
<span class="btn-read" style="text-align:right;">Read more</span>
</span>
</ul>
</nav>
</font>
When it's checked, I want this div to change.
<span class="lightpill-warn dropdown-toggle"><i class="fa fa-bell dropdown-toggle"></i> 1</span>
To this:
<span class="lightpill-n dropdown-toggle"><i class="fa fa-bell dropdown-toggle"></i> </span>
I don't know if it's possible? But I hope it is, so I don't need to change the code all the time to take it away.
You will need to use a server or a client side langauge like PHP or Javascript to do that. HTML is only a markup language (no logic).
Hope I helped you.
I'm using Rich Snippets to markup my content according to the collections on schema.org. I am using RDFa Lite to do so and am now having a problem with the rel attribute. Some of my links do have the rel="nofollow" attribute/value. As RDFa Lite is a subset of RDFa, the rel attribute gets recognised as additional markup. Please see this upload to Google's Structured Data Testing Tool for the extracted data for the following markup:
<div vocab="http://schema.org/" typeof="SportsTeam">
<span property="name">San Francisco 49ers</span>
<div property="member" typeof="OrganizationRole">
<div property="member" typeof="http://schema.org/Person">
<span property="name">Joe Montana</span>
</div>
<span property="startDate">1979</span>
<span property="endDate">1992</span>
<span property="namedPosition">Quarterback</span>
<a rel="nofollow" href="http://www.google.com/">A Paid Link</a>
</div>
The problem is of course, that the Paid Link shouldn't appear in the structured markup. Any ideas how to solve this?
One possibility is to use prefixes for your Schema.org usage. Because the RDFa Core Initial Context defines schema for http://schema.org/, you can even use it without specifying it in a prefix attribute first:
<div typeof="schema:SportsTeam">
<span property="schema:name">San Francisco 49ers</span>
<div property="schema:member" typeof="schema:OrganizationRole">
<div property="schema:member" typeof="schema:Person">
<span property="schema:name">Joe Montana</span>
</div>
<span property="schema:startDate">1979</span>
<span property="schema:endDate">1992</span>
<span property="schema:namedPosition">Quarterback</span>
<a rel="nofollow" href="http://www.google.com/">A Paid Link</a>
</div>
You can add an empty vocab="" on (or around) the elements that use rel for purposes outside of RDFa. Like:
<div vocab="http://schema.org/" typeof="SportsTeam">
<span property="name">San Francisco 49ers</span>
<div property="member" typeof="OrganizationRole">
<div property="member" typeof="http://schema.org/Person">
<span property="name">Joe Montana</span>
</div>
<span property="startDate">1979</span>
<span property="endDate">1992</span>
<span property="namedPosition">Quarterback</span>
<a vocab="" rel="nofollow" href="http://www.google.com/">A Paid Link</a>
</div>
(Also note that you can use custom (non-URI) rel values alongside RDFa in HTML if you just add a property on the same element (this makes an RDFa processor ignore the rel, as defined in extension 7 of RDFa 1.1 in HTML). E.g. by adding property="author" next to rel="me".)
I checked many different sites (official one also) and all the examples display the google snippets code itemscope/itemtype inside a div and the itemprop inside a span.
I'm wondering if this is just a simple way to show samples code or is the only way yo display it.
I have my address in a list so i wrote like this:
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<i class="fa fa-map-marker fa-lg"></i> <p class="labelSocial">Address:</p>
<a href="https://www.google.com/maps/place/Glogauer+Stra%C3%9Fe+21/#52.49226,13.4369,17z/data=!3m1!4b1!4m2!3m1!1s0x47a84fb24234006b:0x36dfe942fb2b5f97" target="_blank">
<p class="addressText">
<span itemprop="streetAddress"> Glougauerstrasse 21, </span> </br>
<span itemprop="postalCode"> 12435 </span>
<span itemprop="addressLocality"> - Berlin </span>
<span itemprop="addressCountry"> (DE) </span>
</p></a>
</li>
is that also correct?
Your Code is fine but you'll have to nest schema.org/PostalAddress under some main category but use of <li> tag is correct. Here is what Google Structured Data testing tools shows for the code you mentioned above-
http://www.google.com/webmasters/tools/richsnippets?q=uploaded:800501214b811a6b2bbfb52e2d77f96d
In order to tell Google and other search engines that address is related to what, we must specify a category and nest postal address inside it. Please see the example, schema.org/PostalAdsress is nested inside LocalBusiness schema:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1><span itemprop="name">Beachwalk Beachwear & Giftware</span></h1>
<span itemprop="description"> A superb collection of fine gifts and clothing
to accent your stay in Mexico Beach.</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">3102 Highway 98</span>
<span itemprop="addressLocality">Mexico Beach</span>,
<span itemprop="addressRegion">FL</span>
</div>
Phone: <span itemprop="telephone">850-648-4200</span>
</div>
If I have a site with a couple of font awesome icons on it, e.g.
<i class="fa fa-fw fa-cloud "></i>
And run this through the WCAG 2.0 validator I get the following error:
Success Criteria 1.4.4 Resize text (AA)
Check 117: i (italic) element used.
Repair: Replace your i elements with em or strong.
Error Line 185, Column 158:
<i class="fa fa-fw fa-cloud"></i>
I realize that the rule shouldn't really apply in this case, as it is there to ensure that <em> and <strong> are used instead of their non-semantic counterparts <i> and <b>. But the problem still exists if I have a client that requires me to check all the WCAG2.0 boxes.
So does anyone know what would be the proper way. Should I change them to <em> instead, does that give screen-readers any difficulties? Any other suggestions are welcome!
First, <i> does have semantic meaning in HTML5 (but was only presentational before that). Assuming you're using HTML5, the validator you're using is wrong to flag all occurrences of <i> as inappropriate.
Second, changing
<i class="fa fa-fw fa-cloud"></i>
to
<span class="fa fa-fw fa-cloud"></span>
is good but it doesn't fix the real accessibility issue, which is that you don't have any text alternative to the icon (at least it appears that you don't). For the sake of argument, let's assume your fa-cloud icon is inside an <a> tag. Something like this (using Bootstrap's sr-only CSS class):
<a href="...">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
<span class="sr-only">Download</span>
</a>
or like this (using WAI-ARIA's aria-label attribute):
<a href="..." aria-label="Download">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
</a>
is the solution. Even simpler would be to show the text to everyone:
<a href="...">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
Download
</a>
from font-awesome doc:
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the 'i' tag for brevity, but using a 'span' is more semantically correct).
So, you could try changing your 'i' tags for 'span'.
It very much depends on what the content is inside the i tag is semantically. WCAG2.0 is a set of guidelines, not hard and fast rules.
According to the HTML5 spec:
The i element represents a span of text in an alternate voice or mood,
or otherwise offset from the normal prose in a manner indicating a
different quality of text, such as a taxonomic designation, a
technical term, an idiomatic phrase from another language,
transliteration, a thought, or a ship name in Western texts.
From: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element
If the content is something that needs to be "emphasises" then, no use the em tag as that is semantically correct across all user agents. The example on the spec, with a Latin technical name for an animal, is a perfect example of something that would be italicized, but not emphasised (although visually they would look the same).
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
Would be styled:
The Felis silvestris catus is cute.
So, if you can justify why the text is "italic", but not emphasised, keep it as is, otherwise change it to a semantically appropriate tag.
Adding to danielnixon answer (+1): if I want to use a fontawesome icon as a decorative thing in the UI (not a link, button, etc), I add a span with a wai-aria attribute:
<span class="fa fa-small-arrow" role="presentation"></span>