I've been trying to make a navbar with css grid. However des pite my best efforts the elements refuse to align according to the grid I have set. Please look over this html and css and help me identify my problem.  &lt;body&gt;     &lt;nav class="container"&gt;         &lt;div class="1"&gt;             &lt;a href="#intro"&gt;home&lt;/a&gt;         &lt;/div&gt;         &lt;div class="2"&gt;             &lt;a href="#work"&gt;work&lt;/a&gt;         &lt;/div&gt;         &lt;div class="3"&gt;             &lt;a href="#contact"&gt;contact&lt;/a&gt;         &lt;/div&gt;     &lt;/nav&gt;   and this is the corresponding css for the navbar  body {     font-family: 'Roboto', sans-serif;     font-size: 14px;     margin: 0;     padding: 0; }  a {     text-decoration: none; }  nav {     display: grid;     grid-template-columns: repeat(12, 1fr);     grid-template-rows: 1fr;  } .container&gt; div:nth-child(odd){     background: #000;     padding:1em; }  nav.container {     height: 100px;     background: #e59033;     align-items: center;     align-text: center;     border: 1px solid #000; }  .1 {     grid-column: 5; }  .2 {     grid-column: 6; }  .3 {     grid-column: 7; }   According to me this seems fine but for the life of me I can't figure out where I am going wrong.
12151
What characters/symbols are allowed within the CSS class selectors? I know that the following characters are invalid, but what characters are valid?  ~ ! @ $ % ^ &amp; * ( ) + = , . / ' ; : " ? &gt; &lt; [ ] \ { } | ` #
105195
I am using a default font size of 26px and stackoverflow's layout seems to not work well with such a large sizes.  The most important issue is that many inputs tend to overflow and partially get hidden below side text. This includes one with login, ‘Title’ and — the most important issue — the editor, which makes writing posts a little painful.  Another important one is that sometimes 'search' field doesn't fit in topbar and jumps lower, being partially hidden by logo. I met that issue on stackoverflow itself only while serverfault &amp; meta display fine (but that may be related to rep or sth).  There's one minor issue too — navbar is too narrow and ‘Ask Question’ jumps below — but this one looks quite nice (maybe it's even intended?).  Screenshot: (click to enlarge)
5799
I have a couple of &lt;p&gt; tags that I want to right align.  Does anyone know how to do this?
50460
Am trying to align this in group of 3's but a bar in the AAAAAAAA group keeps going off alignment.   Note: I have checked  ,  and   and they don't answer my question - our data input format is different.  MWE:    \definecolor{bblue}{HTML}{82B1FF} \definecolor{rred}{HTML}{FF8A80}  \begin{filecontents}{testdata.csv} ALB,VAL,ERR,COR AA,20.61,0.32,bblue AA,20.88,0.55,bblue AA,20.41,0.29,bblue AAA,26.22,0.94,bblue AAA,26.43,0.45,bblue AAA,26.86,0.61,bblue AAAA,29.91,0.76,bblue AAAA,30.39,0.11,bblue AAAA,30.11,0.49,bblue AAAAA,34.71,0.43,rred AAAAA,34.87,0.99,rred AAAAA,34.81,0.26,rred AAAAAA,40.33,0.64,rred AAAAAA,40.18,0.03,rred AAAAAA,40.4,0.83,rred AAAAAAA,45.77,0.47,rred AAAAAAA,45.93,0.95,rred AAAAAAA,45.35,0.3,rred AAAAAAAA,50.35,0.13,rred AAAAAAAA,50.34,0.85,rred AAAAAAAA,50.66,0.55,rred \end{filecontents} \pgfplotstableread[col sep=comma]{testdata.csv}\datatable \makeatletter \pgfplotsset{     /pgfplots/flexible yticklabels from table/.code n args={3}{%         \pgfplotstableread[#3]{#1}\coordinate@table         \pgfplotstablegetcolumn{#2}\of{\coordinate@table}\to\pgfplots@yticklabels         \let\pgfplots@yticklabel=\pgfplots@user@ticklabel@list@y     } } \makeatother \begin{figure}  \begin{tikzpicture} \begin{axis}[     ylabel=A labels,  y label style={at={(-0.1,0.5)}},      y = -0.3cm,     ybar, %=2*\pgflinewidth,     draw opacity=0.5,     bar width=6pt,     enlarge y limits={abs=7pt},     xbar,      width=.36\textwidth,     xlabel= unit,     %flexible xticklabels from table={testdata.csv}{ALB}{col sep=comma},      flexible yticklabels from table={testdata.csv}{ALB}{col sep=comma},     yticklabel style={font=\small,xshift=0.5ex,  anchor=east},       %xtick=data     ytick=data,     xmajorgrids ] %\pgfplotsinvokeforeach {0}{     \addplot     %style={color=cyan,fill=bblue,mark=none};     plot [error bars/.cd, x dir=both,x explicit ]          table[y expr={(\coordindex) - mod(\coordindex,3)/8},x=VAL, x error=ERR ] {\datatable};  \end{axis}  \end{tikzpicture}  \end{figure}
21651
I'm looking for a source/spec that can tell me what CSS properties can applied to which HTML elements.  For instance, the css property; "overflow".  I know I can apply this to div, p, textarea but what other elements can I apply this too?  Is there a spec somewhere I can reference?
60562
My understand is text should be left-aligned; dates, times, and numbers should be right-aligned; images should be centered.  What about Boolean strings "Yes"/"No"? My hunch says to center them.
9647
Given the following HTML:   &lt;div id="container"&gt;   &lt;!-- Other elements here --&gt;   &lt;div id="copyright"&gt;     Copyright Foo web designs   &lt;/div&gt; &lt;/div&gt;    I would like #copyright to stick to the bottom of #container. Can I achieve this without using absolute positioning?
42533
I have a table that looks something like this   Here's my code I haven't tried a lot.  HTML:  &lt;template&gt;     &lt;table class="slds-table slds-table_cell-buffer slds-table_bordered"&gt;         &lt;thead&gt;             &lt;tr class="slds-line-height_reset"&gt;                 &lt;th class="" data-scope="col"&gt;                     &lt;div class="slds-truncate" title=""&gt;Name&lt;/div&gt;                 &lt;/th&gt;                 &lt;th class="" data-scope="col"&gt;                     &lt;div class="slds-truncate" title=""&gt;Phone&lt;/div&gt;                 &lt;/th&gt;                 &lt;th class="" data-scope="col"&gt;                     &lt;div class="slds-truncate" title=""&gt;Email&lt;/div&gt;                 &lt;/th&gt;                 &lt;th class="" data-scope="col"&gt;                     &lt;div class="slds-truncate" title=""&gt;&lt;/div&gt;                 &lt;/th&gt;             &lt;/tr&gt;         &lt;/thead&gt;         &lt;tbody&gt;             &lt;template for:each={contacts.data} for:item="contact"&gt;                 &lt;tr key={contact.Id} class="slds-hint-parent"&gt;                     &lt;td data-label="Name" data-scope="row"&gt;                         &lt;div class="slds-truncate" title={contact.Name}&gt;{contact.Name}&lt;/div&gt;                     &lt;/td&gt;                     &lt;td data-label="Phone" data-scope="row"&gt;                         &lt;div class="slds-truncate" title={contact.Phone}&gt;{contact.Phone}&lt;/div&gt;                     &lt;/td&gt;                     &lt;td data-label="Email" data-scope="row"&gt;                         &lt;div class="slds-truncate" title={contact.Email}&gt;{contact.Email}&lt;/div&gt;                     &lt;/td&gt;                     &lt;td data-label="Action" data-scope="row"&gt;                         &lt;div class="slds-truncate" title="Action"&gt;                             &lt;lightning-button variant="base" data-key={contact.Id} label="Edit" title="Base action" onclick={handleEdit} class="slds-m-left_x-small"&gt;&lt;/lightning-button&gt;                             &lt;lightning-button variant="base" data-key={contact.Id} label="Delete" title="Base action" onclick={handleDelete} class="slds-m-left_x-small"&gt;&lt;/lightning-button&gt;                         &lt;/div&gt;                     &lt;/td&gt;                 &lt;/tr&gt;             &lt;/template&gt;         &lt;/tbody&gt;     &lt;/table&gt; &lt;/template&gt;   JS:  import { LightningElement, api, wire, track } from 'lwc'; import getContacts from '@salesforce/apex/ContactManager_CTRL.getContacts';  export default class ContactTable extends LightningElement {     @api recordId;     @track editLabel;     @track deleteLabel;     @wire(getContacts, {accountId: '$recordId'}) contacts;      handleEdit() {         console.log('======== :: called');     }      handleDelete() {         console.log('======== :: called' + this.deleteLabel);     } }   on click of the edit button I want to send a contact id or contact as a parameter, is there a way to achieve this?  How can I achieve this in LWC?
112335
Lets say I have a text box that I want to fill a whole line. I would give it a style like this:  input.wide {display:block; width: 100%}   This causes problems because the width is based on the content of the text box. Text boxes have margin, borders, &amp; padding by default, which makes a 100% width text box larger than its container.  For example, here on the right:    Is there any way to make a text box fill the width of its container without expanding beyond it?  Here is some example HTML to show what I mean:  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt;     &lt;title&gt;Untitled Page&lt;/title&gt;     &lt;style type="text/css"&gt;         #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}         #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}         input.wide {display:block; margin: 0px}         input.normal {display:block; float: right}     &lt;/style&gt; &lt;/head&gt; &lt;body&gt;     &lt;div id="outer"&gt;         &lt;div id="inner"&gt;             &lt;input type="text" class="wide" /&gt;             &lt;input type="text" class="normal" /&gt;             &lt;div style="clear:both;"&gt;&lt;/div&gt;         &lt;/div&gt;     &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;   If this is run, you can see by looking at the "normal" text box that the "wide" text box is sticking out beyond the container. The "normal" text box floats to the actual edge of the container. I'm trying to make the "wide" text box fill its container, without expanding beyond edge like the "normal" text box is.
93817
There is an alignment issue in the  page, under the Tags section the Add buttons has extra height.  Screenshot for reference:        The alignment issue is in all the Stack Exchange main and meta sites. Not sure this is due to the impact of the recent .
19983
I would like to know how to theme Drupal 7  elements? I want to change the HTML structure of every element, not just wrap form with div or something like that. And I want to leave theme's elements as they were.  EDIT: I would like to add class to label and input type radio button.
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!
29591
There is an alignment issue occurred while searching the users in the .   The grid cells' height is increased while fetching the result. Once the result fetched, the grid's height become normal, so the issue is due to the searching indicator, when it is visible.  Screenshot for reference:        GIF for the same:
85015
if you create html layout like so  &lt;ul&gt;      &lt;li class='a'&gt;&lt;/li&gt;      &lt;li class='b'&gt;&lt;/li&gt;      &lt;li class='a'&gt;&lt;/li&gt;      &lt;li class='b'&gt;&lt;/li&gt;      &lt;li class='a'&gt;&lt;/li&gt;      &lt;li class='b'&gt;&lt;/li&gt;      &lt;li class='a'&gt;&lt;/li&gt;      &lt;li class='b'&gt;&lt;/li&gt; &lt;/ul&gt;   and try to select odd elements with 'a' class like so $$('.a:odd') you will get empty array, and if you do $$('.a:even') you will get all four li elements with 'a' class.. It really strange.. But im new to mootools, maybe im doing something wrong..    So my question is how to select first and third li elements with a class. I know that i can do it with function like this  $$('.a').filter(function(item, index) { return index%2; }  but its too complicated for such small task as selecting odd or even elements..
4073
how could i vertically center a &lt;div&gt; within a &lt;div&gt; ?  my code so far:  &lt;div style="height:322px;overflow:auto;"&gt;     &lt;div style="border: Solid 1px #999999;padding:5px;"&gt;     &lt;/div&gt; &lt;/div&gt;   i have tried "top:50%;" and "vertical-align:middle;" without success  EDIT: okay so it's been discussed a lot. and i've maybe started another mini flame war. but for argument sake, how would i do it with a table then? i've used css for everything else so far so it's not like i'm not trying to employ "good practices".  EDIT: the inner div does not have a fixed height
173
I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support. &lt;body&gt;     &lt;div&gt;Div to be aligned vertically&lt;/div&gt; &lt;/body&gt;  How can I center a div vertically in all major browsers, including Internet Explorer 6?
8990
I would like to ask for some simple examples showing the uses of &lt;div&gt; and &lt;span&gt;.   I've seen them both used to mark a section of a page with an id or class, but I'm interested in knowing if there are times when one is preferred over the other.