I have this piece of html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Minimal XHTML 1.1 Document</title>
<style type="text/css">
p.test {
border: 1px solid #000000;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p class="test">This is a minimal XHTML 1.1 document.</p>
</body>
</html>
But if I try to validate it here:
http://jigsaw.w3.org/css-validator/#validate_by_input+with_options
I get the following error:
p.test Parse Error [empty string]
Validation has nothing to do with whether any particular property works in any browser. It only indicates whether the syntax and content follows the standard. As this error states, it does not exist in CSS 2.1 but it does exist in CSS3. You can select CSS3 from the "More Options" drop down box
It seems that the current version of the spec does NOT contain text-overflow.
http://www.w3.org/TR/css3-text/
Related
I know it's been asked and I've compared my code to what others have posted but I haven't had any luck fixing it!
My assignment requires that I use XHTML and external style CSS.The HTML works but the CSS is not being applied to the webpage. I've tried changing the DocType. Both documents are in the same folder.
This is what I have...
HTML (index.html)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Homepage</title>
<link rel="stylesheet"
type="text/css"
href="style.css" />
</head>
<!-- etc... -->
CSS (style.css)
body {
background-color: #EEE;
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
#container {
background-color: #FFFFFF;
width: 800px;
margin-left: auto;
margin-right: auto;
}
/* etc... */
I finally decided to retype the whole head and it solved the problem. So I'm assuming the problem was invisible characters in the the link tag. This must have happened when I switched from textEdit to Sublime. Thanks for trying to help.
This part <?xml version="1.0" encoding="UTF-8"?> is making your file an xml file. Just erase that.
This link is pointing to a style.css in the same folder that your html is
<link rel="stylesheet" type="text/css" href="style.css" />
You will need to make sure that your file is there.
Your link must have media declared. Like this specification
Well...as pointed by the guy in the comments, sorry guy, i'm new at this. You could try some standard headers http://www.w3.org/QA/2002/04/valid-dtd-list.html
Can it be done - crossbrowser (IE9, Mozilla, Chrome, Opera) ?
In this snippet .box border is affected by zoom property. Can this be avoided ?
<!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></title>
<style type="text/css">
.box {
zoom: 3;
-moz-transform: scale(3); /* FF fix */
border: 1px dotted black;
padding:10px;
}
</style>
</head>
<body>
<div class="box">content</div>
</body>
</html>
I'm not really sure what you expect here. If you apply the zoom property to any element, then all of it's measurements will be transformed by 1/x. Away your example, the best way to do this would be to divide the intended measurements by the value of your zoom. In your example, if you wanted to keep padding at 10px (or thereabouts), you'd use padding:3px instead.
However, because your issue is with the border property and specifically, having set 1px as the value, you can't divide this by your zoom value. Instead, you're going to have to wrap HTML around it:
<div class="border">
<div class="box"></div>
</div>
And move your border styling from .box to .border
Working Fiddle
I have a form in IE where it starts a new line after /form. Is there any fix to this?
I found if I used style="display: inline;", the line disappeared. Thank you!
Try a CSS reset file
http://meyerweb.com/eric/tools/css/reset/
Or try to add this to the page
form {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
Edit
I noticed the newline disappeared when adding a doctype 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">
</html>
this is my css. It is working fine in firefox but not working in IE.
#Createinner {
position: fixed;
width: 400px;
height: 280px;
margin-left: -200px;
margin-top: -140px;
top: 50%;
left: 50%;
background-color: #ccc;
}
How to solve this.
Thanks in advance
Simply add DocType Tag on top of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
What sorted my problem with IE was the code in:
http://annevankesteren.nl/test/examples/ie/position-fixed.html
basically added:
h1{
position:fixed;
_position:absolute;
top:0;
_top:expression(eval(document.body.scrollTop));
}
for fixed position in IE 8
DOCTYPE is very very important.
one of:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
or
<!DOCTYPE HTML>
And its very very important that
those be in first line.
css:
#footer
{position: fixed; right: 0px; bottom: 0px; }
html:
<div id="footer" >
Fixed Div
</div>
IE6 doesn't support position fixed.
If you really need this to work in IE6, use conditional comments to serve an IE only CSS file and fake position:fixed with CSS expressions.
(edited to correct IE version info.)
I recently wrote a jQuery plugin to get position:fixed working in IE 6+. It doesn't jitter on scroll, it looks at capability (not user-agent), works in Internet Explorer 6, 7, 8.
If you use strict mode in IE7+ position:fixed will be honoured, but by default IE7+ operates in Quirks Mode. This plugin checks for browser capability, and if it doesn't honour position:fixed, then it implements the jQuery fix.
http://code.google.com/p/fixedposition/
Something like this may work for you:
$(document).ready(function(){
$("#Createinner").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
You may need to make some minor CSS adjustments to get it working for your code. I'm working on "offset" values as options as we speak.
Versions of IE pre 8 do not support position fixed properly.
What is the problem with the CSS e.g. why is it not working, what do you see on the screen?
http://ieproblems.blogspot.com/ use this one it will solve your problem
#mainDiv{
overflow:auto;
}
#subDiv{
position:relative;
top:expression(this.offsetParent.scrollTop+'px');
left:expression(this.offsetParent.scrollTop+'px');
}
<html>
<head>
</head>
<body>
<div id="mainDiv">
<div id="subDiv">
This Text is Fixed
</div>
</div>
</body>
</html>
You have tagged this as HTML but `` is not an HTML element. Internet Explorer will not let you style elements that it does not recognise.
- Use only [HTML elements][1] in HTML documents
You have updated your question so that it appears you are using an id selector not a type selector. This renders my original comment irrelevant.
IE 6 does not support position: fixed
Use workarounds if you need to support IE6
Other versions of IE don't support position: fixed in quirks mode
Use a standards mode triggering Doctype (generally HTML 4.01 Strict is the right choice)
how can I (cross-browser compatible) maximize an iFrame so that it appears to be the page in the URL bar even though it is served from a different server?
I guess this ought to work:
<!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>
<title>Test page!</title>
<style type="text/css">
html, body {
overflow: hidden;
margin: auto;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<iframe src="page.htm" width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>
Edit 1: You could just hide the scrollbars of the page, with the HTML and scroll=no directive
(that solution should be multi-browser)
Edit 2: Now even XHTML proof ;)
Edit 3: And finally w3 validator ok
(be sure to add scroll=no in the BODY if you run in Internet Explorer compatibility problems)
Use javascript with the event body load to set iframe height & width to window height & width.
For example in jquery :
$(document).ready(function () {
initIframe();
});
function initIframe() {
$("iframe").height($(window).height());
$("iframe").width($(window).width());
}
Tested on FF, IE and GC
You could set the width and height of the parent page's html and body tags to 100%, as well as the iframe tag that contains the page you want to load.