Latest CSS3 Recipes

tablesorter doesn't show up and down arrows

I am trying to use the JQuery tablesoter plugin but when it comes to show the arrows it doesn't show either down or up arrow when I sort descending or ascending order. It always shows up and down arrow (unsorted arrow). It seems table.tablesorter...

Read the entire recipe Recipe added 36 minutes ago

Can someone tell me why my table is transparent?

I have a site that I'm working on which I need the table to have a background that is not transparent.

  <li>
            <div> some code </div>

    <div style="height:110px;" class="tableOwner">
        <img style="margin-top:30px;float:left;"...

Read the entire recipe Recipe added 1 hour, 37 minutes ago

Text gets cropped on Safari Mobile when using column-count and column-gap (CSS3)

Here the code I'm using:

<ul>
<li>TEXT<br>TEXT</li>
<li>TEXT<br>TEXT</li>
<li>TEXT<br>TEXT</li>
</ul>


ul {
    -webkit-column-count: 3;
    -webkit-column-gap: 90px;
    column-count: 3;
    column-gap: 90px;
    -moz-column-count: 3;
   ...

Read the entire recipe Recipe added 2 hours, 36 minutes ago

:hover with linear gradients in IE9

The design for this button calls for it to have a linear gradient, but then when you hover over it, the button should go to a flat color. The main class looks like this, and it seems to work find in all the browsers I've tested it in. As you can see,...

Read the entire recipe Recipe added 3 hours, 41 minutes ago

Inserting image with HTML &amp; CSS ( Best Practice )

I'm wondering what is the best practice for inserting images in html coupled with css.

At the moment i have a 5 column layout and im inserting images using the code below.

<img src="example.png" alt="Example Image" height="48" width="48">

I'm...

Read the entire recipe Recipe added 4 hours, 34 minutes ago

jQuery .css() not affecting a div

For an app I am working on, I recently implemented an overlay that absorbs user input. Of course, that was only one of my objectives - I also need to center the popover that lives 'inside' this overlay.

Here's my setup so far:

Markup

<!-- snip...

Read the entire recipe Recipe added 5 hours, 34 minutes ago

Issue building hover menu in CSS

I am trying to build a pure CSS hover menu and I having two issues with my current code.

  • When the user hovers over an li tag with a sub-menu ul tag, it push the item up instead of hovering below.
  • The sub-menu ul tag is not taking the width of the...

Read the entire recipe Recipe added 6 hours, 35 minutes ago

CSS Transform causes flicker in Safari, but only when the browser is &gt;= 2000px wide

You read that right. Tested on multiple machines in the office and the only difference between scenarios was browser size. A coworker narrowed it down to a 2000px sweet spot. Lo-and-behold when we each resize our browsers to be = 2000px wide and mouse...

Read the entire recipe Recipe added 7 hours, 38 minutes ago

Add a transparent gradient over a solid background

I'm looking for a way to create a modular gradient that could be applied to any number of items by adding it as a LESS mixin.

For example, say you have a flat red button that you want to apply a gradient too. Instead of picking your base red color...

Read the entire recipe Recipe added 8 hours, 34 minutes ago

Inline responsive form elements

I have a text input element and a submit input element that I need to be inline and responsive. The problem is that I can't find a way to get the text input element to be fluid without screwing up the positioning of the button. Any help would be...

Read the entire recipe Recipe added 9 hours, 36 minutes ago

HTML general layout issue

The banner is where i want it to be although the boxes which are using jquery masonry are overlapping it, what have i done wrong here?...

html

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"...

Read the entire recipe Recipe added 10 hours, 33 minutes ago

Create multiple image sliders

I've have an image slider but I need more than one slider on the same page. Is it possible to copy my function so it does not interfere with the original?

HTML

<div id="slideshow">
   <div>
     <img...

Read the entire recipe Recipe added 11 hours, 35 minutes ago

Declaration is not applied unless &quot;!important&quot; is used

I have a document that is meant to display in an iframe. It needs to be displayed in 2 different sized iframes on my site, and I want to adjust the content accordingly.

In the the framed document, I have a div that's 570px wide. If the iframe is...

Read the entire recipe Recipe added 12 hours, 41 minutes ago

img get oversize windows

Please have a look at this jsfiddle

<!DOCTYPE html>
<html lang='en'>
<head> 
    <style>
        body { height: 100%; margin: 0; padding: 0;}
        div { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background: black;}
      ...

Read the entire recipe Recipe added 13 hours, 36 minutes ago

Selectivizr.js won't work in respond.js

I'm using Respond.js so that I can create a responsive page in IE8. And it works fine.

But, I am also using Selectivizr.js so that I can use CSS3 :nth-child selector in IE8, which also works fine.

The problem is that the nth-child selector won't...

Read the entire recipe Recipe added 14 hours, 41 minutes ago

iframe Content breaks in IE 9

I am using an iframe to include a list of content. Attached is an image of what I see in IE9 only. The spacing between images and name is off and are overlapping. I have tried multiple ways to fix this. Any ideas or suggestions?

enter image description here

Read the entire recipe Recipe added 15 hours, 36 minutes ago

Floating multiple li's left and right

I am trying to make a custom sidebar in wordpress, i have all the element and info in li's, what i am trying to do is try to shift the half of the total li's to left and half to the right...

What i am using is float/clear left and right, that not...

Read the entire recipe Recipe added 16 hours, 35 minutes ago

Make &lt;a&gt; tag clickable for bigger area

I have a menu, where I want my tag to be clickable on a much bigger area on hover, basically for the width and hegiht of the menu.

This is the code I have now: http://jsfiddle.net/uwJTC/14/

HTML

<div id="box">
    <ul>
        <li><a...

Read the entire recipe Recipe added 17 hours, 36 minutes ago

Vertical-Align - how does it works?

So there is code on JSFidle and I can't make h1 inside of section to be ine the middle of the field... vertical align doesnt do his work! And margin auto same. Any1 has idea?

    #welcome{
    vertical-align: middle;
    height: 100px;
}
#welcome...

