I've earlier heard that Firefox has a major problem with links wrapping around block elements, and it did recently give me some problems.
It is sometimes (maybe with a 20% rate), for some reason, changing this code (note that all the elements are defined as block elements in my stylesheet):
<li>
<a href="product.htm">
<img src="product-image.jpg" width="100" height="100" alt="Product image" />
<h2>Product title</h2>
<p>Product description</p>
</a>
</li>
Into this:
<li>
<a href="product.htm">
<img width="100" height="100" alt="Product image" src="product-image.jpg">
</a>
<h2>
<a _moz-rs-heading="" href="product.htm">Product title</a>
</h2>
<p></p>
<p>
Product description
</p>
</li>
Which forces the stylesheet to display the elements in a totally wrong way; I use the a element to get a big link containing the product image, title and description in a webshop product list.
I want those big links and can't find an alternative way to do this. What would you suggest?
I don't know how authoritative a resource xhtml.com is, but they do say that the a tag can only contain:
Inline elements, except a, at any depth
Text
A possible solution would be to just reorganize your HTML so that it makes more sense (eg, not trying to put block-level elements in inline-level elements). Just have a single link for the product (maybe in the h2, or around the image). Then use JavaScript to detect a click anywhere on the li, and load the link.
Does that make any sense? Here's an example.
Are all instances of these list items consistently coded? (Read: run the whole thing through the validator.) You said it only happens ~20% of the time, so you should first establish there's nothing different about the ones that break. This appears to be some kind of hyper-correction on the browser's part. A search for _moz-rs-heading turns up a bunch of old posts like this one. (Note the bug referenced there is fixed.) But in some of the cases, the people eventually discovered that their actual <a> tags were broken, they just weren't seeing it, and the modifications you're spotting were Firefox's attempt to handle it somewhat gracefully.
I had the same problem: the same HTML would display in a variety of ways. Literally each time I refreshed the page, Firefox broke my <a>..</a> into lots of smaller <a>..</a><a>..</a> blocks, each time in different ways. (Nearly) each time it displayed wrongly.
This page is a good resource, it suggested putting a <div> directly underneath the <a>, but in fact the page my web designer had supplied, which didn't work, already had that.
So what I did, was to replace my <div> with a <span style="display:block"> and that works now.
<a ...>
<span style="display:block">
...
</span>
</a>
Related
According to the HTML5 docs, the link tag <a> accepts all contents, but, is this really correct?
For figure elements, which one is valid? If more than one is valid, is any one of them better than the other in any objective way?
<figure class="box">
<a href="#">
<img src="" alt="" />
<figcaption>Hello!</figcaption>
</a>
</figure>
<a href="#" class="box">
<figure>
<img src="" alt="" />
<figcaption>Hello!</figcaption>
</figure>
</a>
<figure class="box">
<a href="#">
<img src="" alt="" />
</a>
<figcaption>Hello!</figcaption>
</figure>
Fragment #1 is invalid (in the sense that it does not pass validation by a conformance checker such as Validator.nu), because a figcaption may not appear as a child of any element but a figure.
Fragments #2 and #3 conform to HTML5, but they mean different things. To start, here is what the spec says about a elements:
If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.
With this in mind:
In #2, the figure is the hyperlink content.
In #3, only the image is the hyperlink content. The caption is not part of the hyperlink. The image and the caption are both part of the figure, however.
Because they mean different things, neither is "better" than the other in a generic sense. Do you want the entire figure to be a hyperlink? Then use #2. Do you want just the image to be a hyperlink? Then use #3.
In objective terms it is difficult to establish, in technical terms there are the following recommendations of w3c
"The figures element Represents some flow content, optionally with a caption, That is self-contained (like a complete sentence) and is Typically referenced as a single unit from the main flow of the document.
Thus the element can be used to annotate illustrations, diagrams, photos, code listings, etc.
When a figure is Referred to from the main content of the document by identifying it by its caption (eg by figure number), it Enables such content to be easily moved away from primary That content, eg to the side of the page, to dedicated pages, or to an appendix, without Affecting the flow of the document. "
In these terms the # 1 can be considered a way to easily separate a part from the general context
Hi I have a page that I am working on, which takes articles from a database. the results are split using php and show six articles per page. The problem i have is that if there are seven results and we roll into page 2, then everything thing is fine as can be seen under the timepieces menu button.
If however there are less than 6 articles and only one page the first article goes funny and the text drops below the image as can be seen under the private aviation button.
A link to the website is here : http://goo.gl/N8p8CT
Both items appear to be within the article.row.mid and so i am struggling to work out why.
Cause first article has image wrapped into <a></a> tag, but second article hasn't, these two images are rendered by different css rules.
and
first one is styled by botstrap.css rules, 2-nd is by your own stylesheet.
Anyway if you use bootstrap, then it's better to wrap image of article into a div for better alignment using bootstrap grid.
I'd do:
<article class="row mid">
<div class="col-xs-4">
<a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
<img src="admin/images/private_jet_hanger-1413201025.jpg" alt="post1" height="250px" width="250px">
</a>
</div>
<div class="col-xs-8 info"><a href="https://www.flyvictor.com/?utm_source=display&utm_medium=leaderbanner&utm_campaign=tempus20141010" target="_blank">
</a><h1>Jet Partner launches empty leg service...</h1>
<p class="details"></p>
<p class="tags"></p>
<p class="text">
</p><p>The advantages associated with private jet travel are invaluable: the ability to journey in comfort, security and privacy; to arrive at the airport just 15 minutes before take-off and to completely avoid check-in. Now, the advent of groundbreaking </p>
Read More <ul class="counters list-inline">
</ul>
</div>
</article>
Background
I am using Swiper to create a slider for a restaurant website and I would like to code it as semantically as possible. To give you an idea of the content, each slide has four main features:
Background image
Menu category (i.e. sandwiches)
Menu item
Menu item description
If you need a visual (and an appetite):
My Solution
This was the most semantic way I could think of to code it:
<figure class="swiper-slide">
<img src="img/hammin-it-up.jpg" alt="" />
<figcaption>
<strong class="slider-menu-category">Sandwiches</strong>
<dl class="slider-menu-item">
<dt>Hammin' It Up</dt>
<dd>Fontina Cheese & Blackforest Ham grilled on Texas Toast</dd>
</dl>
</figcaption>
</figure>
My Question/s
Is it semantically friendly and w3-OK to use a <dl> within a <figcaption> tag?
Is there a more semantic way to show the slide "title" (aka category) than using a class? I realize this is a separate question, but it's related and I couldn't cram all that into the post title...
My Research
I could not find a site with an exact match to what I did, but I found some that were close:
MDN has some examples with a <cite> tag inside a <figcaption>.
HTML5 Doctor has an <a> and <code> inside the same.
An S.O. user posted an indirectly related question, but I noticed within their markup some <p> tags inside a <figcaption>.
w3.org indicates nothing suggesting my method was incorrect, so I am semi-sure it's fine, but any feedback would be appreciated.
Yes, dl is allowed inside of figure/figcaption: dl is flow content, and figure/figcaption expect flow content according to their content model.
However, I don’t think it’s the best choice in your specific example.
The dl doesn’t really add anything to understanding the content of this figure. It would be appropriate if there were several name-value pairs (e.g., "Price", "Ingredients" etc.), but what you currently have is just a title and a description.
The strong element doesn’t seem to be used according to its definition ("strong importance, seriousness, or urgency") here.
And I also think that the category/title/description isn’t really a caption for the photograph in this case; to me, it seems these 4 elements should be on the same level, so to say. But this is open for interpretation and also depends on the context where this slideshow will be shown.
Instead of using figure, I think that each menu item should be an article. This choice enables the use of headings and header elements:
<article>
<img src="" alt="" />
<header>
<div>Sandwiches</div>
<h1>Hammin' It Up</h1>
</header>
<p>Fontina Cheese & Blackforest Ham grilled on Texas Toast</p>
</article>
use <div> .. </div> for everything , <figcaption> is allowed with HTML5
sticking with div's will be compatable with any browser on any device. You can use a title attribute if you'd like. You can also have any attribute as long as it starts with data-
and example would be <div class="exampleClass" data-title="My Title" data-info="My other info">
I am working on a website on which i show restaurants according to either categories, food, etc. So I have a listing page where I list the restaurants as per the filters applied by the user.
I have a SEO question.
It is said that using heading tags<h1>,<h2>... tags should be used for titles, and important items.
So this is what I did.
...
<div class="item">
<h1>Title of Restaurant</h1>
<h2>Address</h2>
<p>Description</p>
</div>
...
which, for design changes, was later changed to
[EDIT]
As per #Guffa's response, there should be minimum <h1> tags possible on the page.
Since the Title of the restaurant is important and I want it to be recognized as a heading rather than simple text, I'll use <h3> for it.
...
<div class="item">
<h3>Title of Restaurant</h3>
<h4>Address</h4>
<p>Description</p>
</div>
...
The scenario that <h4> tag has no text but rather a child node with a link.
So my question is when my page is indexed (second case), will the <h4> be recognized?
Or will it be completely ignored and thought of as a hyperlink?
Is filling the heading text with a very high text-indent a smart idea?
Or should i use the anchor as it is and apply a title attribute to it?
The h1 tag should be used for important information about the page, so you should really only have one on the page.
Having a listing with h1 tags means that the spiders get conflicting information about what's important on the page, and will likely ignore all of them.
As the h1 should be something like the title for the page, it doesn't make much sense to have a link inside it, as that link would go to the same page.
I have inherited a website, in which I am having to update about 3500 files with very 95% similar content in each (product pages).
In order to make some changes, I am using Regex (in Dreamweaver) to do some bulk editing.
I've been able to get everything done ok, but I am running into a problem with content within a tag.
I need to be able to grab all the content within that tag and save it for when I replace the other content on the page (this is one of the few things whose content is different from page to page).
Here is an example:
<ul>
<li style="padding-top:10px; text-align:right;">Single Item - $99.99 <img src="../../images/buy-now-button.gif" alt="Buy Now" width="50" height="20" border="0"> </li>
<li style="padding-top:10px; text-align:right;"><strong>Set of 6 Items - $299.99</strong> <img src="../../images/buy-now-button.gif" alt="Buy Now" width="50" height="20" border="0"> </li>
<li style="padding-top:10px"><img src="../../images/free_shipping.jpg" alt="Free Upgrade." width="227" height="107"> </li>
</ul>
I would go more individually and get the content in the individual <li> tabs, but the problem is that some pages have only one <li> within the <ul>, or up to 6 depending on the number of product variations on that page.
So my overall question is this: how do I grab all the content (including new lines, other tags, etc.) within a given tag and save it for when the rest of the content needs to be replaced? I know how to use parentheses around the content and then $# in the Replace section.
The websites I've worked on thus far have been much smaller, and I've not had much need for Regex because it was typically easier to make changes manually or just using literal text in Find/Replace.
How complex are these web pages? If <ul> elements are never nested inside other <ul> elements, and you don't have to deal with bogus tags inside (for example) SGML comments or CDATA sections, this is probably all you need:
<ul>[\s\S]*?</ul>
[\s\S] is how you match any character including newlines in JavaScript regexes (which is what Dreamweaver uses, or so I've read).
*? tells it to match zero or more, reluctantly--meaning it quits matching as soon as it becomes possible for the next part of the regex (</ul>) to match.