css interview questions
Top css frequently asked interview questions
Lets say you have an array that is rendered in a ul with an li for each element and a property on the controller called selectedIndex. What would be the best way to add a class to the li with the index selectedIndex in AngularJS?
I am currently duplicating (by hand) the li code and adding the class to one of the li tags and using ng-show and ng-hide to show only one li per index.
Source: (StackOverflow)
For anchors that act like buttons (for example, Questions, Tags, Users, etc. at the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?
I realize this could be done with JavaScript, and a little googling yielded the Mozilla-only -moz-user-select option.
Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?
Source: (StackOverflow)
I have a div tag which contains text, and I want to align the contents of this div vertically center.
Here is my div style:
#box
{
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
}
<div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
What is the best way to do this?
Source: (StackOverflow)
Is there a CSS-only way to style a <select> dropdown?
I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?
This code needs to be compatible with all major browsers:
- Internet Explorer 6,7 and 8
- Firefox
- Safari
I know I can make it with JavaScript: Example.
And I'm not talking about simple styling. I want to know, what the best we can do with CSS only.
I found similar questions on Stack Overflow.
And this one on Doctype.com.
Source: (StackOverflow)
I'm using bootstrap for the first time and really liking it - but one thing I'd like to do is have my menu automatically drop down on hover over, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.
Source: (StackOverflow)
I have the age-old problem of a div wrapping a two-column layout. My sidebar is floated, so my container div fails to wrap the content and sidebar.
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
There seem to be numerous methods of fixing the clear bug in FF:
<br clear="all"/>overflow:autooverflow:hidden- etc.
But in my situation, the only one that seems to work correctly is the <br clear="all"/> solution, which is a little bit scruffy. overflow:auto gives me nasty scrollbars, and overflow:hidden must surely have side effects.
Also, IE7 is apparently supposed to not suffer from this problem due to its incorrect behaviour, but in my situation it’s suffering the same as FF.
What’s the most reliable and best-practice method currently available to us?
Source: (StackOverflow)
I am currently working on a web application, where I want the content to fill the height of the entire screen.
The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.
I have a header div and a content div. At the moment I am using a table for the layout like so:
CSS and HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
The entire height of the page is filled, and no scrolling is required.
For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with it's height set to 100%. Putting header inside content will not allow this to work.
Is there a way to achieve the same effect without using the table?
Update:
Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.
Update 2:
For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.
Source: (StackOverflow)
I am trying to make a <ul> slide down using CSS transitions.
The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition,
If I do it from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height.
How else could I do this?
#child0 {
height: 0;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent0:hover #child0 {
height: auto;
}
#child40 {
height: 40px;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent40:hover #child40 {
height: auto;
}
h1 {
font-weight: bold;
}
The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr />
<div id="parent0">
<h1>Hover me (height: 0)</h1>
<div id="child0">Some content
<br />Some content
<br />Some content
<br />Some content
<br />Some content
<br />Some content
<br />
</div>
</div>
<hr />
<div id="parent40">
<h1>Hover me (height: 40)</h1>
<div id="child40">Some content
<br />Some content
<br />Some content
<br />Some content
<br />Some content
<br />Some content
<br />
</div>
</div>
Source: (StackOverflow)
How do you use the CSS content property to add html entities?
I have a number of links which I make into a breadcrumb style list by adding an arrow before each.
<div class="breadcrumbs">
<a>One</a>
<a>Two</a>
<a>Three</a>
</div>
Which has the following style applied to it:
.breadcrumbs a:before {
content: '> ';
}
The problem is that when the breadcrumb list gets long and wraps to the next line, the arrow is left on the preceding line. The obvious solution is to change the space into a non-breaking space, but this doesn't work:
.breadcrumbs a:before {
content: '> ';
}
It actually outputs onto the screen. I've got around this with other strange characters (like ») by pasting the character in directly, but how do you paste a ?
Source: (StackOverflow)
Ok, I'm now banging my head against a brick wall with this one.
I have an HTML (not XHTML) document that renders fine in Firefox 3 and IE 7. It uses fairly basic CSS to style it and renders fine in HTML.
I'm now after a way of converting it to PDF. I have tried:
- DOMPDF: it had huge problems with tables. I factored out my large nested tables and it helped (before it was just consuming up to 128M of memory then dying--thats my limit on memory in php.ini) but it makes a complete mess of tables and doesn't seem to get images. The tables were just basic stuff with some border styles to add some lines at various points;
- HTML2PDF and HTML2PS: I actually had better luck with this. It rendered some of the images (all the images are Google Chart URLs) and the table formatting was much better but it seemed to have some complexity problem I haven't figured out yet and kept dying with unknown node_type() errors. Not sure where to go from here; and
- Htmldoc: this seems to work fine on basic HTML but has almost no support for CSS whatsoever so you have to do everything in HTML (I didn't realize it was still 2001 in Htmldoc-land...) so it's useless to me.
I tried a Windows app called Html2Pdf Pilot that actually did a pretty decent job but I need something that at a minimum runs on Linux and ideally runs on-demand via PHP on the Webserver.
I really can't believe I'm this stuck. Am I missing something?
Source: (StackOverflow)
I've got a list, and I have a click handler for its items:
<ul>
<li>foo</li>
<li>goo</li>
</ul>
How can I change the mouse pointer into a hand pointer (like when hovering over a button)? Right now the pointer turns into a text selection pointer when I hover over the list items.
Source: (StackOverflow)
I have a layout with two columns - a left div and a right div.
The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now the background-color ends at the last piece of content in that div.
I've tried height:100%, min-height:100%; etc.
Source: (StackOverflow)
I have a layout similar to:
<div>
<table>
</table>
</div>
I would like for the div to only expand to as wide as my table becomes.
Source: (StackOverflow)
I want to disable the resizable property of a textarea.
Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?
Source: (StackOverflow)
I have created an unordered list, and I am appending and removing list items using jQuery.. I feel the bullets in the unordered list are bothersome, so I want to remove them. Is it possible to have a list without bullets?
Source: (StackOverflow)