Read the entire recipe Recipe added 18 hours, 37 minutes ago

When container width is defined in em unit in responsive friendly design?

I am learning about Relative Unit of measurement for responsive design. But i am little bit confused seeing many designers are using em unit in defining their container width. I have also seen while defining media queries,the breaking point is defined...

Read the entire recipe Recipe added 19 hours, 38 minutes ago

Open one tab at a time in accordion

I have a accordion which is working absolutely fine but what I need is to open only one tab at a time, means when one tab is opened then another tab should be closed.

Currently you can see that we can open all the tabs by clicking on tab links.

Code...

Read the entire recipe Recipe added 20 hours, 37 minutes ago

Bootstrap modal overlap

I have implemented bootstrap modal and it is working fine. Here is my code

<div id="myModal" class="modal fade hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header"...

Read the entire recipe Recipe added 21 hours, 35 minutes ago

CSS Hover (header and text)

Is it possible using CSS's hover that when I hover over the header background the h1 and p tags in the header fade and blur and if so how do I do it?

How do I tell my header to blur the text?

My CSS thus far:

header:

.header:hover {
 ...

Read the entire recipe Recipe added 22 hours, 38 minutes ago

How do I override Bootstrap's &lt;blockquote&gt; border-left with a FontAwesome icon in CSS?

When a <blockquote> appears within my div, I would like to override it so that it uses FontAwesome's icon-quote-left as opposed to the border-left: 5px rgb.... value it uses now.

How can I do this using just CSS?

I don't want to use JS - because it...

Read the entire recipe Recipe added 23 hours, 36 minutes ago

Using HTML data-attribute to set CSS background-image url

I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS.
(I would prefer to not have the page styling rely on jQuery if possible)


My...

Read the entire recipe Recipe added 1 day ago