fixing IE checkbox padding/margin

Support for CSS is built in to every modern browser so theoretically we shouldn't have to deal with too many layout issues. Unfortunately, a lot of browser specific quirks still exist. One I've dealt with recently is getting a checkbox to line up exactly to the left of a div. Setting the left margin and padding did not work in IE and I was going to try really drastic measures like setting float or absolute positioning until I found a really easy solution. To fix the extra padding for checkboxes in IE, we just need to give the checkbox a fixed width. I've summarized the results in the table with some screenshots. The markup I want to style is:

<div>
<p>some text before</p>
<input type="checkbox"/> checkbox 1<br/>
<input type="checkbox"/> checkbox 2<br/>
<p>some text after</p>
</div>

FireFox	IE	CSS	notes
		div {border: solid 1px #000;width:150px;} p {padding:0;margin:0;}	no styling on checkbox
		div {border: solid 1px #000;width:150px;} p {padding:0;margin:0;} input {padding-left:0;margin-left:0;}	style checkbox to have no left padding or margin. only Firefox behaves as expected
		div {border: solid 1px #000;width:150px;} p {padding:0;margin:0;} input {padding-left:0;margin-left:0;width:15px;}	added a fixed width and now IE7 looks fine too!

IE printing problems and how to fix them

I work at a pertty high traffic site and we get immediate feedback from users if a problem occurs. A popular section of the site is our library of articles. Like other sites, we offer a "print view" of the article that does not contain ads, headers, and footers. Our IE uesrs, however, were having problems printing the article out on their printers. The rightmost side of the content was being chopped off even though it looked fine on the screen. I wasn't aware of this problem since I'm a firefox user but it made its way to my JIRA task list under blocker status so I promptly investigated the problem.

A quick search on Google revealed that this was a common IE printing problem and after refining the search I discovered the IE printing problem described by the IE programmers themselves. The problem was partly due to HTML designers but IE also deserves some of the blame as well since printing is fine on Firefox. I delved into our html markup and gutted a lot of unnecessary tables and invisible images used to control width that really seems prehistoric in these web 2.0 times. I pushed the fix live quickly and maybe..just maybe... saved some paper from having to be recycled or tossed out.

if you ever run into a problem printing a page out in IE, and you don't want to download firefox (why not?), these are the links to third party solutions that the IE bloggers recommended:

• Internet Explorer Fitted-Width Printing
• Power Team's HTML Printing
• FinePrint

espn's redesign + my first homepage

Espn's front page has gone through another design iteration. This is how it used to look. It was only a matter of time since they've been testing a similar look on their sport specific homepages. I like it a lot..check it out when you get a chance...the days of a left navigation bar are slowly fading away. Since it's been eliminated, more space is available for content. The readability of the top story and headlines, the main content I go to the site for, are much easier to read because of the extra space and size. On the tech side, I know they were early adopters of css and xhtml so I'm guessing that this design change wasn't as difficult as the first time they went xhtml and css.

My approach to css is quite pragmatic. I use it whenever possible but If I have to employ too many hacks to get it to look right in a certain browser, I will ditch it for a universal solution like using tables for layout. In fact, when I coded up the test score and census display for work, I went with tables because I needed total confidence that the achievement pages would render correctly for older browsers and drawing complex ,vertical bar charts whose display is CSS based is impossible without hacks.

on a separate note, I found my old college webpage while looking at the early espn pages. be sure to check out the random quote that appears on the bottom of the page.