Imagine a fairly simple HTML document
<!DOCTYPE HTML >
<html>
<body>
<table> <tr> <td> This is a test </td> </tr> </table>
</body>
</html>
where we are applying this css
body {background-color: ffffff;
font-size:100px;
font-style: normal;
font-family: MankSans,Arial,Helvetica, sans-serif;
}
In every single modern browser out there the font properties will apply. in my WebView however, they wont.
Looking around I found out that the problem is that the WebView goes into quirksmode, where the td tag lacks inheritance so the body css doesnt apply.
Im aware that there are ways around this, like using a more explicit 4.01 doctype, or adding this to the css
table, thead, tbody, tr, td, th {
font-size: inherit;
font-family: inherit;
}
these however dont fix the root of the problem, which is that WebView decides against all logic to suddenly "missunderstand" the HTML5 doctype and switch to quirksmode, when all other WebKit-based browsers (Safari, Chrome, etc) behave correctly.
Is there any way to programmatically fix this?
Ok, my stupid mistake
it turns out that the doctype is getting screwed because before sending the HTML document to the webview im treating it, and adding an internal ID to all tags (this internal ID is required for features inside my app)
but in case someone screws up in the same way I did and wonder whats going on, I'll offer a lenghty explanation.
DOMDocumentType has several fields, among them you have name, publicId and systemId.
for example, consider the typical HTML 4.01 transitional doctype
it can be divided in
name = html
publicId = -//W3C//DTD XHTML 1.0 Transitional//EN
systemID = http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
and you can add a Custom ID to it as long as the format is preserved, like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" CustomID="1">
the problem with the HTML 5 DOCTYPE is that while it looks like a)
<!DOCTYPE html>
for the DOM, it actually is b)
<!DOCTYPE html PUBLIC "" "">
long story short, adding my CustomID="1" at the end of a) caused the DOM to not recognize it as a valid DOCTYPE, hence switching my WebView into quirksmode. If you want to have an HTML5 DOCTYPE and add a custom id to it you should do
<!DOCTYPE html PUBLIC "" "" CustomId="1">
w3schools.com tells us that the id attribute is not valid in: base, head, html, meta, , script, style, and title.
they should warn us that, poorly placed, it can also screw your DOCTYPE =)
Related
I've been making websites for a few years now, but only recently have I started using the html5 doctype and today I discovered the behaviour where a padding-bottom of 4px is added to images.
The padding disappears if you change the doctype to xhtml1.0
here is the simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technic-Al</title>
<style>
html, body {
margin:0;
padding:0;
}
#contain {
width: 900px;
background-color:#6C0;
}
</style>
</head>
<body>
<div id="contain">
<img src="images/head.gif" width="900" height="100" border="0" alt="head">
</div>
</body>
</html>
changeing the doctype to any of the others removes the bottom-padding (green from the background)
Quite a few people have come on here to suggest the fix
line-height=0
I believe there is another fix that works as well.
Or should I say "work-around"
but surely this is a bug with the html5 doctype?
who do we speak to about it?
who deals with a bug like this?
how do we get it fixed?
Does anybody here know how to get this fixed?
It's not a bug, it's what the CSS spec says should happen. It's not HTML5 specific, the HTML 4.01 strict and XHTML 1.0 strict doctypes will do the same thing.
It's not padding - it's the consequence of the computed height of the line box.
There's no hope of getting it changed, Too many web pages depend on the existing behaviour.
The appropriate authority for this is the W3C CSS working group.
I had an issue where page was showing padding in bottom of page
img { display:block ; }
writing above in css file solved my problem. Hope this help
Use the vertical-align property in your css :
img{
vertical-align:top;
}
I'm using :first-line { line-height:0px; } to hide the empty first line in a block statement
curiously if I define doctype in XHTML strict Firefox ignores this statement and prints the empty line (seeable through the border)
I validated my quellcode and used Firefox' webdeveloper to check, if there is anything wrong, but they told no error
the (stripped) example quellcode is:
<?xml version="1.0" ?>
<!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><title>T</title>
<style type="text/css"><!--
.v { white-space:pre; display:inline-block; border:1px solid black; }
.v:first-line { line-height:0px; }
--></style>
</head><body>
<p class="v">
Foo
Bar
</p>
</body></html>
Is there anything wrong with my code and other browsers (I've tested Opera,Gnome,Safari) just ignore the strict, or is Firefox buggy abiding strict?
I'm not sure if it's really a bug …
I guess the internals of the :first-line selector fail to recognize an empty line with just a newline character in it, but I'm not sure if this is wanted or not. There is nothing inside the W3C Recommendations to prove this behaviour as wrong or right:
CSS 2.1 Specifications:
5.12.1 The :first-line pseudo-element
The :first-line pseudo-element applies special styles to the contents
of the first formatted line of a paragraph.
--
16.6 White space: the 'white-space' property
'white-space'
...
pre This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.
If you're generating your HTML code dynamically just try to eliminate the empty line before outputting it. That's the only advice I can give at the moment.
Try using two colons instead of one. From Mozilla:
The :first-line CSS pseudo-element applies styles to the first line of
a element. However, the selector :first-line does not match any real
HTML element.
It says here that it is not within HTML4, though I don't really see where that's spelled out in the text.
From what I can tell, based on this, it is ok to do so in HTML5 but I'm not entirely sure (assuming style is an HTML element?)
I am using this to rotate out a stylesheet and want it to be as valid as possible according to HTML5 specs, so wondering if I should rewrite it with a data-* element.
+1 Interesting question!
Instead of using a style block, you should consider linking (link) to your stylesheets and then switch them out by referencing an id or a class.
That said, title is perfectly acceptable for a style tag in HTML5. You can use this as a hook for your stylesheet switching.
http://www.w3.org/TR/html5/semantics.html#the-style-element
Fyi... this validates
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style title="whatever"></style>
</head>
<body>
Test body
</body>
</html>
http://validator.w3.org/#validate_by_input+with_options
I've just put the following code into the W3C validator and it has no errors :)
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style id="test"></style>
</head>
<body>
Test body
</body>
</html>
I think the W3C Validator is a good resource for this type of thing, it is marked as experimental but that's because the standard is yet to be be finalised.
It is not valid in HTML4 (as per the spec) and data-* attributes are not either. That is, the document will not validate against the Doctype spec if you use these attributes.
Regardless of whether the document validates or not, browsers will ignore elements that they do not recognize.
Style tags are DOM elements like any other tag, so you can add any attributes you want.
I am using the W3C XHTML validator to check my sites and I am getting some errors on pages with FBML. Most of the cause of such errors is the "&" character. Since FBML values and attributes are generated on the fly, I have no way to encode the character properly before displaying it.
Question: Is there a way for me to tell Facebook Connect to render the mark up properly?
Thanks.
Try to put the facebook code in CDATA:
<script type="text/javascript">
/* <![CDATA[ */
document.write('<fb:login-button length="long" size="large" show-faces="true" perms="" onlogin="window.location=\'<?=current_url()?>\'"></fb:login-button>');
/* ]]> */
</script>
In short, not as far as I know. To make matters worse, the fb:* tags don't validate either, even if you make your html tag look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
If this is a huge issue for you, you might be able to get away with putting non-XHTML-compliant markup in its own HTML-4.01-strict iframe, to basically sweep the crap under the rug.
This might be helpful:
http://wiki.developers.facebook.com/index.php/Facebook_Platform_for_Mobile:_XHTML
Some german guy also worked on it:
http://translate.google.com/translate?js=y&prev=_t&hl=en&ie=UTF-8&layout=1&eotf=1&u=http%3A%2F%2Fwww.ka-mediendesign.de%2Fblog%2Ffbml-in-xhtml-neue-version%2F&sl=de&tl=en
This is how i am doing it. Wrap around all fbml tags inside and then use js to simply uncomment the fbml code using javascript. Heres an example:
Markup:
<P class="fbreplace" style="display: none;">
<!-- FBML
<fb:like layout="standard" show_faces="false" colorscheme="light"></ fb: like>
->
</ p>
JS (JQuery Required):
$(document).ready(function() {
$(".fbreplace").html.replace(/<!-- FBML /g, "");
$(".fbreplace").html.replace(/ -->/g, "");
$(".fbreplace").style.display = "block";
});
i have an jpg where the height is larger than a regular 8.5x11 piece of paper (the height is around 2000px)
here is the link
http://i39.tinypic.com/121d7ur.jpg
so obviously when you try to print this picture its going to print on more than 1 piece of paper ....however when i try to print the page (or even go to print preview)...it only shows half the image on the first page....but there is no second page?...there should be a second page to show the rest (or even a 3rd page)
if i use FF there is no problem...it prints on 3 pages....but with IE 7 i'm limited to just printing 1 piece of paper.
i have right right clicking on the image itself within IE7 and clicking "print this image" and still no luck.
anyone have a solution for 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" xml:lang="en" lang="en">
<head>
<title>Blank XHTML 1 Transitional Page</title>
<style>
#media print {
html { height: 100%; }
img { height: 100%; }
}
</style>
</head>
<body>
<img src="bigimage.jpg" />
</body>
</html>
EDIT: Sorry, didn't initially realize your image was too TALL rather than too WIDE. To reduce the image height whilst maintaining aspect ratio, use CSS to set both HTML and IMG to have a height of 100% - see modified example.
I know this probably isn't the answer you are really looking for, but if you are intending on the users printing the image, I would consider putting it into a PDF. That way it will always print the same, everytime for everyone.
Try wrapping the image in a div, in the div css apply the following:
image_wrapper {*height:1%; position:relative}
The star/* selector should limit to IE, this is a variant of the holly hack.