Strict doctype with one validation error?

Hi. I code with strict html. I now have a webpage that the client requires a small pop-up .html window that contains a larger version of a thumbnail with verbiage. (Visitor can choose to click on thumbnail or not.) Since I have to be able to specify W and H for each pop-up page, I like this code best:

<a href="popup1.html" target="windowName" onclick="return!open(this.href, this.target,'width=447,height=516,')">

(There are other parameters like scrollbar I didn’t bother to include). This works in all FF and IE I have tested and is so lean…but won’t validate strict.
I could use JavaScript just to validate, but the extra I/O and more bytes of code seem silly when this code works.
I’m not real sure what a browser does with a doctype. Is it horrendous to use a strict doctype when you have only one invalid incidence? Or must I use the doctype below on those webpages? (PS: A cohort of mine uses strict, but said his AdSense search bar breaks validation on one site, and some custom javascript attributes break it on another) ?? I’m confused:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>

Hi Marcus99, welcome to the forums,

You first said you are coding in HTML, but the doctype you showed is XHTML. Unless you are serving XHTML as XHTML a browser will render it as invalid HTML (probably in quirks mode) so I doubt if that W3C validation error will make that much difference.

I’m sorry. It’s late. This is the doctype I use:
<!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”>

So if I use this doctype knowing that I have the one error, then the browser will go into Quirks mode? Is this worse than using Traditional? I’m trying to figure out the best thing to do regarding best and fastest rendering.

I don’t know if the error would do it. But if the HTTP headers are sending

Content-Type text/html

instead of

Content-Type application/xhtml+xml

and the browser sees an XHTML doctype AFAIK that will trigger quirks mode.

In other words it will think <br /> is an improper <br> tag and “fix”, it and other “impropers”, as best it can as HTTP headers take precedence over the declared doctype.

OK. I don’t understand the HTTP headers. The more I know the more I don’t know. I guess I’ll look into Transitional in the morning. I hate not being able to use Strict mode. Thanks for your help Mittineague.

The validation error is because HTML4/XHTML1.0 do not have a target attribute. That is a HTML3.2 attribute that can only be used while transitioning to HTML4/XHTML

With HTML4/XHTML you must use the JavaScript window.open command instead.

Page validation is just a guide, not a do or die issue (necessarily). If you want to keep the highest standards, separate the JS from the HTML entirely. That way, f someone has JS disabled, the link will still make sense.

Just in case you got confused the current Transitional versions of XHTML 1.0 and HTML 4.01 both have a ‘target’ attribute. Though Strict never had, and thus ‘target’ hasn’t been deprecated.

Basically it was because the ‘target’ attributes were mainly meant to be used along with Framesets as ‘frame target names’. However, a lot of people took of advantage of them and used them to spawn new ‘browser’ windows (which wasn’t really the correct usage). Although it was supposed to be a “fallback/failsafe” mechanism if the user-agent came across a value for an “unknown frame” that it would create a ‘new window’.

Also as was mentioned above it’s considered better practice to use externally linked JavaScript to spawn new windows than misusing the ‘target’ attribute. In addition if you used unobtrusive JavaScript it would mean the page possibly would be more accessible than using ‘target’ to hook.

Thanks for the input. I understand why I cannot use target. I have looked for a simple javascript to do this, but only found one very large script that would allow me to specify the W and H of the pop-up window in the anchor … it looked like overkill. Any suggestions?

Also, I don’t understand the statement: “… separate the JS from the HTML entirely. That way, if someone has JS disabled, the link will still make sense.” I understand that a few folks might have javascript disabled, but how can you still offer then the pop-up experience? If you can, then why not use that solution for everybody?

You offer it without the popup for those without JavaScript.

Whether a popup window opens or not is most accessible if you leave it to your visitor to decide whether they want one or not.

Here’s a simple example of a page with a popup link to another page. If JS is disabled, the link goes straight to the next page, rather than offering it as a popup. (I’ve put the JS on the same page for convenience, but normally I’d put it in its own file.)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
	
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Example</title>

<script type="text/JavaScript">
window.onload = function() {
  if (!document.getElementsByTagName) return false;
  var lnks = document.getElementsByTagName("a");
  for (var i=0; i<lnks.length; i++) {
    if (lnks[i].getAttribute("class") == "popup") {
      lnks[i].onclick = function() {
        popUp(this.getAttribute("href"));
        return false;
      }
    }
  }
}

function popUp(winURL) {
  window.open(winURL,"popup","width=618,height=618");
}

