Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

The best solutions are often the simplest. Here's a list of 8 tips that contain only one css property.

1. Vertical centering with line-height

line-height:24px;

When you have a container with fixed height you can use line-height property to vertically center the content.
Take a look at this demo.

2. Prevent oversized content to break fixed width floated layouts

#main{
	overflow:hidden;
}

When oversized content (i.e. wide image) is placed in fixed width floated container, it may break the layout. To prevent that use this trick. It will hide a part of the content but at least your layout structure will remain intact.
I wrote an article about it a while back.

3. Prevent line breaks in links

a{
	white-space:nowrap;
}

This little trick will prevent line breaks on your links. I recommend using this with long text to avoid having links break into 2 lines.

4. Always show Firefox scrollbar

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

Firefox hides vertical scrollbar by default. So, when you browse a site that have different page heights you notice a horizontal shift. This code will always display a scrollbar and prevent shifting.

5. Centering block elements horizontally

margin:0 auto;

For all modern browser this line of css is enough to horizontally center a block level element.

6. Remove vertical textarea scrollbar in IE

textarea{
	overflow:auto;
}

Textareas in IE have vertical scrollbar visible by default. If you want those removed (I know I do) use this line.

7. Force page breaks when printing your document

h2{
	page-break-before:always;
}

With this line of code you can control places where you want your pages to break when printing a document.

8. Remove active link borders

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

Originally found here, this will remove dotted outline from focused or active links.

Do you have any short and brilliant CSS solutions?

Post them here. It would be great to have them collected at one place.

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• Eoghan Murray on 10 Mar, 2008 wrote:

  For a cross browser, validating version of #4 you could try
  
  html{
  overflow-y:scroll;
  }

• Petter on 10 Mar, 2008 wrote:

  Start every stylesheet with * {margin: 0; padding: 0}
  
  This means a little more work as you'll have to define margin and padding on every element that needs it, but you're less likely to be surprised by how one browser applies more/less margin to an element by default, thus breaking your site.

• Niall Doherty on 10 Mar, 2008 wrote:

  Nice tips. To the previous commenter though, I'd recommend NOT using * {margin: 0; padding: 0}
  
  There are better, more sophisticated CSS resets out there. Using * {margin: 0; padding: 0} is a heavy load on the browser, as it will reset margins and padding on every single element, whether necessary or not. Google for Eric Meyer CSS reset. That one's pretty solid.

• Tom on 10 Mar, 2008 wrote:

  I don't like so much the last tip, removing active link borders is not so good for accessibility.

• nikola on 10 Mar, 2008 wrote:

  thnx for tip 3! ... this is new one for me ...

• Rash on 10 Mar, 2008 wrote:

  I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;} basically means "traverse every css element and give it these attributes". That is a very unnecessary strain on the server and a bad semantic practice, as you have to give some elements padding/margin again, after stripping them.

• Jamie on 10 Mar, 2008 wrote:

  a:focus{
  outline:none;
  }
  
  I love this one ~ its really under used and make for a cleaner presentation on clicking links.

• jinesh on 10 Mar, 2008 wrote:

  #2 can also be used to clear floats, use with _height:100% to make IE6 behave :)

• Sean on 10 Mar, 2008 wrote:

  I would only remove the outline from links on certain objects - in particular when building something with Ajax. Otherwise, I prefer to leave it be.

• Shane on 10 Mar, 2008 wrote:

  Wow....I've never known about the page break css to force page breaks when printing! I had a recent project where the client insisted on having certain sections be on separate printed pages...I wish I had known this then, but I'm good to go now! THANK YOU!

• chris on 10 Mar, 2008 wrote:

  great list, hopefully you can keep making it bigger!
  
  but for #1, it only works if you have 1 line of text, anything more it breaks?
  
  any solutions?

• niksy on 10 Mar, 2008 wrote:

  Nice list, thanks for the tips!

• rockoyster on 10 Mar, 2008 wrote:

  Great tips. Don't you mean prevent horizontal shift in #4?

