/* I have the following CSS. */  .top-header-one {   background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;   height: 26px;   width: 96px;   display: inline-block; }  .top-header-one:hover {   background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat; }  .top-header-two {   background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;   height: 26px;   width: 96px;   display: inline-block; }  .top-header-two:hover {   background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat; }  .top-header-three {   background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;   height: 26px;   width: 96px;   display: inline-block; }  .top-header-three:hover {   background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat; }  .top-custom-link ul li {   display: inline-block; }  .top-custom-link ul li:not(:first-child):before {   content: "|"; } &lt;!-- And the following HTML. --&gt;  &lt;div class="top-custom-link"&gt;   &lt;ul&gt;     &lt;li&gt;       &lt;a href="#"&gt; &lt;span class="top-header-one"&gt; &lt;/span&gt;&lt;/a&gt;     &lt;/li&gt;     &lt;li&gt;       &lt;a href="#"&gt; &lt;span class="top-header-two"&gt; &lt;/span&gt;&lt;/a&gt;     &lt;/li&gt;     &lt;li&gt;       &lt;a href="#"&gt; &lt;span class="top-header-three"&gt; &lt;/span&gt;&lt;/a&gt;     &lt;/li&gt;   &lt;/ul&gt; &lt;/div&gt;     I am not able to align pipes with background images.   Here is the jsfiddle
555
I have a div with two images and an h1. All of them need to be vertically aligned within the div, next to each other. One of the images needs to be absolute positioned within the div. What is the CSS needed for this to work on all common browsers? &lt;div id=&quot;header&quot;&gt;   &lt;img src=&quot;..&quot; &gt;&lt;/img&gt;   &lt;h1&gt;testing...&lt;/h1&gt;   &lt;img src=&quot;...&quot;&gt;&lt;/img&gt; &lt;/div&gt;
24664
I'm looking for a way to change the CSS rules for pseudo-class selectors (such as :link, :hover, etc.) from JavaScript.  So an analogue of the CSS code: a:hover { color: red } in JS.  I couldn't find the answer anywhere else; if anyone knows that this is something browsers do not support, that would be a helpful result as well.
4199
A   B   C   D   E   F             I don't even know. It just seemed weird.  Yes, I understand I could just avoid doing something like that. But the problem already exists with a single level.   Consider having 2 images in a post. Both exceed the maximum width of a post. One is nested in a list. Key to this issue is that my original images were much larger. They were automatically resized.  Image    List      I think it looks weird.
46971
There is some alignment issue in the following trilogy or  site's account recovery page. The Sign up link's border bottom is missing.   You can find the issue in the following links:            Can be able to reproduce this in the following browsers:  Firefox: 49.0.1 Chrome: 51.0.2704.103 m OS: Windows 8  Screenshot for reference:        Update: The border bottom issue is in Stack Apps account recovery page too. There extra border is displaying under the Login tab.
30440
I am using the default theme, and use the following to customize the footline,  \useoutertheme{infolines} \setbeamertemplate{footline}{\hspace*{.5cm}\scriptsize{\insertshorttitle \hspace*{50pt} \hfill\insertframenumber\hspace*{.5cm}}\\ \vspace{9pt}}    I don't like it also appears on the title page. Is there a simple way not to show it on the first page?
13623
If so, does it effectively deprecate the visibility property?  (I realize that Internet Explorer does not yet support this CSS2 property.)
1608
When I look at e.g. , I see the following under &quot;Top Questions&quot;:  It appears that the MSO sprite is being stacked on top of the sprite for some beta site which I can't identify. I have cleared my cache and hard-refreshed, so this probably isn't a problem on my end. This appears to be related to the fact that favicon.css specifies a background-image for .favicon.
95887
Possible Duplicate:          Is it possible to style every four posts differently? I mean something like this:  &lt;div class="row"&gt; &lt;div&gt;1st post&lt;/div&gt; &lt;div&gt;2nd post&lt;/div&gt; &lt;div&gt;3rd post&lt;/div&gt; &lt;/div&gt; &lt;div class="row&gt; &lt;div&gt;4th post&lt;/div&gt; &lt;/div&gt; ...Repeat   I'm using , so it would be great if I could experiment more with that.. :)
93718
Math Stack Exchange was much better before the top bar was made a floating header, always in the way of reading the site especially when scrolling up and down.  Is there a way to remove this remedial nuisance; the information the banner holds is not needed so often that it has to always be on the screen.
8221
Stack Overflow seems to be having some CSS issues right now. At first, it presented as CSS disappearing when refreshing in Firefox (though hitting Enter from the address bar seemed to restore it - I'm thinking that's a cache issue though). I loaded my blank Firefox profile and discovered CSS wasn't rendering on Stack Overflow at all (Meta seems fine; haven't checked other SE sites).  I've since checked the site in Chrome and Opera, and can repro in both.
914
I want to overlay one image with another using CSS. An example of this is the first image (the background if you like) will be a thumbnail link of a product, with the link opening a lightbox / popup showing a larger version of the image.   On top of this linked image I would like an image of a magnifying glass, to show people that the image can be clicked to enlarge it (apparently this isn't obvious without the magnifying glass).
18580
I have a manual list of stuff that are sometimes separated by an hrule(or my own custom ruler) for visual purposes.  Sometimes the hrule ends at the top or bottom of a page which makes it useless.  Is there a way to prevent it from being added if it is at the top or bottom of a page?    MWE of problem:  \documentclass{book} \usepackage{tikz} \begin{document} \newcommand\rulesep{%   \par % make sure we end a paragraph   \vskip5pt % space above the rule   \leaders\vrule width \textwidth\vskip0.4pt % rule thickness is 0.4pt   \nointerlineskip % disable interline glue here   \vskip5pt % space below the rule } \def\dotikzcircle#1{\begin{tikzpicture}\draw(0,0)circle(#1);\end{tikzpicture}} \rulesep \noindent This is a test\noindent \rulesep \noindent End of test \rulesep \dotikzcircle3 \rulesep \begin{center}\dotikzcircle3\end{center} \rulesep \begin{center}\dotikzcircle3\end{center} \rulesep \dotikzcircle1 \rulesep \dotikzcircle2 \rulesep \dotikzcircle3 \rulesep \dotikzcircle4 \rulesep \dotikzcircle5 \rulesep  \end{document}
44881
Update  A month Several months later, a new top bar, and the bug still exists. An answer has already been posted that would fix the bug, so is this something that the dev team plans on fixing?  There are also a host of other problems caused by this, especially on the  and . Again, this would be fixed with  html{min-width:1000px;}   There is a slight bug with small windows on both the new meta and main site(s)?, shown here. The problem is that the top bar coloring doesn't stretch across when you resize and scroll left or right.        On Meta, when a horizontal scroll bar is needed, the black background will only be as wide as the width of the viewport, but when you scroll the coloring will not shift.  To reproduce:   Make screen as large as possible, or wait until the menu bar starts expanding Make it smaller and smaller until horizontal scrollbar appears, then scroll left and right.
8738
I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.  This is the desired layout in bad-ASCII-art format:  _____________________  _ |    | long    |logo|   | |    | content |    |   | |    |         |    |   | |    |         |    |   | |grad|         |grad|   | Viewport |    |         |    |   | |    |         |    |   | |    |         |    |  _| |    |         |    | |    |         |    | _____________________  |2em| &lt;-20em-&gt;| 2em|   ..or with short content..  _____________________  _ |    | short   |logo|   | |    | content |    |   | |    |         |    |   | |    |         |    |   | |grad|         |grad|   | Viewport |    |         |    |   | |    |         |    |   | |    |         |    |   | |    |         |    |   | _____________________  _|   Basically it looks like a single column, with a glow as a column either side. Over the left-glow is a logo. When the content is short, it is still the full-height.  I have tried using the , which fixes the middle column, but then the gradients only extend as far as the content (in the left column, a single &amp;nbsp;, in the right column the logo)    Here is what the layout looks like:    And the problem (when the browser window is shrunk vertically):    Finally, the problem HTML/CSS,
78990
It's just a minor CSS issue. See the following gif:
31839
Given this HTML:  &lt;div&gt;foo&lt;/div&gt;&lt;div&gt;bar&lt;/div&gt;&lt;div&gt;baz&lt;/div&gt;   How do you make them display inline like this:     foo bar baz   not like this:     foo   bar   baz
42
How can I horizontally center a &lt;div&gt; within another &lt;div&gt; using CSS? &lt;div id=&quot;outer&quot;&gt;   &lt;div id=&quot;inner&quot;&gt;Foo foo&lt;/div&gt; &lt;/div&gt;