menu
close

Error: Element Style is Missing Required Attribute Scoped

A professional web developer always ensures if his website has any HTML error before delivering it to the client. I do it once the coding is finished. This post explains one error code I received while validating the HTML code. As I progress HTML validation with my websites, I met a new error "Error: Element style is missing required attribute scoped". Validator showed the lines where this error present. While checking the code I found the following lines.

<style >
    blockquote
         {
         clear: both;
         font-style: italic;
         margin-left: 10px;
         margin-right: 10px;
         position: relative;
         border: 0px;
         font-size: 20px;
         line-height: 200%;
         font-weight: light;
         width: 100%;
         font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
         text-align: center;
         }
    </style>


The screenshot of the error message is shown below.



<style> is considered as part of CSS and anything written in it will be applied to the whole document. However, if we use the attribute scoped, the style applies only to its parent element. To read more about it, you can visit the Mozilla Developer site using the link below.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style


Though scoped attribute is very helpful, not every browser support it right now. At this time only the latest versions of Mozilla Firefox is supporting scoped attribute. But there is a good method to override this defect by using: scope. Using: scope instead of scope we can avoid the risk of applying the special style to entire document in unsupported browsers.


Fix

I have fixed the HTML validation error by adding the scoped attribute to the style. Once the code is updated, the error message is gone. The new style is given below.
<style scoped>
         blockquote
         {
         clear: both;
         font-style: italic;
         margin-left: 10px;
         margin-right: 10px;
         position: relative;
         border: 0px;
         font-size: 20px;
         line-height: 200%;
         font-weight: light;
         width: 100%;
         font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
         text-align: center;
         }
      </style>

As I explained above, right now this code is error free but will work on Firefox (latest versions) only. For any unsupported browsers, this style will be applied to the whole document. To solve that issue, I should rewrite the code as below.

<style scoped>
    :scope blockquote
         {
         clear: both;
         font-style: italic;
         margin-left: 10px;
         margin-right: 10px;
         position: relative;
         border: 0px;
         font-size: 20px;
         line-height: 200%;
         font-weight: light;
         width: 100%;
         font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;
         text-align: center;
         }
 </style>

Related Tutorials
  1. Element div not Allowed As Child of Element Span in this Context

  2. Validating user input in PHP input Forms

  3. Problems With Receiving Emails On ZOHO Mail

  4. Warning: Invalid Argument Supplied For foreach()

Element div not Allowed As Child of Element Span in this Context

