I'm currently having some trouble getting spans to work with this function I made in Javascript. It calls the OpenWeatherMap API and outputs current weather conditions, but adding CSS to the mix doesn't effect the spans I need it to, although doing the same sort of thing in a function to update the time does it perfectly well. EDIT: Should probably mention that the digitalFont in my CSS is a custom font, and works perfectly fine with my other CSS elements. JS: function getCurrentWeather() {     fetch('https://api.openweathermap.org/data/2.5/weather?q=Tokyo&amp;appid=')     .then(res =&gt; res.json())     .then(res =&gt; {          var icon = res.weather.map(d =&gt; {return d.icon});         var con = res.weather.map(d =&gt; {return d.main});         var tempC = Math.floor(res.main.temp - 273.15);         // var tempF = Math.floor((res.main.temp - 273.15) * 1.8 + 32);          var iconPNG = `../res/img/weather_icons/${icon}.png`                  document.getElementById('tempC').innerHTML = `${tempC}`;         // // document.getElementById('tempF').innerHTML = `${tempF}`;         document.getElementById('condition').innerHTML = `${con}`         document.getElementById('icon').innerHTML = `&lt;img src=&quot;${iconPNG}&quot;&gt;`      }); } getCurrentWeather(); setInterval(getCurrentWeather, 3600000) // Update every hour  HTML:     &lt;div class=&quot;weather&quot;&gt;         &lt;span id=&quot;tempC&quot;&gt;&lt;/span&gt;C         &lt;span id=&quot;condition&quot;&gt;&lt;/span&gt;         &lt;span id=&quot;icon&quot;&gt;&lt;/span&gt;     &lt;/div&gt;      &lt;script src=&quot;index.js&quot;&gt;&lt;/script&gt;  CSS: .tempC {     font-family: digitalFont;     font-size: 60px;     text-align: right; }
29285
What's the difference between &lt;div class=""&gt; and &lt;div id=""&gt; when it comes to CSS? Is it alright to use &lt;div id=""&gt;?  I see different developers doing this in both ways, and since I'm self taught, I've never really figured it out.
122982
I just found the pin option to drawing, and it looks useful in some of the things I want to draw. How do I format it though? I've tried pin=[red]60:{Hey!} and I get the error Cannot parse this coordinate.  \documentclass{standalone} \usepackage{tikz} \usetikzlibrary{shapes,arrows,positioning} \begin{document} \begin{tikzpicture}[node distance=2cm,&gt;=latex, every node/.style={     font=\sffamily\scriptsize     },       circtext/.style={draw,circle,minimum size=8pt,inner sep=2pt},     dot/.style={draw,circle,fill=black,minimum size=0.6mm,inner sep=0pt} ] { \node[rectangle, fill=green!10!white!90!black, minimum width=6cm, minimum height=3cm] at (2,0){}; \node[circtext, fill=yellow](A) at (0,0) {A}; \node[circtext, fill=yellow, right=of A](B){B}; \draw[-&gt;] (A) -- node[dot, pos=0.5, pin=[red]60:{Hey!}](C){}(B); } \end{tikzpicture} \end{document}     The default style looks like it's a gray thin arrow, and I want to change it to a black thin dotted line with no arrow.    update: I figured out how to add style to the pin node:  pin={[red]60:Hey!}]  But I can't figure out how to change the linestyle though.
25339
How does one set the font for text inside a math environment? If I use \setmathsfont(Latin){FontName}, I can change the font for individual letters in the math environment, but not for functions such as \sin. (These aren't controlled by the set "Symbols" either.)  Here's a MWE:  \documentclass[a4paper,12pt]{article}  \usepackage[MnSymbol]{mathspec}  \usepackage[no-sscript]{xltxtra} \defaultfontfeatures{Mapping=tex-text}  \setmainfont{Times}  \setmathsfont(Digits){Times} \setmathsfont(Latin){Times} %\setmathsfont(Symbols){Times}  \begin{document}  Some text digits 1, 2, 3 and some math digits $1, 2, 3$.   Some italic text \textit{text}, and some math text $text$.  But, we have \textit{sin x} and $\sin x$. Or, \textit{arctan x} and $\arctan x$.  \end{document}
29956
For the longest time, I have wanted to understand why the browser adds an empty space between rendered HTML elements when there is a NewLine between them, for example:  &lt;span&gt;Hello&lt;/span&gt;&lt;span&gt;World&lt;/span&gt;   The html above will output the “HelloWorld” string without a space between “Hello” and “World”, however in the following example:  &lt;span&gt;Hello&lt;/span&gt; &lt;span&gt;World&lt;/span&gt;   The html above will output a “Hello World” string with a space between “Hello” and “World”.  Now, I have no problem accepting that this is just the way it works period, but the thing that bugs me a little is that I was always under the impression that spaces (or newlines) between the html elements would not matter at the time when the browser rendered the html to the user.  So my question is if anyone knows what the philosophical or technical reason behind this behavior.  Thank you.
19582
If I set a CSS value on a specific element using:  $('#element').css('background-color', '#ccc');   I want to be able to unset that element-specific value and use the cascaded value, along the lines of:  $('#element').css('background-color', null);   But that syntax doesn't seem to work – is this possible using another syntax?  Edit: The value isn't inherited from the parent element – the original values comes from an element-level selector. Sorry for any confusion!
81941
The following has worked for me for quite some time.  \documentclass[11pt]{book} \usepackage[margin=1in]{geometry}             \geometry{letterpaper}                  \usepackage[parfill]{parskip}     \usepackage{tikz, pgf, calc} \usetikzlibrary{matrix, shapes, positioning, calc, decorations.pathreplacing, shapes.geometric, arrows}  \newcounter{Day}  \newcounter{pt}[Day]    % CORRECTNESS POINTS FOR HW RUBRICS \newcommand{\pt}[2]     % NUMBER OF POINTS, ITEM IN STARBURST     {#2\begin{tikzpicture}[remember picture, overlay]         \node (A) [starburst,              draw = red, opacity = .8,              fill = red!20, fill opacity = .2,              xshift = -.5*\widthof{#2},             yshift = .5*\heightof{#2}             ]             {\phantom{#2}};         \node (B) at (current page.west) {};         \path let \p1 = (A), \p2 = (B) in node [draw = red,              color = red] at (\x2+.625in,\y1) {#1 pt(s)};     \end{tikzpicture}     \addtocounter{pt}{#1}     }  \begin{document}  \pt{1}{lorem}  \end{document}   Recently, I updated several packages with MikTeX 2.9.  Below is a screenshot of the packages that were updated.    Since the updates, the \widthof and \heightof commands are causing errors.  If I change the xshift and yshift to something else, everything compiles just fine (but isn't the way I want my command to work).  I have two questions:   Why did this work before and not now? How can I change my code to make it work correctly again?   Thanks in advance for any help!
82402
Notes:  Answers will occasionally be moved to the  when there are too many of them. When using them to report bugs, keep an eye on the post.    This site, Meta Stack Exchange, is usually used as a &quot;test bed&quot; for pending changes happening to the way text is rendered on all network sites. Changes to text rendering that are going to be rolled out to the network are usually deployed here first to test them out and fix any potential glitches. Currently, there are no such changes pending, but if there were, keep in mind that text posted here may render differently from the other sites until the changes roll out to them as well.    As per Jeff's suggestion in : You can use this question as a formatting sandbox. You can:  edit  itself ( questions such as this one require only 100 reputation to edit instead of 2,000) post answers to this question (This question might be , requiring earning 10 reputation on this site to answer) post comments to this question or its answers test suspected bugs with the editor or the rendering post ponies (only when mods are asleep)   Beware that since the  in December 2010, and  added in March 2011, no syntax highlighting is applied unless the question's tags or an inline hint enable it. So, to test highlighting here in the sandbox:  , you can use GitHub-flavor fenced code blocks in your posts, specifying the language after the opening fence: ```html While not hinted otherwise: &lt;html&gt;&lt;/html&gt; source &lt;b&gt;goes&lt;/b&gt; &quot;here&quot;. ```  ```js var a = 3; while (not (a &gt; 0)) {     alert(&quot;JavaScript code &lt;b&gt;goes&lt;/b&gt; here.&quot;); } ```   Or:  Create code blocks in any way (using the fence notation above, the four-space indent form, or using HTML &lt;pre&gt;&lt;code&gt; tags).  Save your post.  Use your browser's developer tools to edit the resulting HTML. To open developer tools, press F12, or ⌥⌘ I on Mac.  Find the &lt;pre&gt; element and add the attribute class=&quot;prettyprint&quot;, or change it into one of the valid syntax hints linked above, like class=&quot;lang-vb prettyprint&quot;.  Run the following in the location bar: javascript:prettyPrint(); or prettyPrint() in the console.     Answers that are considered annoying or obnoxious, or that cause breakage for users, will be deleted. This is .
37212
I need a way to allow each letter of a word to rotate through 3 different colors. I know of some not so clean ways I can do this with asp.NET, but I'm wondering if there might be a cleaner CSS/JavaScript solution that is more search engine friendly.  The designer is including  for each page. I'd rather not have to manually generate an image for every page as that makes it hard for the non-technical site editors to add pages and change page names.
77934
I would like to create a TikZ style that adds a thick outline to the node text using the \contour{&lt;colour&gt;}{&lt;text&gt;} macro from the contour package (as in the answer to the question ), i.e. I want to define a style halo so that  \node [halo] {Text};   is equivalent to  \node {\contour{red}{Text}};   My problem is that I cannot tell TikZ to use the node text as an argument for a macro.  The font option only works with switches like \itshape (as opposed to \textit{}, which requires the text to be italicised to be provided in the argument).  There are two keys execute at begin node={&lt;code&gt;} and execute at end node={&lt;code&gt;} that can be used to call code at the beginning and end of the node, but I can't split the \contour command up using execute at begin node={\contour{red{} and execute at end node={}} because the brackets don't match. Replacing { with \bgroup and } with \egroup fails with Missing } inserted.  Here's am MWE to play with:  \documentclass{article}  \usepackage{tikz} \usepackage[outline]{contour} \contourlength{1.2pt}   \begin{document}      \begin{tikzpicture}     \node {\contour{red}{Text}}; %    \node [font=\contour{red}{}] {Text}; % Doesn't change the text %    \node [execute at begin node={\contour{red}{},execute at end node={}}] {Text};  % Fails with ``Runaway argument?'' %    \node [execute at begin node={\contour{red}\bgroup},execute at end node={\egroup}] {Text};  % Fails with ``Missing } inserted''     \end{tikzpicture} \end{document}
60358
I found another odd bug... but I can only repro it in Firefox (40.0.2 for OSX). It doesn't occur in Chrome or Safari. I understand that, if it is a FF only thing, there's possibly nothing you guys can do about it, but I thought I'd put this out here anyway.  I use the magic hyperlink button to create links because they're pretty. Recently I've been noticing that, when I use it, I can't use ↓ until I click outside the text area.  The process is pretty simple:   Write two lines of text (to make sure you have a "down" to go to). Highlight some of the text on the upper line. Click the hyperlink button or use Ctrl + L. Paste the link into the text area. Hit Enter/Return to close the dialogue. (Hitting the OK button will not repro the issue.) Try to use the down arrow&hellip;. No response.   As long as you don't click out of the text input area, you will not be able to use the down button. Even using your mouse to move the cursor to another spot doesn't make it work. The other three direction arrows work fine.  This may or may not be related to ... I don't remember running into this issue until the last week or so.
11521
Can someone show me how to get the top &amp; left position of a div or span element when one is not specified? ie: &lt;span id='11a' style='top:55px;' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt; &lt;span id='12a' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt;  In the above, if I do: document.getElementById('11a').style.top  The value of 55px is returned. However, if I try that for span '12a', then nothing gets returned. I have a bunch of div/spans on a page that I cannot specify the top/left properties for, but I need to display a div directly under that element.
18719
This is one of the minor CSS problems that plague me constantly. How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), they're completely off in Firefox and IE. Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form. Here's the standard code that I work with:   &lt;form&gt;     &lt;div&gt;         &lt;label&gt;&lt;input type="checkbox" /&gt; Label text&lt;/label&gt;     &lt;/div&gt; &lt;/form&gt;    I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!
67133
I have the following element element(by.css(&quot;span[aria-label='Picker ID, TESTUSER']&quot;)  I want to assure the text on this filed is TESTUSER, so I tried:  expect(element(by.css(&quot;span[aria-label='Picker ID, TESTUSER']&quot;)).getAttribute('value')).toEqual('TESTUSER');  then I got the error: Expected null to equal 'TESTUSER' So I tried: element(by.css(&quot;span[aria-label='Picker ID, TESTUSER']&quot;)).getText().then(function (value) {         console.log(value);       })  And I got this error: Expected '' to be 'TESTUSER'.  How to get the value of this field and expect it is TESTUSER?
65967
I am trying to read a custom (non-standard) CSS property, set in a stylesheet (not the inline style attribute) and get its value. Take this CSS for example:  #someElement {   foo: 'bar'; }   I have managed to get its value with the currentStyle property in IE7:  var element = document.getElementById('someElement'); var val = element.currentStyle.foo;   But currentStyle is MS-specific. So I tried getComputedStyle() in Firefox 3 and Safari 3:  var val = getComputedStyle(element,null).foo;   ...and it returns undefined. Does anyone know a cross-browser way of retreiving a custom CSS property value?  (As you might have noticed, this isn't valid CSS. But it should work as long as the value follows the correct syntax. A better property name would be "-myNameSpace-foo" or something.)
15442
I'm trying to do a number checker in imessage.  We all know that there is no such api, so I'm trying to use the tools at hand. The main took with past issues on this site on this topic.   I made a loop that inserts a number into a string, and by the color of the number (blue - registered, red - missing), using the standard utility Digital Colors Meter determines the color of the number. Then, depending on the color, it either adds a variable with a number from the initial txt file to the new one, or starts the script from the beginning.  At least it should be.   But something is going wrong. It checks the color, inserts numbers, everything is fine, but apparently the wrong condition, apparently the wrong data types. It inserts different numbers into the scatter. Some will insert, some will not, regardless of the initial condition.  What could be the reason? Where is the error?  And is it possible to make it so that after a certain number of verified numbers, he himself deleted open dialogs with these numbers?  repeat with n in client     activate application "Messages"     repeat         tell application "System Events" to tell process "Messages"             key code 45 using command down             keystroke n             delay 1             key code 36             tell application "Digital Color Meter" to activate             tell application "System Events"                 tell process "Digital Color Meter"                     click menu item 1 of menu 1 of menu bar item 4 of menu bar 1                 end tell                 do shell script "/usr/bin/python -c \"import objc;bndl = objc.loadBundle('CoreGraphics', globals(), '/System/Library/Frameworks/ApplicationServices.framework');objc.loadBundleFunctions(bndl, globals(), [('CGWarpMouseCursorPosition', 'v{CGPoint=dd}')]);CGWarpMouseCursorPosition((" &amp; 1002 &amp; "," &amp; 222 &amp; "));\""                 set rgbColors to words of (the clipboard)             end tell             if rgbColors is equal to {"77", "39", "38"} then                 exit repeat             else                 do shell script "echo " &amp; quoted form of n &amp; " &gt;&gt; /Users/oneone/Desktop/base2.txt"             end if         end tell     end repeat end repeat
35
Why won't vertical-align: middle work?  And yet, vertical-align: top does work.   span{   vertical-align: middle; } &lt;div&gt;   &lt;img src="https://via.placeholder.com/30" alt="small img" /&gt;   &lt;span&gt;Doesn't work.&lt;/span&gt; &lt;/div&gt;
10567
It's easy to set inline CSS values with javascript. If I want to change the width and I have html like this:  &lt;div style="width: 10px"&gt;&lt;/div&gt;   All I need to do is:  document.getElementById('id').style.width = value;   It will change the inline stylesheet values. Normally this isn't a problem, because the inline style overrides the stylesheet. Example:  &lt;style&gt;    #tId {       width: 50%;    } &lt;/style&gt;  &lt;div id="tId"&gt;&lt;/div&gt;   Using this Javascript:  document.getElementById('tId').style.width = "30%";   I get the following:  &lt;style&gt;    #tId {       width: 50%;    } &lt;/style&gt;  &lt;div id="tId" style="width: 30%";&gt;&lt;/div&gt;   This is a problem, because not only do I not want to change inline values, If I look for the width before I set it, when I have:  &lt;div id="tId"&gt;&lt;/div&gt;   The value returned is Null, so if I have Javascript that needs to know the width of something to do some logic (I increase the width by 1%, not to a specific value), getting back Null when I expect the string "50%" doesn't really work.  So my question: I have values in a CSS style that are not located inline, how can I get these values? How can I modify the style instead of the inline values, given an id?