I have this HTML page
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>foo</TITLE>
<style type="text/css">
pre:empty {
display: none;
}
</style>
</HEAD>
<BODY>
<PRE>
some text here in the pre
element
</PRE>
</BODY>
</HTML>
and I wonder why the browser (safari 5.1) does not display anything. I assumed that the pre:empty applies only to empty elements. I'd like to hide <pre></pre> tags but none of the pre tags with contents in them.
Just out of interest, try putting it in a style sheet rather that in <style />. The reason for this is:
"In Safari versions up to and including 2, when it appears in an internal style sheet (using tags), this selector will always match. If this selector is used within an external style sheet, it works as designed."
... From (http://reference.sitepoint.com/css/pseudoclass-empty)
Now i know you said you're running 5.1, but its worth a try right?
Related
So I've got down my basic html framework down and some basic CSS to make it look centered and adjust the background color, but I've tried a couple different adjustments and none seem to work properly when linking my CSS.
I've attempted to adjust the path to my CSS, tried to change the encoding between utf-8 and a few other random Windows 'save as' ones, and tried adjusting spacing:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html>
<body>
<link rel=stylesheet type=text/css href=/Computer/C:/Users/JohnDoe/Downloads/Test.css>
</body>
</html>
And in the .css file:
body {
text-align: center;
background: powderblue;
}
Whenever I run my program it just comes out looking like a normal black and white page that is off centered.
So it would probably be good to read up on building a website. But in the meantime, here are some things you need to fix:
link elements go in the <head>
link href should be an absolute server link (starting with https://...) or a relative path
quote attribute values
remove stray css at the end of the doc and put in css file
Relative path means it's the path relative to the file being served (for example, "index.html"). So if your index.html file is in /Computer/C:/Users/JohnDoe and your css file is in /Computer/C:/Users/JohnDoe/css/ then the relative file path is css/Test.css
Example
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Test.css">
</head>
<body>
<p>This text appears in the browser</p>
</body>
</html>
You got a few things going on here:
First, for externally linked style sheets, the link goes in the <head>...</head> tags, rather than the <body> tags.
Here's a quick reference:
https://www.dummies.com/web-design-development/html5-and-css3/how-to-use-an-external-style-sheet-for-html5-and-css3-programming/
Note the quote:
The <link> tag only occurs in the header. Unlike the <a> tag, the <link> tag can occur only in the header.
you're asking to link to an external style sheet, but also including some inline CSS (the body stuff you have a t the bottom. Also note that when including inline CSS you need to wrap it in <style> tags.
Lastly, that href path looks odd to me ...
Why <\style> in comments is breaking embedded styles?
I thought I could write there whatever I want!
<!doctype html>
<meta charset="utf-8">
<title>test</title>
<style>
/*
</style>
<h1>HTML!</h1>
<style>
*/
</style>
You can see it in action here.
HTML is parsed first. This is why you might see <\/b> in JavaScript that works with HTML: older browsers used </ as the "end of script block" marker (newer ones specifically look for </script>).
So the HTML is parsed, and the result is two <style> elements, one with a starting comment and the other with an ending comment.
If you need comments like that, consider using HTML comments:
<style><!--
/* Whatever you want here! */
--></style>
All being well, this should allow the stylesheet to be parsed correctly.
Here are two html snippets:
<html>
<head>
<title>foo</title>
<style type="text/css"></style>
</head>
<body>
bar
</body>
</html>
<html>
<head>
<title>foo</title>
<style type="text/css"/>
</head>
<body>
bar
</body>
</html>
Try rendering in Firefox, Chrome or IE - the two snippets render differently! But I thought both versions of an empty element are the same? (The style element)
According to HTML Specification end tag is required for STYLE element.
14.2.3 Header style information: the STYLE element
Start tag: required, End tag: required
So self-closed version of style is not correct HTML document part.
In XML it would be valid, but you call your snippets HTML, where it is not. – In HTML5 for example (serialized as HTML, not as XML), you didn’t close the style element yet (slash is ignored).
When served as text/html, they are parsed with an HTML parser, which treats <style type="text/css"/> just as a typo for <style type="text/css"> (i.e., ignores the slash before the tag close). This makes the rest of the document part of the style element and thus ignored. – This is the reason why XHTML 1.0, appendix C, recommends that the “self-closing” syntax (aka. “minimized syntax”) be used only for elements with EMPTY declared content.
When served as genuine XHTML, with an XML content type, they are processed identically, by XML rules. However, in the absence of an xmlns attribute, they are treated just as generic XML without a style, so in practice the browsers just display the XML code as-is.
I have an HTML document with 10 tables, and I want each one to appear on a separate page when printed.
I'm not using a CSS file, so need to include the command in the actual HTML of the document.
I've added this at the top of the document:
<head>
<style>
#media print
{
table {page-break-after:always}
}
</style>
</head>
Which seems to work fine in Firefox, but in Chrome the whole <style> tag is ignored from the <head>.
If there's any better way to do it so that it works in Chrome as well, I'd really appreciate your advice.
Thanks guys.
Have you tried setting the <style> for print media?
<style type="text/css" media="print">
...
</style>
This doesn't work in IE6 or 7:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Title</title>
<style type="text/css">
N {display: block}
</style>
</head>
<body>
<div>
<N>element1</N>
<N>element2</N>
<N>element3</N>
<N>element4</N>
</div>
</body>
</html>
however, it does if I replace the N tags with A tags.
Does IE have a problem with styling non-HTML tags? Or is it something else?
Does IE have a problem with styling
non-HTML tags?
Yes. It won't.
You could hack it using:
<script type="text/javascript">
document.createElement('n');
</script>
… but that won't work if JS is not available and the document is still invalid.
If no element exists that describes the semantics you want, then use the one that matches most closely (or div/span if nothing better exists) and add classes.
(Or switch to a custom XML language)