User Experience Engineering

Wednesday, May 17, 2006

 

Trebuchet MS + Blogger CSS = IE6 Crashes

For some reason, Internet Explorer 6 began to crash when pages of rootlet.blogspot.com would load. The IE6 crashes stopped after I removed the following:

Two measures could stop the crashes in my test environment. One was to remove the the import of blogger_controls.css, which I cannot do in practice. The other was to remove the quoted font-family "Trebuchet MS" from the inline style for BODY. So IE6 users will see Arial instead.

The crashes were not accompanied by Javascript error messages, and the Microsoft debuggers were not available. The results were consistent on two separate Windows systems, one running Windows XP, and the other running XP Media Center Edition 2005. Have insights into IE6 crashes related to CSS? Please comment.


Comments:
Hey, is there any rule of thumb/pixels/other
about sizing a webpage to fit conveniently on a printed page?
10Q
 
The deal with Web pages is that CSS allows you to define different
rules for print, screen, and projection media. Since many Web devs pay no attention to print, many CSS-styled pages "fly apart" when printed.

I recently needed to make some pages more printable. About 90% of
the task was to set attributes display:none and visibility:collapse for all the navigational wrapper elements, fixed width elements, and ads, which serve
no purpose in print. Beyond that, I used the page rule to take care of the margins. Here's a snippet:

/* print.css */
@page{
position:relative;
display:block;
size 8.5in 11in portrait;
margin: .5in .75in .5in .75;
width:7in;
orphans:3;
widows:2;
page-break-after:avoid;
}

body {
font:normal 11pt Arial,Verdana, Helvetica, sans-serif;
color:#333;
line-height:13pt;
}
img{border:none;}


td.secondInnerCell,#userHeader,
td.secondInnerCell,#leftColumn, #innerColumn,#pageTabs, #pageControls, #siteNav,
#catTags,#activePages,
#search,#footer,#commentForm,
#siteComments{
visibility:collapse !important;
display:none;
}


#siteContent{
display:block;
width:7in;
page-break-inside:auto;
orphans:3;
widows:2;
border:none;
}
#siteHeader{
position:inline;
text-align:right;
width:7in;
padding: 0 0 9pt 0;
border-bottom:1px SOLID #CCC;
}
 
Post a Comment

Links to this post:

Create a Link

<< Home

Archives

March 2006   May 2006   July 2006   August 2006   January 2007   March 2007   April 2007   August 2007   March 2008   April 2008   August 2008   April 2010   May 2010   July 2010   September 2010   April 2011   November 2012   March 2013   December 2013  

This page is powered by Blogger. Isn't yours?