One Line CSS Magic

No need to mention CSS is awesome. Here one line css magic. Its pure beauty of CSS that gives life to the website and makes it lively. Yes, it’s not simple to write CSS for newbie and even professionals sometimes gets stuck because of cross browser issues. Sometimes, One line in CSS can be more than a magic providing solutions. I reviewed some of the CSS files and came up with some one line CSS.

Below are list of one line CSS. One line CSS mentioned below may or may validate web standards and web accessibility rules.
1. Set default margin and padding to all elements

* {margin: 0; padding: 0}

Every element that have not assigned margin or padding will have default value of above.
Some CSS designers argue that this is not necessary at all because all CSS element at the end will have their assigned value.
2. Set image border to zero

img { border: 0; }
a img { border: 0; }

This can be used to prevent any linked images from displaying borders.
3. Remove Firefox’s link border

a:active, a:focus { outline: 0; }

This removes dotted outline from focused or active links on firefox.
4. Scrolling Render IE

html { background : url(null) fixed no-repeat; }

5. Prevent line breaks in links, over sized content to break

a{ white-space:nowrap;}
element { overflow:hidden; }

This trick prevents line breaks on links.
6. Centering block elements horizontally

element { margin:0 auto; }

This one line CSS horizontally centers a block level element.

For IE less than 7, following line should be added though.

element { text-align: center; }

7. Show Firefox scrollbar

html{ overflow:-moz-scrollbars-vertical; }

8. Remove textarea scrollbar in IE

textarea{ overflow:auto; }

Share this:

Related posts:

  1. How to make rounded corner textbox using css
  2. How to Build a Top Sliding Login Panel
  3. Facebook-to-let-others-play-in-its-stream
  4. Get back the old address bar in Firefox3

How to make rounded corner textbox using css

I’ll explain to you how to make the rounded corner textbox using a image and css. Text box is placed over a container element whose background image is the key of the rounded corner textbox.

This is the image which I’ve used in my example, don’t click and start typing it just a image for now.
css-round
Now let’s look at the html and css code to display rounded corner textbox.

HTML Code for rounded corner textbox

The container “div” contains the background image of rounded corners and inside of that the real textbox resides.

CSS Code for rounded corner textbox:.loginboxdiv

{
 margin:0;
 height:21px;
 width:146px;
 background:url(login_bg.gif) no-repeat bottom;
}

.loginbox
{
 background:none;
 border:none;
 width:134px;
 height:15px;
 margin:0;
 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}

The above CSS code is straight forward, the height and width of the class “loginboxdiv” should be exactly same as the above image which is of “146X21″ pixels. The class “loginbox” is the class of the textbox. As you can see in the css, border is removed and height , width and padding are managed according to the size of the background image.

Working Example- You can type in the rounded corner textbox:
css-round

by roshanbh