</script>
</head>
<body>
<a href="page.html" class="popup"></a>
</body>
</html>

You could easily adapt the above by having several classes of popup - popupM, popupW, popupL, repeating the popup function given above in your js file and just adding that extra letter at the appropriate point for each extra one. Then you set a different size for popup (your normal size), popupM (medium sized) popupW (wide) popupL (large) and finally use the classes as required in your code.

and adding extra if{ . . . . } to choose which popupX to run

That way you can have several different sizes of popup window, each about right rather than an exact fit.

Thanks for the clarification, the code, and the ideas. Having several classes is a good idea but won’t work in my case. Client wants pop-ups to have standard margin around image and verbiage and there will be 100s before the site is done.
** Is there no way to use the above script but somehow pass W and H variables to it that are specified in the anchor?
** I found this code and it works and validates strict. Is there a downside to it? With JS turned off, the pop-up opens and user needs to hit back button to return to webpage … i could put <noscript> instructions in for them re this.

<a href=“product1.html”
onclick=“window.open(‘product1.html’,‘popup’,‘width=300,height=600,scrollbars=no,
resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no’); return false”><img src=“img/prod1.gif” alt=“Image of Product #1” class=“prod1” /></a>

THANKS ALL!!

You can always try using php to resize every image so you only need one size of popup.

Or, put a div around the image and give the image some padding or margin.

Or use a lightbox - here’s a couple to choose from - http://planetozh.com/projects/lightbox-clones/

Or tell the client his idea will cost a lot to implement if the images are all a different size.

EDIT
OR
Use php to retrieve the image sizes, feed that info into a pair of variables, and use php to write the popup link, with the variables as the width and height, etc, with whatever extras you need to get your standard margin and it will work.

Well, the client doesn’t want the images resized and I’m not going to tell him it’ll cost too much because I can do it with target= and forgo Strict. And most the LBoxes and Popboxes I’ve used don’t validate Strict either. Remember - I’m not just popping up the large image, but a small HTML file. I don’t see why this should be at all complicated. Regarding my two questions above:

  1. isn’t there a quick and dirty way to pass a W and H to the JS above script?
  2. i just tested the onclick="window.open … on several versions of FF and IE and it worked great. Anybody see the problem is using this if I can’t get an answer to passing the W and H to the Script? (I know I’ve seen it done, but JS is not my expertise).
    Thanks again. Please?

I would go with the server-side script writing the values to the javascript myself. But you can pass the values as GET variables. eg.
…/whatever.html?h=350&w=200

Then use javascript to parse the variables and values out of the location property to use in the javascript code.

Doesn’t make for pretty URLs but it would work.

Can someone show me how I would modify the JS code above to receive a width and height? And how I would specify the width and height in the anchor? I’ve spent many hours to no avail.
– ALSO –
I’ve learned that my above example, which I repeat below in simplified form, is a JS event handler. It successfully opens a new window. Will this not suffice? I really need to know. Thanks.

<a href="product1.html" onclick="window.open('product1.html','popup','width=300,height=600'); return false"><img src="img/prod1.gif" alt="" /></a>

Using inline javascript will work. But as you can imagine this could be a maintenance nightmare and a lot more work. AFAIK the only way to pass values is to separate the javascript window.open() from the link. Ideally most of it should be done server-side so you won’t need to worry about determining and ensuring you use the correct values. Especially if there’s going to be “100’s before the site is done”.

Why not create a “open a new window” function? eg.
function openWindow(url, width, height){

Even if you still want to use inline javascript, you could then call that function instead of the window.open() and pass the arguments to it. eg.
onclick=“openWindow(‘product1.html’, 300, 600)”

ALSO, I just read a tutorial that said I could remove the target=“windowName” in the very first anchor code I started this question with. It said you could remove it if you didn’t need to reference it in other JS code, which I don’t. I removed it and it works fine (in multiple browsers.) I am not a JS coder, but I need to decide the sanest way to implement the pop-up window issue … hopefully with Strict. I hope someone can find the time to address the specific questions in this, and my last, post. Thanks again.

Mittineague, our posts crossed. I would be ecstatic if someone would say “go ahead and use the inline JavaScript … it’s OK!” I’ll just Copy and Paste the code, make a few changes, and calculate the W and H. That won’t take long. (Haven’t learnt PSP yet).
(I cannot successfully create the more involved JavaScript and pass variables as stated above. I tried the onclick=“openWindow…” code and the page didn’t size or open in a separate page).