Home ›

css

Don't Neglect Your print.css file!

Submitted by oscatholic on Thu, 05/20/2010 - 10:43am
in

I just spent a few hours working on making a better print.css file for the Archdiocese of St. Louis' website, and, imho, it was time very well spent.

In a meeting just last week with the St. Louis Review staff, I noticed that three different people on staff had printed out pages from archstl.org, and those printed pages looked like junk. I had neglected spending much time with the Archdiocese's print styling (in a print.css file) when I originally designed the site, and I decided it was time to work on it a bit.

I first hid all non-essential elements (graphics, search, navigation, sidebars), then worked on styling the main body of the page a lot nicer. Now, it prints relatively well across Safari, Chrome, FireFox, and Internet Explorer. However, there's a weird bug in FireFox that causes some pages to print with a blank leading page, then with cut-off content on the second page.

Online vs Printed Layout

At least it looks pretty :)

I think you'd be surprised how many people print out articles and pages from your website—especially if your site is heavy on written content. It's a good idea to cater to them just as you would to mobile readers and those using less-than-ideal browsers (<cough>IE</cough>).

Oh IE, how I Hate Thee

Submitted by oscatholic on Tue, 12/15/2009 - 2:43pm
in

Oh Internet Explorer... how many times have I encountered your nasty little bugs? How many hours have you caused me to lament the fact that you exist?

Today I was working on a design for the upgraded Archdiocese of Saint Louis website (more to come in the future!), and encountered a nasty little bug in Internet Explorer having to do with CSS list positioning. Apparently, if you define an a element inside a list with "display: block," but don't set a width on the parent element (the li, and then the ul, in this case), the li elements will get an extra few pixels of margin applied below each list element.

The fix is to add a couple lines to your IE-specific conditional stylesheet (for IE 7 and below only—IE 8 fixes this bug), as outlined in this article.

Thank you for wasting another hour of my time, Microsoft.

End result:

Archdiocesan Archives Menu

Random Bugfixes for Internet Explorer 6/7

Submitted by oscatholic on Fri, 08/21/2009 - 10:48am
in

For the better part of two days, I was working on making a new design (currently here) for the Archstl.org website display correctly in Internet Explorer. There were a few bugs that took me hours to solve, so I thought I'd share here my solutions (note: 'good browsers = all browsers but IE').

Archdiocese of Saint Louis final design screenshot

Above: the final screenshot - I'll be working now mostly on little tweaks, and on porting this design to a CMS theme...

The z-index property - fine in good browsers, bad in IE

The first major problem I encountered was a bug in IE 6 and 7 - the 'mega menus' were appearing behind the jquery-enabled scrolling ads. I fuddled with z-index values quite a bit, and found a way to make the mega menus appear over the ads themselves, but the green arrow buttons were still appearing on top of the mega menus!

After a few hours of reading many different opinions of IE's support for z-index (or lack thereof), I finally found that the parent element of whatever div isn't being displayed correctly must also have a higher z-index than whatever you need to have appear behind it. Continue Reading »

Why OSC Looks Different in Explorer

Submitted by oscatholic on Sun, 06/28/2009 - 5:43pm
in

If you're like me, you run multiple browsers; FireFox, Safari, Camino, and (last, and certainly least) Internet Explorer... actually, all three of the past versions of IE: 6, 7 and 8. And, if you have any ability to see, you'll notice that there are aspects of the site that look different—most notably the navigation buttons, the sidebar sections, and certain other elements.

The reason for this has to do with a principle embraced by those interested in making the web a better place: progressive enhancement graceful degredation [see comments below]. Basically, what this means is we develop the best website we can, and make it look great in the most standard and open way possible, and accept that the website might not look as good in older/less-compliant web browsers.

If you open the website in Safari (or any other standards-compliant browser!), here's what you'll see:

Open Source Catholic - Rendered in Safari

  Continue Reading »

Syndicate content