Forum Moderators: not2easy
CSS:
input div {border:1px solid green;}<input name="name"><div>TEST</div></input><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">Can someone please tell me how this can be used? The validator complains that I didn't close the <input> tag, despite it being clearly closed with </input>. The DOM inspector in Firefox shows the <div> element as under a <fieldset> which is above the <input> element.
Do I need to change my XHTML declaration? Do I need to edit the DTD?
Update:
I have tried changing the declaration to:
<?xml version="1.0" encoding="UTF-8"?>
<!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">Update 2:
I edited the xhtml1-strict.dtd (locally copied) and changed
<!ELEMENT input EMPTY><!ELEMENT input %Inline>
<input />. So no, you can’t nest a <div> inside it. What are you trying to achieve? Maybe there’s a different way around this.
Ah, just seen your update 2. I’m afraid that browsers don’t actually read DTDs in the way you envisage.
[edited by: Robin_reala at 9:29 am (utc) on May 5, 2007]
What exactly are you aiming to do with the
divinput
<input name="something"><div>help tip</div></input>When used with CSS:
input div {display:none;}
input:focus div {display:block;}
I hoped that when changing focus to the input, the DIV would automatically display.
Is there any way to make the browser read the DTD or otherwise? Is there another way to achieve this?
<input/><div class="help">Help text</div>input + div { display: none; }
input:focus + div { display: block; }The '+' adjacent sibling selector selects elements that follow directly after another element.
[edited by: Robin_reala at 3:23 pm (utc) on May 5, 2007]
The '+' adjacent sibling selector
<edit>Not really going to work though as it's not supported in IE6 and unlike :focus I can't find any workaround or javascript hack to make it work...</edit>
