With this snippet of HTML, the topmost google link is included in every element under it when shown in Firefox and Chrome.
<div>
<a href="http://www.google.com/">
<div>
<div>
<div>
<div>
<a>a tag</a>
</div>
<img />
<h3>a title</h3>
<p>a description</p>
<div>a detail</div>
</div>
</div>
</div>
</a>
</div>
What is causing this parsing issue and how can I fix it?
Try dropping the following document into the W3C Validator:
<!DOCTYPE html>
<html>
<head>
<title>Parse error?</title>
</head>
<body>
<div class="g23">
<a href="http://www.google.com/">
<div class="article-bg">
<div class="splash-border-right">
<div class="splash-content-margin">
<div>
a tag
</div>
<img src="http://www.google.com/image.jpg" />
<h3 class="splash">a title</h3>
<p>a description.</p>
<div class="read-time">a min</div>
</div>
</div>
</div>
</a>
</div>
</body>
</html>
Observe that this document is not valid HTML5. The first error:
Line 13, Column 65: An a start tag seen but an element of the same type was already open.
That is, a tags must not include other a tags. According to Alohci in the comments, Chrome and Firefox's behavior matches the HTML5 spec's adoption agency algorithm for this scenario. It's funky, but, with invalid code, funky results are to be expected.
Related
I have a certain number of images into the html, and each one is accompanied with some text and/or transitions. Each set of img and whatever else (text, video, etc...) is inside a div to allow and simplify positioning. Also, each image is numbered as in a magazine or a book. Lets say for the shake of argument that there are 30 pages.
Then from the art dept, I receive a new page, which will be the fourth page, displacing the following ones one page further. Also, for organization porpouses, the img files also are renamed (i.e. img-20-jpeg now is img-21-jpeg)
Im looking for a way to avoid renaming manually classes of each div, img, paragraph, both in html and css.
I have tried to ignore actual numbers in img sources and refer the css styling to each "page" by nth-child selector.
Also, I have tried to relate each set of text, effects, etc... to it's inmediate "page" parent with ~.
so far, i have succeded only in epic headaches.
<div class="page">
<img class="page" src="photo/img.001.jpeg" alt="1">
<p class="text-page-1">
some text
</p>
</div>
<img class="page" src="photo/img.002.jpeg" alt="2">
<img class="page" src="photo/img.003.jpeg" alt="3">
<div class="page">
<img class="page" src="photo/img.004.jpeg" alt="4">
<video class= "video-page-4" src="video/4.mov" controls playsinline loop></video>
</div>
<div class="page">
<img class="page" src="photo/img.005.jpeg" alt="5">
<p class="text-page-5">
some other text
</p>
</div>
A couple ideas.
avoid numbering; use comments to keep track. also change the hard-coded classes like text-page-1 to get a paragraph inside of class page: .page p or .page > p.
<!--page 1-->
<div class="page">
<img src="photo/img.001.jpeg" alt="1">
<p>
some text
</p>
</div>
<!--page 2-->
<div class="page">
<img src="photo/img.0045.jpeg" alt="1">
<p>
some text
</p>
</div>
use old-school numbering. start at 10 and go up by 10, or even 100.
that way you can do inserts without renumbering everything.
<div class="page">
<img src="photo/img.10.jpeg" alt="1"> <!--start at 10.-->
<p class="text-page-10"> <!--use class only if necessary-->
some text
</p>
</div>
<!--can insert a new page here using numbers 11-19.-->
<div class="page">
<img src="photo/img.20.jpeg" alt="1">
<p class="text-page-20">
some text
</p>
</div>
You can use this code
<!--page 1-->
<div class="page">
<img class="page" src="photo/images/img1.jpeg" alt="1">
<p class="text-page-1">some text</p>
</div>
<!--page 2-->
<div class="page">
<img class="page" src="photo/images/img2.jpeg" alt="2">
<img class="page" src="photo/images/img3.jpeg" alt="3">
</div>
<!--page 3-->
<div class="page">
<img class="page" src="photo/images/img4.jpeg" alt="4">
<video class= "video-page-4" src="video/4.mov" controls playsinline loop></video>
</div>
<!--page 4-->
<div class="page">
<img class="page" src="photo/images/img5.jpeg" alt="5">
<p class="text-page-5">some other text</p>
</div>
I have been using Schema.org to markup a FAQ section inside my articles. One year ago the Google Structured Data Testing Tool was not showing any error. However now show 2 errors.
Question:
name - A value for the name field is required.
WebPage / FAQPage
mainEntity - A value for the mainEntity field is required.
The Microdata I am using is:
<div itemscope itemtype="http://schema.org/Question">
<div itemprop="text">
<main itemscope itemtype="http://schema.org/WebPage http://schema.org/FAQPage">
</main>
QUESTION
</div>
<div itemprop="acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
<div itemprop="text">ANSWER</div>
</div>
</div>
Any idea how to solve this problem?
I finally solved like this:
<div itemscope itemtype="http://schema.org/FAQPage">
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
<div itemprop="name">QUESTION</div>
<div itemscope itemprop="acceptedAnswer" itemtype="http://schema.org/Answer">
<div itemprop="text">ANSWER</div>
</div>
</div>
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
<div itemprop="name">QUESTION2</div>
<div itemscope itemprop="acceptedAnswer" itemtype="http://schema.org/Answer">
<div itemprop="text">ANSWER2</div>
</div>
</div>
</div>
Google sometimes changes some requirements for the structured data, here you can only be on the safe side if you test it regularly. In your case it seems that the Question itself is missing for google: At least the first error is easily fixed, I tried fixing the FAQPage error but somehow I couldn't get it yet. I will try a bit more and edit my question if I find a good solution!
Edit: I couldn't get it to work fully but what I found out so far: Here is a FAQ Page example from google itself, it seems you have to wrap the faqPage around all questions. And have the mainEntity of type Question. Maybe with this example you can change your markup to get the desired result.
<div itemscope itemtype="http://schema.org/Question">
<div itemprop="text">
<div itemscope itemtype="http://schema.org/WebPage http://schema.org/FAQPage">
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
</div>
</div>
<span itemprop="name">QUESTION</span>
</div>
<div itemprop="acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
<div itemprop="text">ANSWER</div>
</div>
</div>
For regular automated testing, I would recommend using the screaming frog program in which you can connect an API for SDTT. At one time we solved a similar problem by adding itemprop = "name" to the questions. Below is an example of a page where the validator has no comments at the moment: https://fixly.pl/kategoria/pozostale-uslugi-tapicerskie/radomsko .
Example of code:
<div class="l4Category__seo">
<div class="l4Category__seoText">
<div itemscope="" itemtype="https://schema.org/FAQPage">
<div itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">question</h3>
<div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p style="text-align:justify">The answer</p>
</div>
</div>
</div>
<div itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">question</h3>
<div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p style="text-align:justify">The answer</p>
</div>
</div>
</div>
<div itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<h3 itemprop="name">question</h3>
<div itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
<p style="text-align:justify">The answer</p>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to figure out why my small static webpage isn't showing up properly when viewed on mobile (noticed on Chrome android app). According to the docs, the columns should automatically stack on mobile. But, when I view it I see a normal view of the page with the width fitting correctly to the screen, but the columns stay in one row. Shown in the below screenshot.
I tested to see if it's my code by resizing the page on a desktop browser and the page responded as expected, stacking the cards so in a single column. Here's a desktop-view imitated on my phone.
Any idea what's going on? What am I doing wrong? Here's the code
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css"/>
</head>
<body style="background-color:#00aced;">
<div class="container">
<div class="notification" style="background-color:#fff">
<strong>Remember:</strong> In order to continually receive updates, please install the GoodSamarit4n repository from
here. This is the <em>only</em> official source. The reason I am providing links to the add-on zips is for complete transparency and for those who would like to study and learn from the code.
<br>
</div>
</div>
<div style="padding: 20px;" class="container">
<div class="columns">
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/githubforkodi.png" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Githubforkodi
</p>
</header>
<div class="card-content">
<div class="content">
A kodi program add-on for managing your github account. View repos, branches, notifications, Open/Close/Comment on issues, Merge/Deny pull requests, Get real-time notifications, And much more! The power of github combined with the simplicity of kodi.
Creator #goodsamarit4n. <a>#kodi</a> <a>#github</a> <a>#program</a> <a>#add-on</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/pugdonut.png" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Squeee!
</p>
</header>
<div class="card-content">
<div class="content">
A kodi video add-on that provides cute, funny, and heartwarming animal videos from all over the internet. Skip the endless clicking around your favorite sites and let Squeee! bring all of those sites to you in an easy-to-digest fashion. Click through videos one at a time or play an entire playlist and just sit back and embrace the fluffy.
Creator #goodsamarit4n. <a>#kodi</a> <a>#squeee</a> <a>#video</a> <a>#add-on</a> <a>#cute</a> <a>#animals</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://pugdaddy.000webhostapp.com/images/illuminati.jpg" alt="Image">
</figure>
</div>
<header class="card-header">
<p class="card-header-title">
Alternative Facts
</p>
</header>
<div class="card-content">
<div class="content">
Get ready to get beligerantly angry or find yourself continually muttering "What the f###?" under your breath. For those who enjoy seeing just how crazy some folks are. With documentaries on conspiracy theories gathered from all over the web. If you don't see a topic, feel free to tweet at me and I'll see about adding it for you.
Creator #goodsamarit4n. <a>#kodi</a> <a>#alternativefacts</a> <a>#video</a> <a>#add-on</a> <a>#conspiracy</a> <a>#theories</a>
<br>
<small>8:00 PM - 24 Jul 2017</small>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Adding the following meta tag may solves the problem.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I'm trying to extract the text from within the div tag (Refer Code) (that is I need to extract "Stackoverflow to your rescue!")
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="five">
<div class="text_desc">
<p itemprop="description">
<p>
<div>
Stackoverflow to your rescue!
</div>
</p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to scrape using scrapy in python, but I don't understand why response.selector.xpath('//div[#class="text_desc"]').extract() returns an empty list. So I'm unable to write queries to extract the text. Tell me how should I go about it! (A solution using cssSelectors would also do)
I have 3 divs that show correctly in chrome firefox, but, in IE, they aren't showing in the same way...
I want to display something like this
but, in IE7,IE8,IE9, I am getting:
I added the code to jsfiddle and ran it on IE and seemed to be ok, but in server it is displaying as in the above image...
What could be wrong, is there a line of code that is missing to IE?
Please take a look at my fiddle
http://jsfiddle.net/QcayB/2/
this is html
<div id="wrapper">
<div id="header">
<img src="http://www.astrosurf.com/re/tse_20060329_earthshine.jpg" width="500" height="478" alt=""/>
<h1> </h1>
</div>
<div id="main">
<div id="col_izq">
<p>
</p><div id="usa">
<a id="usajq" href="#"><span class="textots">left</span></a>
<a id="usajql" href="#"><span class="textotsl">left</span></a>
</div>
<p></p>
</div>
<div id="col_medio">
</div>
<div id="col_der">
<p>
</p><div id="mexico">
<a id="usajq" href=""><span class="textotst">right</span></a>
<a id="usajql" href=""><span class="textotslt">right</span></a>
</div>
<p></p>
</div>
</div>
</div>
You may have something like this on your page?
<meta http-equiv="X-UA-Compatible" content="IE=7">
X-UA-Compatible may also be being sent by your server in the response header.