I am working on a website with content flying from the left to the center. When the animation starts, the horizontal scroll bar is shown and then disappeared as the animation completed. This causes a little shake on the content movement. A simple workaround is to disable the horizontal scroll bar by setting the body overflow-x to hidden.
body {
overflow-x: hidden;
}
Done =)
Reference: StackOverflow – Disable browsers vertical and horizontal scrollbars
Here is an example which styles an HTML a link with a rounded corner button background.
Continue reading CSS3 – Rounded corner button background
I want to style the form elements such as radio button, checkbox or selection list. Google shows me a very good tutorial written by Ryan Fait.
Las Vegas Web Design – Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements
In the above tutorial, those form elements will be replaced by a span element. It works great. Only 1 minor problem which is those span elements could not align well. So i made some change on the CSS. Here is my example.
Continue reading Styling checkbox and radio button with CSS and Javascript
Use the following code to set image opacity.
.imgClass {
opacity: 0.5;
filter: alpha(opacity=50);
}
Continue reading CSS – Set Image/img Opacity with Mouseover Effect
use the following CSS to disable the textarea resize.
textarea {
resize: none;
}
Done =)
It always takes some times for the browser to apply the CSS styles on the rendering page. Therefore, users may observe a style leap before the page is completely loaded. We could fix this problem by hiding the body anchor until the Javascript and CSS are loaded.
First, set the visibility of the body anchor to hidden. Continue reading CSS & jQuery – Hide the HTML page until the Javascript & CSS styles are completely loaded
A scroll bar could be added to a div by applying the overflow property in CSS.
.scrollable {
height: 100px;
overflow-y: scroll;
}
I always install Fusion theme as base theme in Drupal development. It supports a 960px fixed width and a 100% fluid theme. 960px theme is very common now but what should we do if we want to define our own fixed theme? Here is a very good tutorial i found @ fusiondrupalthemes.com Continue reading Drupal Fusion Theme – Customize Grid Definition
It’s about the greatest browser, Internet Explorer, again!
In IE7, sometimes i found that some HTML elements are gone. But if i uncheck and recheck any CSS style in Developer Tool, they will return back on the screen. Continue reading CSS – Missing HTML Element in Internet Explorer 7
We can remove the text on a HTML button by adding the text-indent css attribute on the button class. but this does not work in Internet Explorer 7. Continue reading CSS – Remove Button Text In Internet Explorer
Eureka! 