3 CSS issues I encounter with every layout
Posted by admin | Filed under CSS
Like many developers I’ve taken a PSD and created a website template from the image dozens of times. And like many developers I’ve got a set of steps that I follow each time. I also know that most developers have slightly different set of steps which is what inspired me to write how I solve three pretty common CSS issues I encounter when I create a website template. These aren’t original solutions, I’ve either read about them or been told about them by other developers. But they’re in my toolkit and I use them consistently without even thinking about them. To me they have become a part of how I write CSS and I realized after being asked a question about a CSS sheet I wrote that not everyone may have encountered them, especially those just starting out.
So here’s my top three (two are pretty standard and one is a little obscure). I’m sure there are many more, feel free to add yours in the comments.
ie whitespace bug
symptom: you’re making a list and have large amounts of padding between your list items. This frequently occurs when you’re using a list for your navigation.
solution: There are many documented solutions out there. My first line of defense is to add display:inline to the <li>. You can also just remove the spacing in your actual HTML code so that your list looks like so:
<ul>
<li><a>First Item</a></li><li>
<a>Second Item</a></li>
</ul>
I don’t like this method simply because it makes things a little harder to read and can be accidently broken if you make an edit down the road and don’t forget to keep the spacing that way. For this reason I tend to use display:inline whenever possible.
ie double padding on floats
symptom: you’re building a layout and float an element and notice that the padding or margin is double the value you’ve typed.
solution: add display:inline to your element. For this example I’m using a div with an id of “container”.
css:
#container{
float:left;
margin:10px;
}
A special note about this bug. It only occurs if you have margin/padding on the same side your float is applied. So if you’re floating left and have padding left you will encounter this issue but if you’re floating left and have padding on the right everything should render as you intended.
button element in ie
This is the obscure one. When I create a form I like to use the HTML < button > element for my submit buttons. I tend to do this so I can style all my input elements (fields, checkboxes etc) one way and then have a unique submit button that I can style without overriding all my general input styles.
Anyway, I’m often asked to create graphical submit buttons. In it’s most basic implementation (no rollover effect) I’ll save out an image and place it in the button like so.
<button><img src = "myButton.png"></button>
Unfortunately good old ie has some very odd padding within the button element often making a light grey background and or border appear around the button. The fix is simple and involves adding overflow: visible to the css on the button element.
button{ overflow: visible; }
