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>
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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">
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.
I'm trying to make an image go ALL the way right on a DIV but it's not happening:\
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>* { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:5px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;">#Testing<br />Logout</div>
<div style="clear:both;"></div></div>
</body>
</html>
Try that on say... http://htmledit.squarefree.com/ that and you'll see red is still visible on the right-hand side of the border when it should float all the way right.
<div style="float:right,margin-right:5px;">
margin-right:5px
Take off the margin-right:5px; on your inner DIV around the image.
<div style="float:right;">
Well the float has "margin-right:5px;" in its style attribute. That's causing a 5-pixel margin on the right... if you remove that, it will go all the way to the right.
You asked to make the image go all the way to the right on a div, but you didn't say which div. The img is already all the way to the right on its immediate parent, but that div is 5 pixels from the right of its parent ("login").
Setting the margin to 0 inside your image div gets the image all the way over.
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>body { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:0px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;">#Testing<br />Logout</div>
<div style="clear:both;"></div></div>
</body>
</html>
Do like that:
<div id="login"><div style="float:right;padding-left:10px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
I have seen a tutorial on youtube which centers a site by giving margin: 0px auto; and by saying the actual width of the site:
body
{
align:center;
margin: 0px auto;
width: 1000px;
}
But this does not work for ie8. IS this a good idea to use in order to align to center the layout?
It works in IE6 and newer providing the browser is in standards mode. Trigger it with a Doctype such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Since the alternative is quirks mode, and that creates many inconsistances with other browsers, standards mode is highly desirable.
So, yes that is a good method to centre things.
align:center;
That, on the other hand, is nonsense. There is no align property in CSS.
I have found the problem why this style and many other styles was not working for for ie8 (only for this browser). The problem is that I wrote
<html>
<head>
<title>About us</title>
<link href="css/about.css" rel="stylesheet" type="text/css" />
</head>
<body>
.......
Now I have changed it to:
<!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>About us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/about.css" rel="stylesheet" type="text/css" />
</head>
<body>
If I have the following HTML code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
</head>
<body>
<div style="page-break-after: always; float: left;">hello</div>
<div style="page-break-after: always; float: left;">there</div>
<div style="page-break-after: always; float: left;">bilbo</div>
<div style="page-break-after: always; float: left;">baggins</div>
</body>
</html>
I want one word to be printed on each page, with a page break after each one. (This is simplified code - in my actual web page, the floats are important.)
Firefox prints this fine, but both IE and Safari print them all on one page, ignoring the page breaks. Is this a bug in those browsers? Is there a better way to do this?
Thanks.
It is the floats that are messing it up for printing.
Do you need the floats there for printing? or are floats only needed for the web?
Why I am asking is you can have different CSS classes for different medias (print, screen)
http://www.w3.org/TR/CSS2/media.html
So your float can be on the screen media - which will show only for web. While you will want your page break only to show for print media.
Here is an example using the media: (note when referencing CSS you can choose media via an attribute )
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
<style>
#media print {
.myDiv { page-break-after: always; }
}
#media screen {
.myDiv {float:left;}
}
</style>
</head>
<body>
<div class="myDiv">hello</div>
<div class="myDiv">there</div>
<div class="myDiv">bilbo</div>
<div class="myDiv">baggins</div>
</body>
</html>
Update:
Will this work for what you need? GIves you a 3x3 on each page when printing out. But on the screen it's a 3x6. Quick sample.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Test</title>
<style>
.break
{
page-break-after: right;
width:700px;
clear:both;
}
.myDiv {
float:left;
width:200px;
height:100px;
background-color:blue;
margin:5px;
}
}
</style>
</head>
<body>
<div class="break">
<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>
<div class="myDiv">4</div>
<div class="myDiv">5</div>
<div class="myDiv">6</div>
<div class="myDiv">7</div>
<div class="myDiv">8</div>
<div class="myDiv">9</div>
</div>
<div class="break">
<div class="myDiv">11</div>
<div class="myDiv">22</div>
<div class="myDiv">33</div>
<div class="myDiv">44</div>
<div class="myDiv">55</div>
<div class="myDiv">66</div>
<div class="myDiv">77</div>
<div class="myDiv">88</div>
<div class="myDiv">99</div>
</div>
</body>
</html>