Forum Moderators: martinibuster
The old search markup didn't come anywhere near validating when used in XHTML documents. Using XHTML 1.0 Transitional allowed the presentation attributes to validate, but the markup wasn't XML - for example there were attributes with no value at all, where using a value of "" would have made it conforming XML.
The latest search code works great even with the Strict DTD, because there is no presentation in the markup - it's all done with a stylesheet. The problem is that the <style> tag used to reference the stylesheet is directly above the search form markup itself; it's not valid to place <style> in the <body> element of an HTML page - it must be in the <head>.
I'm going to contact AdSense support to ask whether it would be permissible to move the <style> element into the <head> element on my site. I don't want to just do it on my own because the AdSense TOS forbid editing the markup they supply.
Valid HTML is very important to me, not just as a mark of professional quality, but because I'm working to make all my sites completely accessible to the audio web browsers used by visually-impaired people. Valid markup is critical to enable such browsers to function correctly.
The <style> element is:
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
Following is a minimal HTML document with the <style> element place adjacent to the search form. Most of the form's markup is stripped out for brevity. If you save it to an HTML file and try to validate it, you'll find that the validator complains about the <style> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Invalid Document</title>
</head>
<body><style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-right" style="background-color:#FFFFFF;color:#000000">
<!-- Search form markup goes here -->
</div></body>
</html>
In this version, the <style> element is placed in the <head> element, where it belongs, so you'll find that it validates. Would I violate the AdSense TOS if I edit their code this way?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Valid Document</title><style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style></head>
<body><div class="cse-branding-right" style="background-color:#FFFFFF;color:#000000">
<!-- Search form markup goes here -->
</div></body>
</html>
I'm hoping AdSense Advisor will comment.
As I said, I'm going to ask AdSense support about this, and will report back on their response.
On the second page of the Search setup (Choose Search Box Options), there are seven options for the Look and Feel: three with "Google Custom Search" next to the search box, three below the search box, and one within it. The option to have the logo within the search box says "Note: Watermark requires Javascript".
If you choose this last option, the markup supplied by Google is XHTML 1.0 Strict-compliant, and so my pages validate if I use it.
The options to have the logo below or next to the search box render a page invalid, because they will all have the <style> option within the <body> element, where it's not allowed.
As I was getting ready to contact AdSense support about the validity of their markup, I was led to the following page on making the search markup XHTML-compliant:
[google.com...]
Unfortunately, it refers to the old style of search, and no longer applies to the current search implementation. It's likely to confuse a lot of AdSense publishers - I'll drop AdSense Support a note to ask them to update it.
