When text inside of an tag is rendered with a preceding number, the number is sent to the back of the string, and its punctuation is rendered backwards.
HTML:
1. Step One
Renders as:
Step One .1
This might be weird to try and imagine, so I have included a link to the screenshot:
HTML, CSS, & Rendered result:
http://imgur.com/OOFd2tj
I'm at a bit of a loss for what could possibly cause this. My theory is that there is some CSS property being inherited from elsewhere. I have been slowly removing chunks of CSS in an effort to find the guilty party, but so far no luck. This renders 100% properly on other sections of the website that use different style sheets. I was not the original author of the style sheets, so it has been difficult to pin-point the possible source.
I would greatly appreciate if anyone has seen anything similar and might be able to point me in the direction of CSS properties that could possibly cause this, or if it's something else entirely.
Thank you #Tomalak, #briansol and #the_lotus for helping me track this one down.
There was a CSS property being inherited that was causing the text to render this way. Upon viewing inherited computed styles, I saw:
direction: rtl;
The correct property setting would be:
direction: ltr;
Thanks again for your help!
Related
I am working on a Wordpress website in which I need to use the musical "flat" symbol. To figure out what might be a good way to handle this, I checked out what is used on Wikipedia, in the corresponding article (https://en.wikipedia.org/wiki/Flat_(music)).
I know how to find the HTML entity code and use that, and I know I can just copy the symbol from somewhere else and just paste it directly into my post. But when doing that, there is extra padding around the symbol, so it displays incorrectly, like this: D ♭ . (It's actually not doing it here on SO, so I had to add spaces on each side to simulate it.) It looks like the problem is handled on Wikipedia by the following code, which appears everywhere the flat symbol is used:
<span class="music-symbol" style="font-family: Arial Unicode MS, Lucida Sans Unicode;">♭</span>
So I used the same code and I created a "music-symbol" class in the CSS file, in which I set padding to 0. I couldn't find the corresponding class on Wikipedia, but I guessed that that's what it contained. I honestly don't know why this works (I'm a noob) but it does seem to work, assuming I specify the font using the style tag as shown. When I say "it works", I mean that it makes the flat symbol appear right next to the note name, as it should, without extra space, like this: D♭.
However, when I view the same site on my Android, the spacing is still there. Can anyone explain why, and how I should address this?
Also, is there a better or more straightforward way of handling special symbols like the flat? I don't get why I was able to paste it in directly here on SO and have the spacing be correct without having to use the extra class reference and style tag.
As far as I can see within the styles on that particular site there is no additional styling for the music-symbol class. From what I can tell the additional white space is inherit to the element and font(s) being used. Padding will not be what you are looking to alter, you would be wanting to adjust the margin of the span element where the symbol is placed.
See class definition below for styling a span with the music-symbol class
span.music-symbol {
margin-left: -2px;
}
So while browsing some blogs and forums I came across this line of code.
body{
direction: rtl;
}
and
body{
direction: ltr;
}
I ended up trying it in inspect element and I see that it swaps the side the text is aligned, but some things like "!" in my titles were placed before. Is there and actual use case for this element, or was there and it's now depreciated?
Here is an example of it in use. I originally thought it was maybe for accessibility but it seems to butcher a lot of the text, has anyone used this or is it a dead style?
As mentioned in the comments, the direction style is primarily used in web-development where the end-user's language is written/read from a different direction. It is especially useful for websites that have multi-lingual options as it can fix the placement of your punctuation etc.
There is a lovely explanation on css-tricks that goes in to more detail:
https://css-tricks.com/almanac/properties/d/direction/
Hope this helps!
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
We wanted some numbered lists and found this cool counter thing you can use in you css to have the browser calculate numbers for you:
ol.instructions {counter-reset:instructions-section;}
ol.instructions > li:before {
content:counter(instructions-section);
counter-increment:instructions-section;
}
The html we're making contains pages of instruction sets, each set numbered from 1,2,3 and so on. Only one set is visible at a time, when you click a header you show that set and hide the others.
It worked like a treat and we were sitting there with smiling faces until someone thought of testing it in Internet Explorer 8, where we ran into some epic Microsoft-style weirdness. When a set was brought up by clicking, all the numbers were zero (0).
I googled around and found this page - it describes the problem fairly well (it's a combination of using :hover and css counter logic used in hidden content), but gives a solution that is less than satisfactory - I would love to be able to keep using the css counters and just implement some ie8-specific hack that somehow makes the page update the numbers. I'm having a hard time finding other stuff on the internet about this problem.
My particular page will describe zeroes until I move the mouse pointer into the div that contains the numbered list, at which point the numbers will magically fix themselves. Is there something I could to "nudge" the page into believing that a mouse is hovering over the element? Or is there a more proper solution?
Ive had the same issue. I was able to fix it by using JavaScript to apply inline CSS of padding-left 0 (there was already no left padding) once the element was visible. This seems to make IE 'redraw' the element.
If, as is suggested, the "hidden" is causing a problem then you could try "hiding" the content by instead moving it off screen with this piece of CSS:
.hide {
position:absolute;
left: -1000px;
}
I've used the code example from the linked to document to show a possible solution here: http://codepen.io/akademy/pen/LDhGl
I wrote up a post in WordPress that included some code samples. I used the "preformatted" style for the code sample, which gives a nice monospace font and doesn't screw up multiple spaces, and everything looks great...
...except that it's tiny! The text of the code samples comes out at something ridiculously small, like 8 pt or something. The HTML isn't much help; it's only producing this text by wrapping it in a <pre> tag. So I figure the bad size setting has to be coming from my style sheet.
I don't know a thing about CSS, though, and trying to look through the style sheet isn't very helpful. Does anyone know how I can find what's causing the <pre> tag to generate tiny text and tweak it to make the text size larger?
There could be several different stylesheets in your Wordpress installation and you have to read them all, in order to find out what's causing the problem. You should search for a definition of "pre", but, given you don't know much about CSS, you may have to do several tests to find out which one you should alter.
I believe an easier way is to install a plugin for code snippets, such as this.
You should be able to add a style like so:
pre {
font-size: 12pt;
}
CSS allows you to apply styling to block-level items as well as classes and ID's.
In your CSS, put the following:
pre { font-size: 16px; }
Search for "pre" in the CSS files, there's probably a font-size value defined. You can change this to a larger value to increase the size. Here's an example styling pre tags.