• cssglobe on 10 Mar, 2008 wrote:

  thanks, rockoyster. Corrected!

• john on 10 Mar, 2008 wrote:

  Regarding the removal of active borders and accessibility, as long as you substitute the dotted border with another visible hover & active state, you can have the best of both worlds:
  
  a:active, a:focus {background:#ccc; outline:none;}

• Nate on 10 Mar, 2008 wrote:

  Rash,
  The server doesn't traverse anything, your web browser interprets the markup and css, and while the * reset isn't optimal (see Eric Meyer's reset), it doesn't put any extra strain on your server or your web browser.
  

• mginop on 10 Mar, 2008 wrote:

  img { border: 0; }
  
  is used in all my style sheets to prevent any linked images from displaying those ugly borders.
  

• Andy Gongea on 10 Mar, 2008 wrote:

  For 2 separate floated divs ( x- float:left y-float:right; ) within a container with or without background. You have to add a div befor closing the wrapper with a class .clear { clear:both; } for good visible background.
  

• Darren Hoyt on 10 Mar, 2008 wrote:

  Great points. For #4, you can also use:
  
  body,html {
  min-height:101%;
  }

• Jeff on 10 Mar, 2008 wrote:

  .right{float:right;}
  .left{float:left;}
  
  This allows you to quickly float anything right or left, I mainly use within the content area.
  
  Also, a HUGE thing I do is at the top I put my color scheme. I put a color description and hex. I'm always sure to put a pound and a semicolon so when I copy and paste I don't have to add that stuff. See below:
  /* COLOR SCHEME
  dark blue #112730;
  lighter blue #EEF2F2;
  lime green #D6FB00;
  */

• Jess on 10 Mar, 2008 wrote:

  Hi Jeff
  personally I disagree with classes named left and right, this does not encourage well thought-out markup and stylesheets. It also does not add any semantic meaning to the markup, class names should be representative of the content they hold and not the visual appearance that way you can change the design at anytime without changing the html. IMHO class left and right is simply bad practice, the same goes for class=blue or red or green etc, I.E. anything that represents the visual look.
  Jess

• Miller Medeiros on 11 Mar, 2008 wrote:

  /* redefining font-size to work with Em as it was Px */
  body{ font-size: 62.5%; }
  
  i use it when i want to set the sizes using EM.. this way 10px will be 1em and 18px will be 1.8em..
  
  cheers..

• Brian Rock on 11 Mar, 2008 wrote:

  As mentioned before, overflow-y is an alternate solution for forcing a vertical scrollbar in Firefox. It's not compatible in every browser, but it's CSS 3 compliant - so in theory it should be compatible in most browsers someday.
  
  @Jess, I think classes like alignLeft and alignRight can be very appropriate. What if I alternately align images on a page to the left and right? Should I re-define the entire class of image twice, so that I have a left and right alternative? Or should I give it two classes, one with the type of image, and one with the correct alignment?

• vista bbs on 11 Mar, 2008 wrote:

  Great points. For #4, you can also use:
  
  body,html {
  min-height:101%;
  }
  

• Karim on 11 Mar, 2008 wrote:

  a:focus{
  outline:none;
  }
  
  I hate this one ~ thanks god it's under-used. It exists for a reason: accessibily.

• Zoznam Horoskopy on 11 Mar, 2008 wrote:

  Very know, but useful tips.

• hasan on 11 Mar, 2008 wrote:

  very useful tips
  u can give link on div
  like :"

  "
  

• hasan on 11 Mar, 2008 wrote:

  <a href=""><div></div></a>

• James on 11 Mar, 2008 wrote:

  Hasan: why bother with the div at all? Just do
  a {
  display : block;
  }

• Mike Cherim on 11 Mar, 2008 wrote:

  Good tips.
  
  For number 8, you really should add that this should only be used when link focus/active styling (like a background-color) is added. Link outlines are pretty weak for keyboard accessibility, but better than nothing, so you should emphasize the need for added styling --- to avoid leaving nothing.
  

• jerang on 11 Mar, 2008 wrote:

  For #3 whitespace: nowrap; doesn't work right in IE6. You would be surprised how many people still use it, despite the fact IE8 is coming out soon.

• Jeff on 11 Mar, 2008 wrote:

  @Jess, right and left are very necessary and speak as much about an object as a "clear" class does or an "adr" class does for a div in microformat. In addition, Brian Rock makes a good point, that not having these classes would force us to create redundancies within our CSS. Isn't that a part of our job? To increase efficiency?

• Jonathas Scott on 11 Mar, 2008 wrote:

  For a "auto" centered block on IE:
  
  body{
  text-align: center;
  }

• Arkrep on 11 Mar, 2008 wrote:

  Nice post,
  
  I honestly thought that I would find anything I already use, but you've posted up some tricks I didn't know..
  
  Thanks
  

• hung on 11 Mar, 2008 wrote:

  toi yeu em va` toi chi/ biet yeu em^___^

• Mike on 11 Mar, 2008 wrote:

  @Jess,
  I agree with Jeff, as long as nothing else is added to the .left and .right classes, as they are structural, not merely presentational like .blue etc.
  I also make use of a singe-purpose class: .noPrint - I presume I don't need to explain that one?

• Thomas Thomassen on 11 Mar, 2008 wrote:

  I strongly recommend NOT to use tip #8. That little dotted frame is the only thing to indicate where you navigate on a page when you use just the keyboard. Removing it causes accessibility issues.

• john on 11 Mar, 2008 wrote:

  @Karim, @Thomas, etc.
  As I mentioned already, there's nothing wrong with removing the dotted lines from links, as long as you use something else for your visible hover & active states. I find the dotted lines annoying...but changing the font color, adding a background color, etc will still make your site accessible. Why keep a default style when it can be changed without any harm done?

• Bjarni Wark on 11 Mar, 2008 wrote:

  img { display: block }
  
  This will remove any white space beneath an image, as images are inherit as an inline element, the space below is created for descenders, eg g j. display: block will remove that space, making it flush with the image.

• Jess on 12 Mar, 2008 wrote:

  @Brian
  
  I get where you coming from, and it does depend on the situation, my major problem with it it the overuse of if, I do uses classes left and right myself but gripe is with people who use .left and .right to float EVERYTHING - i have worked on projects like that in the past and its a big PAIN.
  
  @Mike i disagree that left and right are structual - it is presentational as the structure of html is simply top to bottom. There are some cases where presentational classes are required.

• Joseph R. B. Taylor on 12 Mar, 2008 wrote:

  There's always someone who love to extol the values of completely proper markup. My markup is clean minus the occasional div that performs different clearing tasks. I use 3 classes in my global stylesheet: clear, clear-left and clear-right. I should be obvious what they do.
  When the day arrives that I don't have to force clear floats in such a haphazard manner I'll be happy to climb on the soapbox myself.

• Darryl on 12 Mar, 2008 wrote:

  Assuming you are already setting font-size in ems, I use the following to keep the size inheritance within nested lists (that is, to prevent any compounding size changes of nested items) :
  
  ul ul,
  ul ol,
  ol ol,
  ol ul,
  ul p,
  ol p
  {font-size:1em;}
  

• fwolf on 12 Mar, 2008 wrote:

  a better approach to short-hand text-alignment and floats are the ones I normally use:
  
  
.tx-l {
text-align: left;
}
.tx-c {
text-align: center,
}
.tx-r {
text-align: right;
}
  
  tx can be easily identified as derived from the
  word text.
  
  
.flt-l {
float: left;
}
.flt-r {
float: right;
}

  
  flt as in float ;-)
  
  cu, w0lf.

• Steph on 13 Mar, 2008 wrote:

  white-space:nowrap;
  ^ That's just...nifty. Just helped me out on a friends project today!

• autoapproved on 13 Mar, 2008 wrote:

  Re: #8 - I was surprised that this wasn't mentioned, but you usually want to remove the online because you have redefined further down. Removing it completely (as others have already pointed out) is an accessibility problem.
  
  Not to mention the times that my wireless mouse dies and I browse the Internet in keyboard-only mode! :)
  

• glove on 13 Mar, 2008 wrote:

  i have a jump menu's width controlled using CSS..
  in firefox, any item that's longer than the menu will be shown, but in IE6, it forces the width, regardless if the item's width is longer than the menu.. is there a workaround for this in CSS?

• Mel on 13 Mar, 2008 wrote:

  @Brian style img with a default style (say float:left) than make a class called alt and style it with the alternative style (float:right), that would be far more semantically correct. Most of the time i also find classes named left and right to be unnecessary, occasionally they might be but i'll only resort to them when absolutely necessary, usually i try find a more semantic approach for markup and class names. However this is more personally approach and as long us the markup is clean and easy to interpret than its fine.
  
  I agree a clear class(es) is defiantly a necessary evil that we must use at times, though i prefer to clear on the (content) container below if possible this is not always possible, you may not have a container below your floated elements or it may simply just not work the way you want therefore making

  necessary.

• Harry on 13 Mar, 2008 wrote:

  Hi,
  An nice set of suggestions.......but novices like me can learn even more by watching the debate about the relative merits of the various ideas people propose.
  
  

• Jeff on 14 Mar, 2008 wrote:

  @Mel - How is a class of alt for changing float (alignment) a more semantically correct example? Albeit intuitive and a sharp way to do things I do not see how that is "better" than .right or .left for content area pictures.

• Mel on 14 Mar, 2008 wrote:

  @jeff I guess it just depends on what you are doing, this is the approach i tend to use when alternating styles, my reason being is i probably wouldn't put the class on the image itself but the containing div as i may have other styles within the div alternating also.
  
  Like i said its just my personal approach, I rarely find it necessary myself for .right and .left (sometimes i do use them). One area where i may have a .right and .left class on images is if i am not necessarily alternating but just randomly floating left or right throughout content.

• tedd on 14 Mar, 2008 wrote:

  Nice tips. Nice presentation.
  
  I like using variables in my css, those interested can read about it here:
  
  http://sperling.com/examples/pcss/
  
  Question -- why not validate your article?
  
  tedd

• optimas on 14 Mar, 2008 wrote:

  Some good info on here - for the beginner! With a nice question from Tedd might I add. And the answer??
  
  regards

• David Hucklesby on 15 Mar, 2008 wrote:

  Bjarni Wark suggested "img { display: block }"
  to remove the gap under images. Another suggestion is "img { vertical-align: bottom; }"
  - Useful for situations where display: block; is not convenient.
  

• Bono on 15 Mar, 2008 wrote:

  Avoid duplication of margins of floats elements in IE6
  selector {display: inline;}
  
  regards!

• Jose M Estrada on 17 Mar, 2008 wrote:

  Set position as "relative" to any element with borders and/or images as background to allow IE6 shows them properly. Example:
  
  h2 {
  position: relative;
  border-bottom: 3px solid #ccc;
  background: url(image_folder/background_image.jpg) no-repeat;
  }
  
  By setting relative position you will fix the bug in IE6 that makes background images and borders to disappear while scrolling up and down the Web document. We used to set a fixed height to avoid this problem in IE6, but We just noticed that the problem is solved just by position the element as "relative".
  

• Mat on 17 Mar, 2008 wrote:

  Hi there
  
  Just wondering with #4 (Always show Firefox scrollbar). Have any of you tried this and then resizing your browser's width less than your design. When I do on a design that has this css line included the horizontal scrollbars do not appear?
  
  Is this just me ? I know we don't normally test this as designers we're used to big wide screens and high resolutions ;)

• Mike on 17 Mar, 2008 wrote:

  >> Start every stylesheet with * {margin: 0; padding: 0}
  
  No, no no no no. This resets form-based styles and makes them *unsettable* through css. Bad. BAD!

• Nix on 17 Mar, 2008 wrote:

  Great tips! Luv them. Keep it going.

• Vall on 17 Mar, 2008 wrote:

  Thank you for the tips. :) Some are very, very useful. I included a link to this article on my blog in "5 great design articles on the web…". Cheers!

• allen plumber on 20 Mar, 2008 wrote:

  I’ve never really played with the CSS overflow property, partly because I don’t trust it to work in a decent number of browsers.

• Terra on 23 Mar, 2008 wrote:

  overflow:-moz-scrollbars-vertical;
  ... this should not be used as it disables the horizontal scroll-bar. The definition of this command is:
  -moz-scrollbars-vertical: Indicates that vertical scrollbars should always appear and horizontal scrollbars should never appear.
  
  For more information, please see the Mozilla website:
  http://developer.mozilla.org/en/docs/Mozilla_CSS_Extensions#overflow
  
  The use of this command is therefore not recommended, as you cannot guarantee that horizontal browsing is never needed. Even with narrow sites, users may have their browsers not set at max resolution, thereby needing the horizontal scrollbar.
  
  Plus, given how this advice is presented (not just in this article but I've seen this on many other sites), web developers may not be aware of the impact on the horizontal scrollbar & the resulting problems.

• Rob Knight on 24 Mar, 2008 wrote:

  With regards to the last tip: If you are going to remove the :active pseudo-class border, for accessibility reasons, please use :focus along with :hover so users navigating via keyboard can see links as they tab to them. Not indicating to the user where they are on the page when tabbing is a big no-no. I say this because this is how I navigate page links and it is rustrating to not know what link has focus on a page.

• Kyle Meyer on 25 Mar, 2008 wrote:

  Start every stylesheet with * {margin: 0; padding: 0}
  
  No. That will badly distort select elements, you should never use a wildcard selector to do a browser reset. Instead, you should use a more thorough reset that won't do any damage such as Eric Meyer's Reset.

• toomo on 26 Mar, 2008 wrote:

  erase blue border when apply <a> tag to <img>
  img { border: none; }

• max on 31 Mar, 2008 wrote:

  really cool list, just bookmarked! ;)

• aj on 1 Apr, 2008 wrote:

  hi, thanks for this useful tip.

• Tetris on 2 Apr, 2008 wrote:

  *Regarding Example #1
  
  I am trying to do a vertical align on a dynamic content where it can sometimes be just one line of copy (like this example), but in some instances I have a second line of text under neath. How can you achieve this vertical align effect with the scenario given? Hope someone can help me~
  
  Thanks

• todotutoriales.es on 3 Apr, 2008 wrote:

  a {
  outline: 0;
  }

• BabyBusiness on 4 Apr, 2008 wrote:

  That's a great list baby! I've struggled with floats and margins for a long time, but you just gave me the answers to work with. Great comments too :)

• Ralph on 4 Apr, 2008 wrote:

  Great... There are no 8 Premium One Line CSS Tips, but extremly more in the comments ;)
  
  Especially in the comments i get much good ideas to think about the topic of cssglobe.
  
  Ralph

• Jill on 5 May, 2008 wrote:

  that was a helpful hint in solving the problem...

• Ivo on 25 May, 2008 wrote:

  Just great article, some of the stuffs I knew about, but man lots of them were unknown to me... thanks a bunch !

• Orides Tomkiel on 28 May, 2008 wrote:

  very nice and useful
  thank you

• Alfred Yok on 14 Jun, 2008 wrote:

  I honestly thought that I would find anything I already use, but you've posted up some tricks I didn't know..

• hovvers on 19 Jun, 2008 wrote:

  Really cool list, just bookmarked!

• hindinf on 19 Jun, 2008 wrote:

  is used in all my style sheets to prevent any linked images from displaying those ugly borders.

• sannyc on 19 Jun, 2008 wrote:

  hi, thanks for this useful tip.

• Firebubble Design on 27 Jul, 2008 wrote:

  Thanks for number 2 + 3 I have had problems with both of these before.

• Your Seo Firm on 30 Jul, 2008 wrote:

  6. Remove vertical textarea scrollbar in IE
  
  Thanks for this one!!