Oct 9 2007

My CSS Reset & Why Not to Use *{…}

When I decided to redesign BodyMod.org, my main concern was optimization and speed. That’s why I moved from Classic ASP to .NET, and from Table designed structure to CSS / Div structure.One of the things I learned right off the bat was to clear out the margins and padding to 0px for everything to ensure cross-browser compatibility. The first way I did this was from a quick hack that I found in someone elses source:

*{margin:0px;padding:0px}

This was my first “CSS Reset”. Then I started doing a little more research on this when a friend of mine informed me about an entire file for resetting CSS. Also in my research I found a nice little article about why not to user *{} in anything. the jist of it is that it puts a lot of strain on the browser to process whatever you put into it against everything. Made sense, and when I took it out, it did run a little quicker. So, I ran across a reset file that Yahoo! was using as part of their YUI framework, and I just borrowed that. I mean, c’mon, if Yahoo! uses it, it can’t be too bad.Here’s my reset file in all it’s glory:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset,img {border:0;}address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}q:before,q:after {content:”;}abbr,acronym { border:0;}

no comments | posted in CSS, General

Oct 9 2007

Getting 100% Height in IE with CSS

Recently I’ve been playing around with various javascript frameworks, but they’re all really bloated. Granted, they have a lot of cool effects, but I don’t want to include all that crap within every page of my site. So, I’ve been kinda developing my own tools as I go. Once of the more recent ones is my own lightbox tool for displaying images and small ajax pages. The issue that I was having in IE6 is that the transparrent background wouldn’t stretch the entire height of the screen. So here’s a little hack / fix that I put in place. So far so good:

html, body {height:100%;}

Since html and body are block elements, I give them a height, so all reletive object within it have a reference point =)

no comments