Short Tag – Web Development Blog

Entries for the ‘CSS’ Category

Border-radius not working on Opera

The border-radius CSS3 property is used to create round corners on elements. Basically you could use it on most elements.

border-radius:10px;

On Opera it will work only if the element you apply it to has display:block, it won’t work on any inline elements.
So, let’s have this link:

<a href="#" class="mylink">Link</a>

Css definitions:

.mylink
{
background: red;
[...]

Handling padding, margin, border position in CSS3 with boz-sizing

Firefox and other browsers (Opera, Safari, Chrome) will place the padding, margin and border outside of the box (div, table or other element) changing the width and height of the element. Internet Explorer will place them inside the box and the width/height of the element will remain the same. You can see how this will [...]

CSS3 cross-browser background gradient

Since CSS3’s gradient backgrounds are fairly new the functionality in all browsers is different.
Here is a sample of how you can achieve cross-browser functionality:

background-color: #2B2B2B;
background-image: mix(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0), 50%);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr="rgba(255, 255, 255, 0.5)", EndColorStr="rgba(255, 255, 255, 0)")";
[...]

jQuery auto height/width

When changing the height of elements with jQuery you will probably have cases when you need to set the height to be on “auto”, so the browser will automatically calculate it’s height.
This is easy to do, see the example:

jQuery(".element").height("auto");

How does the height function work? If the parameter specified is a number the function will apply [...]

jQuery UI Datepicker – change z-index

There are cases when the Datepicker component will not show up, it will be hidden after another element in the page.
In this case you will probably want to change the z-index of the datepicker element. No need to change the source css/javascript code of the component.
This is how the Datepicker works: it takes the [...]

CSS3 input highlight on focus with transition

CSS3 makes your job a lot easier with it’s new features.
For example creating an input that will highlight on focus with animation is an easy task now with CSS3 in comparison with all the work it would’ve needed with javascript and CSS2.
Style all the inputs, textareas and combo boxes:

input, select, textarea
{
background: [...]

Cross-browser CSS code to disable selectable text

Maybe you created your own custom button from divs, or you just want to disable the ability to select text on an element (Usually is used for elements that act like buttons).

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

Use all these selectors on the element. This should work on all browsers.

UL, LI – HTML and Css lists, horizontal positioning

The HTML lists (with CSS styling) are very handy for assembling HTML designs. They are very useful when creating menus, especially for horizontal menus. You could use tables to create a horizontal menu, but tables are overrated, they load harder than divs or lists and they are not good for SEO. You could use divs, [...]