<html>
<head>
<style>
#content input[type=text]
{
color: green;
}
</style>
</head>
<body>
<div id="content">
<input type="text" value="Some Text" />
</div>
</body>
</html>
Here's how it renders in FireFox (font is green):
Here's how it renders in Internet Explorer 7 (font is not green):
Update: Adding the DTD solved the issue, however when the input is set to disabled="disabled", IE7 still won't show the specified color.
You'll need to add a strict doctype for IE7 to support attribute selectors with a value.
http://msdn.microsoft.com/nl-nl/library/aa770069
Use a doctype like this, which is about as loose as you can get without breaking this functionality:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Or rather use a more recent and more strict one, if you can.
You are running your site in Quirks mode. use the following doctype or similar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
try this for starters <style type="text/css">
Try using quotes:
input[type="text"]
Alternatively, use a class and apply that class to all of your text inputs.
Maybe not what you wanted, but at least it works ;)
<html>
<head>
<style type="text/css">
.green {
color: green;
}
</style>
</head>
<body>
<div id="content">
<input type="text" class="green" value="Some Text" />
</div>
</body>
</html>
Related
Consider the following html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Document</title>
<style type="text/css">
.csBCCE90CF {background-image:url(data:image/png;base64,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);background-repeat:no-repeat;}
</style>
</head>
<body leftMargin=10 topMargin=10 rightMargin=10 bottomMargin=10 style="background-color:#FFFFFF">
<div class="csBCCE90CF" style="width:193px;height:52px;">
</div>
</body>
</html>
Or JSFiddle: http://jsfiddle.net/hdPx3/
When I print this from web-browser (ie, firefox, chrome) the resulting page is empty.
That is because browsers don't print backgrounds by default.
I suggest using an image tag instead of the div, like this:
<img src="data:image/png;base64,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">
I am currently using this DOCTYPE: <!DOCTYPE HTML SYSTEM>
However, when I validate my web page, I am getting the following error:
document type does not allow element "STYLE" here, at <style
type="text/css">
Can you please advise me on the correct DOCTYPE that I should use?
Thanks
Hints :
Put your script and style tags, in your HEAD section
Put the rest in your BODY section
Remember to "close" all tags.
<html>
<head>
<!-- title,scripts & styles go here -->
</head>
<body>
<!-- the rest goes here -->
</body>
</html>
Your Code : (UPDATED : Passes validation)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>World Flag Registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="validate.js"></script>
<style type="text/css">
label{
display:inline-block;
width:200px;
margin-right:30px;
text-align:right;
}
input{
}
a, a:link, a:visited, a:active {
color: #000000;
}
fieldset{
border:none;
width:500px;
margin:0px auto;
}
</style>
</head>
<body>
<form onsubmit="return validate(this);" action="registrationSubmit.html">
<p align="center"><font face="Times New Roman" size="6">World Flag Registration</font></p>
<p align="center"><font face="Times New Roman">Home</font> | Register | Play</p>
<p align="center">Please register your school in order to play the Flag Quiz</p>
<fieldset>
<legend></legend>
<label>Classroom name:</label><input type="text" name="txtClassroomName" size="20">
<label>School name:</label><input type="text" name="txtSchoolName" size="20">
<label>School contact email address:</label><input type="text" name="txtSchoolEmail" size="20">
<label>School address:</label><input type="text" name="txtSchoolAddress" size="20">
<label>School telephone number:</label><input type="text" name="txtTelephoneNumber" size="20">
</fieldset>
<div style="text-align:center">
<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="middle">
</div>
</form>
</body>
</html>
Why don't you simply delete that SYSTEM :
<!DOCTYPE HTML>
or, perhaps :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
And try to see if it works...
It doesn't depend on what DOCTYPE declaration you have, or even if you have one or not.
Your <style> element is in the wrong place in your document. Move it up into the <head>.
To clarify, if the W3C validator says "document type", it simply means the kind of document, i.e. HTML. And that is not the same as "DOCTYPE declaration", the prolog you mentioned.
You have probably placed the style element inside the body element. Though it works OK there, it is not allowed by the formal rules. Move it into the head element.
If problems remain, please provide a link to the document as a whole. When the problem is that an element appears in a wrong context, like here, the context is all-important.
I want to make frozen layout in a website template, but I have problem in Internet Explorer.
I make like this
<div id="NewsBlock">
<div id="aboutUs">
<h1></h1>
<span class="OpenDayBanner"></span>
<p>You can replace the paragraph above with some text describing your FAQ system. Here's an example: If you have questions about our web site, our products or our services, there’s a good chance you’ll find the answer here</p>
</div>
</div>
For CSS I make like this
div#NewsBlock{
min-width: 1300px; //this work for Firefox and chrome
width:100%;
overflow: hidden;
height: 510px;
background-image:url(../images/aboutstartupbg.png);
background-repeat: repeat-x;
}
Using the min-width and percentage value for width make the layout frozen in Firefox and Chrome but it doesn't work in IE!! Any suggestions please
You have to define the min-width property of the <p> element.
Example:
p.myClass {
min-width: 420px;
}
The problem is solved by changing the dtd of the HTML to XHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ">
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Use a strict doctype, such as <!DOCTYPE HTML>, to make sure IE is rendeing correctly.
Also consider adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to the <head>.
I have a Razor layout MVC3 page as below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style "text/css">
</style>
</head>
After the word "style" and under the word text it is showing a syntax error that says: Element text is obsolete or nonstandard. Everything still works but I am just wondering why the error is showing. Not sure but I think it is coming from ReSharper. Prior to version 6 I don't recall seeing this message.
I think you missed the type.
<style type="text/css">
You missed the type.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
See http://www.w3.org/TR/html4/present/styles.html#h-14.2.2
When we set disabled attribute for is set as true, in Firefox the button still looks like it is enabled but in IE it is working fine. Is it a limitation with Firefox or JSF.
All JSF does is generating HTML/CSS/JS. Webbrowsers doesn't retrieve/understand JSF code at all. Style and look'n'feel is usually controlled using CSS. All you could do is to view the generated HTML/CSS/JS code for pointers related to the style of a disabled button. You could maybe create a plain vanilla HTML page to do some quick tests to exclude the one and other.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<input type="submit" disabled>
</body>
</html>
You can select a disabled submit button using the attribute selector [name=value] in CSS like so:
input[type=submit][disabled] {
background: pink;
}
Test it like follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>input[type=submit][disabled] { background: pink; }</style>
</head>
<body>
<input type="submit" disabled>
</body>
</html>
And apply the learnt things in JSF side.