Today morning I tested some of my websites using W3 validator (https://validator.w3.org) to check whether they have any HTML errors. They were developed by a freelance HTML developer hired online. One website showed an error - "Error: Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree)". This is one of the easiest error we can fix and it happens by a web developer who doesn't follow the basic rule of never put block-level elements inside inline elements. While testing the code I found the following lines which created the error.

<span class="mob-menu-toggle" data-target="#navbarCollapse" data-toggle="collapse">
<div id="nav-icon" >
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</span>

Here, the block level element <div> is placed inside an inline element <span>


Solution

All you need to remember to solve this error message is to never place a block level element in an inline element. If you are not sure which are block level elements and inline elements, follow the chart below. In this chart, you can see examples of both types of tags.

List of Block-Level Elements
  • <div>
  • <h1>
  • <h2>
  • <h3>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <p>
  • <form>

List of Inline Elements
  • <span>
  • <a>
  • <img>

Element <div> is a block element which defines a section of HTML as a container. Where <span></span> is used to group inline elements in a document used for text. The principle is applicable when we use ul and span. In webmaster forums, many persons asking similar questions like "Validation error: ul not allowed as child of element span" while they test their website for HTML errors using HTML validators. The answer is same, here UL is a block level element but <span></span> is inline element. If anyone use UL inside <span></span>, HTML validators will show the error.

Popular Articles
  1. Prevent Malicious User Inputs In PHP Form

  2. Warning: Invalid Argument Supplied For foreach()

  3. PRevent Others Display Images Hosted On Your Server

  4. Forcing Google To Manually Index a Website

Prevent Malicious User Inputs In PHP Form

A professional website always must have a way to receive user inputs either in the form of a comment column or in the form of a user input form. It is a must for successful websites to receive feedback from their users but some malicious persons use this option to inject malicious scripts to the website. If the data entered by the user is directly inserted into the database, the situation is very critical. Luckily, PHP has some built-in functions to validate the data inserted by a user using the user input form. Before explaining those functions, it is better to understand the effects of tricky external credentials.

Effects of Malicious User Inputs on a Website


Though a PHP address form is intended to receive user details like name, address etc, it will take every string submitted unless we don't implement strict validation. If someone enters a script instead of name, it is possible that the form will accept it unless there is a validation. It will be extremely dangerous if we use the same input for any data base query.


Built in PHP Functions To Validate User Inputs Though Form


Here is the list of three important functions which validates data entered through a PHP form.

  1. Trim() :

    Trim() function is used to remove any extra space, new line etc from the form inputs. Every text filed values must be passed through trim() function before taking the input for operations.

  2. htmlspecialchars()

    Htmlspecialchars() function will convert any HTML element in the user string to HTML escaped characters and prevent it from executing the code.

  3. stripslashes()

    This function removes backslashes (\) from the user input data.


By the combined use of these three functions, we can reduce the risk of taking user input through PHP form. Now let us check how to implement these three functions in our code.


Implementation of PHP Form Validation In a Code


Let us consider the username received through a PHP form is $_POST["username"];. We need to pass the value to a variable like $user=$_POST["username"]; Right now we do not know whether the input is harmless. So we need to create a custom function by using the three functions explained before.

function validate($x)
{
   $x= trim($x);
    $x= stripslashes($x);
    $x= htmlspecialchars($x);
    return $x;

}


Now the user inputs must be sanitized using the custom function we have created. For example, we are going to validate the $user using the function validate().

validate($user);


Related Articles
  1. Multiple Article Submission Penalty

  2. Web Traffic Vs AdSense Earnings

  3. Optimize Blogger Template

  4. How to Calculate CPC

Cloud Computing Advantages and Disadvantages

The buzzword of the moment is “cloud computing,” and competition is stiff to attract users to the variety of cloud services available. Simply put, cloud computing is the idea of accessing data storage and applications at a remote site over the Internet, rather than from a local network. In this article, we look at the major advantages and disadvantages of using cloud computing for a company. We cannot avoid the importance of cloud computing and we know it is the future. At the same time we must of aware of the risks in using cloud computing to store sensitive data of a company or institution. Final decision to use cloud computing for a company should fully depend on the detailed analysis of the risks and advantages of this new technology.

According to Gartner, one-third of all consumer data will be in the cloud by 2016, compared to 7% today.1 Microsoft has predicted that 74% of small and medium-sized businesses will use at least one cloud service by 2014.2

Most consumers have had a taste of these services through their email accounts with Yahoo! and Gmail, storing their music on Apple’s iCloud, or adding a book to their Kindle library. Businesses have been slowly testing the waters for their enterprise solutions.

But while each group has experienced some advantages from these services, concerns remain that must be addressed to further the level of acceptance of this technology. Let’s take a look at these issues, from the perspective of both businesses and consumers:

What Are The Advantages Of Cloud Computing

Among the advantages of cloud computing for both groups are:
  • Cheaper Devices: Devices can be made with less-expensive components since storage and CPU cycles are offloaded to the server in the cloud.

  • Universal Access: Synchronized, universal access from almost anywhere in the world to applications and data from devices ranging from smartphones and tablets to desktops.

  • Less Data Loss: Backup responsibilities are shared by the cloud service provider (CSP), meaningless data loss due to drive failures.

  • Less-Expensive Applications: Cloud applications can be supported by advertising or make use of a rental model, in which you pay to access an application on a per use basis. This is ideal when you need an application for only one project.

And specifically for businesses, cloud computing can result in reduced expenses and faster implementation of new projects. The costs of private servers and their management are eliminated; instead, the costs of server hardware and management with other companies are “shared” via the CSP.

What Are The Disadvantages Of Cloud Computing

But the flight to the cloud is not without some turbulence. There are certain disadvantages of using cloud computing. Most notably:

  • Security: A new level of trust is necessary when someone else is storing and transmitting your data, especially over a public network such as the Internet.

  • Accessibility: What happens to the data on cloud servers when the CSP is temporarily down or is shut down for legal or financial reasons? For example, when file-sharing site Megaupload was abruptly shut down by the U.S. Department of Justice for alleged sharing of copyrighted material, many legitimate users were locked out of accessing their own data files.

  • Privacy: Issues abound, not just from possible hackers but also from the employees of the CSP. Do they have access to the encryption passwords set up by the customer?

  • Performance: Bandwidth constraints can degrade performance. The average Internet speed in the United States is 5 megabits per second (Mbps). A typical local computer can easily move data twenty times faster.

  • Data Caps: Cloud computing means that more data is being transferred over the Internet. Meanwhile, Internet Service Providers (ISPs) continue to lower data caps. This will lead to surcharges and throttling as users exceed their limits more often, especially on the consumer side.

And specifically on the business side:

  • Many enterprise applications have a high degree of interoperability, which gets extremely complicated during the transition phase, where some applications are local and some are in the cloud.

  • Businesses must also ensure that the CSP is in compliance with various industry standards, such as the Health Insurance Portability and Accountability Act (HIPAA).

Time will tell as to how these services will be adopted and how providers will handle the various issues. Consumers are likely to lead the cloud revolution, because they may be less concerned about security, privacy, and reliability than businesses. But both groups need to think before they jump into the cloud, or they may fall right through – without a parachute.


Gerald Villani
Computer and Networking Administration Instructor
Remington College – Cleveland Campus

About Gerald Villani: Mr. Villani is a full-time instructor in the Computer and Networking Administration program at Remington College in Cleveland, Ohio. He holds a Bachelor of Science degree in Computer Science from Youngstown State University, as well as Microsoft and other industry certifications. He has worked in private industry for 25 years, managing hardware, software, and network help desks. He was involved at the beginning of the World Wide Web era, working with the Cleveland Plain Dealer newspaper and Advanced Publications to launch the first-ever websites for Cleveland.com and the Rock and Roll Hall of Fame and Museum, among other sites.

http://www.networkworld.com/news/2012/062512-gartner-cloud-260450.html
http://www.microsoft.com/en-us/news/presskits/telecom/docs/SMBStudy_032011.pdf