I want this table to disappear, but for some reason it won't. What is happening?
I am using IE8.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.test_table
{
display: none;
background: #fff000;
}
</style>
</head>
<body>
<table id="test_table">
<tr><td>test</td><td>teh4</td></tr>
<tr><td>te3st</td><td>t2eh4</td></tr>
<tr><td>tes4t</td><td>t2eh4</td></tr>
<tr><td>tes5t</td><td>t3eh4</td></tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.test_table
{
display: none;
background: #fff000;
}
</style>
</head>
<body>
<table class="test_table">
<tr><td>test</td><td>teh4</td></tr>
<tr><td>te3st</td><td>t2eh4</td></tr>
<tr><td>tes4t</td><td>t2eh4</td></tr>
<tr><td>tes5t</td><td>t3eh4</td></tr>
</table>
</body>
</html>
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
#test_table
{
display: none;
background: #fff000;
}
</style>
</head>
<body>
<table id="test_table">
<tr><td>test</td><td>teh4</td></tr>
<tr><td>te3st</td><td>t2eh4</td></tr>
<tr><td>tes4t</td><td>t2eh4</td></tr>
<tr><td>tes5t</td><td>t3eh4</td></tr>
</table>
</body>
</html>
either way will work.
You have given table the ID = test_table for ID use '#test_table' If you have given it a class then you will use '.test_table'
Your CSS selector is wrong. .test_table selects a table with class="test_table", but your own has an id instead of a class.
Fix it by either using class instead of id, or changing your selector to #test_table (# is the id selector).
test_table id defined as a class, bud in the table, it has no class, just id "test_table". This is cortect:
<table class="test_table">
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'm using the following code and the textarea appears, but I can't edit the text in the textarea or even get a blinking cursor to show in Firefox:
<iframe contentEditable='true'; src="you.php"></iframe>
"you.php" is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<textarea contentEditable='true';>the text.</textarea>
</body>
</html>
You don't need contentEditable to edit the contents of a textarea. Try this:
<iframe src="you.php"></iframe>
you.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<textarea>the text.</textarea>
</body>
</html>
The following HTML display fine.
<!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">
<head>
<title>Hello</title>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
However, there is a space of around 10 pixel between the left and top edges my div and the browser window.
Is there a way to get rid of it so that the div is "glued" to the browser window?
You could add CSS to the document....
<!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">
<head>
<title>Hello</title>
<style type="text/css">
body { margin:0; }
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
Or you could add the CSS as an inline style
<!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">
<head>
<title>Hello</title>
</head>
<body style="margin:0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
All browsers have a default margin around the top and left edge of the window. There's nothing wrong with your page. You merely need to tell the browser to remove the default margins.
To leave the padding and margins of other elements alone, just reset the body.
body { padding: 0; margin: 0; }
Use a CSS reset.
<style type="text/css">* { padding: 0; margin: 0; }</style>
Try adding style to the body tag, like this:
<!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">
<head>
<title>Hello</title>
</head>
<body style="margin: 0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
If you do any of the above codes, but you do not set your table properties to percent rather than pixels, you will probably still end up with a margin-type space around your page. Like as in the bottom scroll bar will still show.
<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td width="15%" align="left" valign="top" bgcolor="#B8B8B6">
</td>
<td width="85%" bgcolor="#FFFFFF" align="left" valign="top">
</td>
</table>
When I zoom in in IE7, the element with position relative gets overlapped..How can I fix this?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5</title>
<style type="text/css" media="all">
.wrapper{width:500px;height:1000px;border:1px red solid;}
.block1{border:1px red solid;width:100px ;height:100px;position:relative;}
.block2{border:1px red solid;width:100px ;height:100px;}
.block3{border:1px red solid;width:100px ;height:100px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="block1">A</div>
<div class="block2">B</div>
<div class="block3">C</div>
</div>
</body>
</html>
I tries adding zoom:1 to .block1 also but it didn't work
.block1 {
zoom: 1 ;
}
Try something like this, Hope this helps.
When I added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
line to the top of my html file, my css rules disappear in firefox. Also i can't see them with firebug.
Do you have any idea about this problem ?
Make sure that the files are sent by the server with the correct MIME type (text/css). Have a look in the error console ( IIRC the menu should be Tools / Error Console in the English version).
Usually, if the file ends with .css, this should happen automatically, however there are still badly configured servers around. If you are using a Apache web server, you may be able to correct this with a .htaccess file, otherwise you'll need to ask your support.
Details: https://developer.mozilla.org/en/incorrect_mime_type_for_css_files
You need to add attributes to your start-html tag to get it right. This is done since XHTML really is XML.
<!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" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
The code above suggest you to have the style.css file in the root-catalog of your website.
Please check it
http://www.w3schools.com/tags/tag_doctype.asp
i think you have more idea of doctype
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>