CSS writing mode doesn't work for some characters, in particular for symbol '№'. Here example
<html>
<head></head>
<body>
<p style="writing-mode: vertical-lr;">
Номер № 2
</p>
<body>
</html>
http://cssdeck.com/labs/3pc5ihz5
All symbols are rotated and only this symbol not changed. What am I doing wrong?
Replace Номер № 2 with Номер N° 2
This is a known bug with some symbols
№ is not the only symbol, which won't change, there are more.
Some symbols are just not supported.
Related
In trying to learn MathML, I found that the mfenced element used in this tutorial has been deprecated, so that Firefox no longer supports it. This example in the official MathML documentation simply uses <mo>(</mo> and <mo>)</mo>, respectively, to surround fractions in parentheses. When I tried this, I found that the parentheses had normal height and did not stretch to the height of the fraction. Yet the example code had no special attribute to control the parenthesis height, suggesting that it should have adjusted automatically (as it would in LaTeX). What is missing? Below is my code.
<html>
<head>
<title>MathML in HTML5</title>
</head>
<body>
<p>
<math>
<mo>(</mo>
<mfrac linethickness="0">
<mrow><mn>5</mn></mrow>
<mrow><mn>2</mn></mrow>
</mfrac>
<mo>)</mo>
<mo>=</mo><mn>10</mn>
</math>
</p>
</body>
</html>
you also need mrow to surround the mo stuff:
replace <mfenced> with <mrow><mo>(</mo>
replace </mfenced> with <mo>)</mo></mrow>
I have a very simple webpage.
<html>
<head>
<title/>
</head>
<body>
<h1>hello</h1>
</body>
</html>
breaks my webpage ,both in Chrome and Firefox
the issue is with self-closing Title tag ,removing TITLE tag or adding a title fix the issue
<title>Test Page</title>
Whats the issues with self-closing TITLE tags , couldn't find any reference to say its invalid
If you have a void element:
<img />
<br />
Then they have no content, because there's nowhere to put it. Images can be thought of as an empty <div> with a background image.
Compared to these elements:
<h1>Hello</h1>
<section>World</section>
Which actually contain stuff (in this case, text).
The reason that the <title/> breaks your page is because you need a title in a webpage - if you don't have one, it'll just display the URL of the page, for example:
google.com/index.html
You need to have a valid title, and <title> is not a void element. This is why it breaks. To see this, go to a HTML validation website (e.g. https://validator.w3.org) and see what it tells you.
In short - <title> is not a void element - it requires an opening and closing tag.
EDIT: Research showed me this website, which says:
Self-closing: No
So in short they're not self-closing elements. You can find a list of self-closing elements here.
This question may sound a bit weird/novice/stupid. Please bear with me.
The below code is a small portion of a webpage I have created using CSS,
HTML and coldfusion.
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
</CFIF>
-----------------------------------------------------------------
<link rel="stylesheet" href="styles/style.css?1322665623">
</head>
---------------------------PART 2------------------------------------
<body id="wp-home">
<div id="wrapper">
<div class="header left">
<h1>Name Of Client</h1>
<div class="tagline">
<span class="left blair">home</span>
<span class="headerline"></span>
<span class="right blair">antiques</span>
</div>
</div>
--------------------------------------------------------------------
As you see, I have included a css file, style.css which contains all the style classes required to display PART 2 correctly.
Problem is, whenever part 1 is active ( is true), the same
css is applied to elements in file SHOW.CFM also. This totally messes up the page's original display.
For the time being I have placed a tag below the link to stop page from processing and the css file being loaded.
I have checked show.css multiple times and can confirm that no class from styles.css is used in it.
Hence, my question is if I can stop the styles from style.css to be applied on elements loaded from SHOW.CFM
Pardon me if the question is insanely stupid ;)
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. There is also a polyfill JavaScript.
Therefore, you'll have to adapt your markup and styles so that it only matches part2, and not part1. In a pinch, you can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
By the way, part1 should probably be a child of <body> instead of <head>.
Use the pseudo-class :not():
.myStyle:not(.classWhereYouDontWantToApplyTheStyle) {
...
}
What about using if else instead of just if to determine which css file you should include? In other words, include styles.css only when part 2 displays. That way, you avoid inheritance and scoping issues altogether.
This is one of those things that you read once, say "aha!" and then forget. Exactly my case.
Why is the line-break tag in xhtml preferentially written with a space <br /> and not in the also ok format <br/> ? I remember the reason was interesting, and as you can imagine it's not easy to find with google.
For sure it's not an issue of xml well-formedness. From W3C
[44] EmptyElemTag ::= '<' Name (S Attribute)* S? '/>'
Empty-element tags may be used for any element which has no content, whether
or not it is declared using the keyword EMPTY. For interoperability, the
empty-element tag should be used, and should only be used, for elements which
are declared EMPTY.
Examples of empty elements:
<IMG align="left" src="http://www.w3.org/Icons/WWW/w3c_home" />
<br></br>
<br/>
So the space at the end is optional.
w3c specifies this as the grammar:
EmptyElemTag ::= '<' Name (S Attribute)* S? '/>'
That means open bracket, a name, a number of (space and attribute) tokens, an optional space, a slash, and an end tag. According to this, both are correct.
If I recall correctly it's simply because some older browsers had problems with a self-closing tag without a space before the slash. I doubt it's an issue nowadays, but a lot of developers (myself included) got into the habit of including the space.
Edit: Ah, here we are:
http://www.w3.org/TR/xhtml1/#guidelines
Include a space before the trailing / and > of empty elements, e.g. <br />, <hr /> and <img src="karen.jpg" alt="Karen" />. Also, use the minimized tag syntax for empty elements, e.g. <br />, as the alternative syntax <br></br> allowed by XML gives uncertain results in many existing user agents.
Some older browsers didn't parse the element correctly without the space, so most web developers use <br />. I don't remember which browsers offhand, but I believe they're just about extinct.
EDIT: The browser was Netscape 4.
There is no right way in XHTML. They are formally identical in XML. Whitespace is not significant in that location.
For XHTML: both of them. For HTML4 and earlier: neither.
<br /> is valid (old) HTML, while <br/> is not. If you are serving your XHTML as XML, it doesn't matter. If you are serving it as text/html, then it needs to be valid HTML in addition to being valid XHTML. (Why serve XHTML as HTML? Because IE doesn't understand XHTML as XML, and because no major browser will start rendering XHTML mid-way through downloading the text, but they will do that to HTML. My blog appears to load slowly not because the site is slow, but because the browser won't start rendering the page until everything has been fetched. I hate browsers.)
A little background to add to Matt Hamilton's answer.
A least one problem browser was Netscape 4. A quick check shows that in that browser, <br/> (i.e. no space) doesn't cause a line break. In fact, it doesn't appear to do anything. <br /> (i.e. with space) does perform a line break.
When creating polyglot documents that can behave as XHTML or HTML (Note: "behave as" - not "valid") it's necessary to use either <br /> or <br></br>. However, when parsed as HTML, </br> is treated as if it was <br>, so <br></br> produces two line breaks.
Both <br/> and <br /> are correct. The reason that <br /> came about in the first place was to support older browsers that didn't understand the new <br/> syntax. It's really kind of a hack where the / is interpreted as an attribute with no value and ignored.
Both are correct, and both will be accepted by web browsers. You may as well save yourself the extra character, and use <br/>
Both are correct. But I would use <br /> just to keep my code consistent... because I would never write
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
instead of
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
just to save a byte... and the second version is imho better readable. But that's just a matter of taste. Do it as you like, but do it consistent :-)
Either will work just fine. Assuming you are asking for evangelical reasons, I prefer <br/>
Both are correct.
<br>. You aren't using XML anyway.
In IE6 the paragraph following the empty paragraph is displayed with the background color of the empty paragraph, which I'm guessing is wrong! It works correctly in Firefox, but I haven't checked IE7.
Is there a CSS solution to this problem, or do I have to remove the empty element?
(I would rather not have to remove empty elements, as that involves writing code to check whether every element is empty before outputting it)
The behaviour is unchanged using either strict or transitional doctypes (added this comment in response to answers)
Interestingly the effect does not occur with text color, only background color.
<html>
<head>
</head>
<body>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'>Red content</p>
<p>Unstyled background working because previous red element is not empty</p>
<p style='background-color:green'>Green content</p>
<p style='background-color:red'></p>
<p>Unstyled background broken because previous red element is empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'>Red content</p>
<p>Unstyled text color working because previous red element is not empty</p>
<p style='color:green'>Green content</p>
<p style='color:red'></p>
<p>Unstyled text color working even though previous red element is empty</p>
</body>
</html>
An empty paragraph is meaningless - which means you're probably writing the wrong HTML.
Also, your example doesn't have a DOCTYPE - a valid DOCTYPE is essential for getting browsers to correctly interpret your code, without one you'll be stuck in quirks mode.
But anyway, the simplest workaround for this bug is simply set a background for your current unstyled element.
I just tested that in IE7 and can confirm that it happens there too.
It looks like the unstyled paragraph does not actually have a red background, it's just that IE7 is drawing the red box for the empty paragraph and then drawing the following paragraph over the top.
You can see this for yourself by trying this code:
<p style='background-color:green'>Green content</p>
<p style='background-color:red; margin-left:50px'></p>
<p>Unstyled background broken because previous red element is empty</p>
You should see that the red paragraph is 50px in from the left.
Why it's doing this is anyone's guess. Adding some code to check if the paragraph is going to be empty isn't too hard, plus it removes useless markup from your output and avoids this problem altogether. Give that a go?
Try putting a non-breaking space in your empty paragraphs...
<p style='color:red'>& nbsp;</p>
Except no space after the ampersand...
Add a doctype to the top of your HTML file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
That will force IE6 to switch form quirks to standards mode. This brings a lot of tother advantages, like a correct box model, so you should be doing it anyway.
One strange workaround I found was to add position:relative to the potentially empty paragraphs like this:
<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>