JV Media Design Blog

During the course of putting together websites, a designer will often run into curious problems having to do with code - and making code play nice with the design that’s been created.

Here’s a few CSS tricks to get around some of those things.

Unruly Form Fields
When you need to put a form field in a small space (for instance, a search field), and you drop in the code, and that code makes the cell it’s in larger in height, messing up your design do this: in your < form > tag add the following - style=”display: inline; margin: 0;” . I honestly can’t remember where I found this one, but it works like charm.

Indented Paragraphs
Ever have a client request that their paragraphs be indented? Super easy fix … just add the following to your stylesheet:
p {margin-bottom: 0};
p + p {text-indent: 1.5em; margin-top: 0px}
This will indent paragraphs and NOT put a blank space between them (hence the top and bottom margins at 0). Found this one at the good old w3.org.

Save Yourself Some Typing
If you find yourself writing the same thing over and over again in your style sheet (for instance, say you have a bunch of classes you’re assigning to text on your page and you want all of them to have a left padding of 10px) you can add this instead: * {padding-left: 10px} . This one I found at this one guy’s blog.

Custom Bullets
Don’t want boring old bullets for you list? You can now make your own with the following code:
li {background: url(bulletname.gif) left center no-repeat} This will effectively replace the old bullet. Came across this one doing a search.