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.
Read the rest of this entry »
IE7 Double Padding on Clearing DIVs
Posted by admin | Filed under CSS
About a week or so ago I encountered a new CSS issue that only was present in IE7 that I was surprised I hadn’t run in to before. Actually I was more surprised to encounter an issue that was only present in IE7 and fine in IE6. Maybe its just me but those bugs seem few and far between.
I was doing a simple two column layout and using my footer to clear the two columns which were floated left. Easy enough. The problem came in to play when I added some padding to the top of my footer which when displayed in IE7 was doubled. Right away my mind jumped to the well documented double float margin bug present in IE6. The solution to that one is to add “display:inline” to the float container and all is well. Unfortunately that did not work in this case BUT a small adjustment to “display:inline-block” did the trick.
Before:
#footer{
clear:both;
padding:15px 0;
width:800px;
}
After:
#footerBox{
clear:both;
display:inline-block;
padding:15px 0;
width:800px;
}
When implementing the solution on actual site files I prefer to apply the “display:inline-block;” rule with conditional commenting. However having the rule in the main CSS does not appear to cause conflicts in any other browsers I test on (Safari, Firefox, IE6) so its a matter of personal preference. Personally I strongly dislike IE and relegate all IE specific fixes etc to their own CSS that is included via conditional comments.
Tags: browser compatability, CSS