ISInc Navigation

2008 October

Latest Postings

October 31 2008

A question that recently came up in one of my CSS classes was about the California state web template that was created to standardize state websites. The template can be downloaded at webtools.ca.gov and you can see live working copies of the customized versions of the template in many places, including:

The template is distributed with three optional column based layouts. The webpage author can select a style sheet appropriate to the layout they are interested in: one, two, or three columns. One of the problems with the three column layout in the state template is something known as float drop and you will only see it in Internet Explorer (IE) 6.

Float drop is a phenomenon that occurs when you have a floated element on a page and the width of the page become too small to accomodate the floated element and its neighbors. Instead of displaying as they should, one of the elements will drop down below the other content.

For example, see this Department of Transportation webpage at full screen width:

See how the middle column drops down below the right? To prevent this from happening, they have added the following rule to the master css file attached to the state template:

#heading, #navigation, #main_content_1, #footer {
min-width:774px;
}

This means that those four div tags, which hold the main content of the page as well as portions of the header and footer, will never fall below 774 pixels in width. This preserves the layout when the user’s screen width is too small, rather than having the elements stack on top of each other. The problem with this method is that IE6 does not honor the min-width property. Thus, what looks lovely in Firefox and IE7 looks like Figure 2 in IE6.

When my student came to me with this question, I went in search of an answer. The solution I came up with is the following code sample, which can sit anywhere within the head tag of your document:

Internet explorer allows you to embed JavaScript within CSS by using an expression, so we can set the width property equal to the result of an expression. That expression checks to see which value is larger, 774 pixels or the width of the page? Whichever is the larger of the two will be the new value for width. This entire rule is embedded within an IE6 conditional comment (<!––[if IE 6]> … <![endif]––>), so that only IE6 will obey these instructions. Since the expression function is proprietary, the conditional comment also serves the purpose of leaving our current CSS in a standards compliant state. Simply embed this code snippet into the head of your three column pages and voila, no more float drop!

October 23 2008

Microsoft just released an alert to provide you with an overview of the new security bulletin released (out of band) on Thursday, October 23, 2008. Microsoft has released security bulletin MS08-067, Vulnerability in Server Service Could Allow Remote Code Execution (958644), to address a vulnerability in all currently supported versions of Windows. This security update was released outside of the usual monthly security bulletin release cycle in an effort to protect customers. We request that you take action immediately by first assessing and preparing your own systems and networks and applying the security update, then reaching out to your customers to assist them in securing their systems and networks by applying the update.

Details about this security update are below, but here are your key resources:

This security update resolves a privately reported vulnerability in the Server service. The vulnerability could allow remote code execution if an affected system received a specially crafted RPC request. On Microsoft Windows 2000, Windows XP, and Windows Server 2003 systems, an attacker could exploit this vulnerability without authentication to run arbitrary code. It is possible that this vulnerability could be used in the crafting of a wormable exploit. Firewall best practices and standard default firewall configurations can help protect network resources from attacks that originate outside the enterprise perimeter. The security update addresses the vulnerability by correcting the way that the Server service handles RPC requests.

Recommendations

Microsoft recommends that you assess your systems and networks and apply this security update to secure your systems and networks and to help ensure that your computers are protected from attempted criminal attacks.

New Security Bulletin Technical Details

Identifier

MS08-067

Severity Rating

This security update is rated Critical for all supported editions of Microsoft Windows 2000, Windows XP, Windows Server 2003, and rated Important for all supported editions of Windows Vista and Windows Server 2008.

·For Windows Vista and Windows Server 2008: WUSA.exe does not support uninstall of updates. To uninstall an update installed by WUSA, click Control Panel, and then click Security. Under Windows Update, click View installed updates and select from the list of updates.

We recommend that our customers use the Microsoft TechNet Security TechCenter as a key source of security information: http://technet.microsoft.com/security, and that you sign up for comprehensive alerts at http://www.microsoft.com/technet/security/bulletin/notify.mspx. We strive to provide you with accurate information in static and dynamic (Web-based) content. Microsoft’s security content posted to the Web is occasionally updated to reflect late-breaking information. If this results in an inconsistency between the information here and the information in Microsoft’s Web-based security content, the information in Microsoft’s Web-based security content is authoritative.

ISInc Support Options

If you are interested in ISInc support to keep your networks up to date, please contact us at 916-920-1700 to hear about our Managed Services options.

October 3 2008

As I’ve learned to build website layouts purely in CSS, I have come across many hacks or workarounds for debugging browser inconsistencies.One that I never quite understood was the declaration

zoom: 1;

I knew that if I applied zoom: 1 to certain elements, a layout that once looked like the elephant man in Internet Explorer 6 would miraculously turn into prince charming.But what is zoom: 1?And why does it fix my broken layouts?This post is meant to shed some light on these issues without getting into the nitty gritty details.

To understand zoom: 1, we must understand the proprietary property hasLayout, courtesy of Internet Explorer (IE).The hasLayout property is an internal flag in IE that tells the browser whether or not a particular element is a “layout” element.IE makes a distinction between a layout element and a non-layout element in more ways than I can enumerate here. Suffice it to say that layout elements and non-layout elements are treated differently when IE renders the page. I have found that layout elements will interact differently with their floated and positioned neighbors.This usually manifests in strange vertical and horizontal spacing between the elements.

The hasLayout property cannot be altered by the style sheet author.It is internal.It is flagged as true by default for certain elements (like <table>, <body>, and <img>).It can also be triggered by the style sheet author by changing certain properties (like width, height, float, and zoom).

The zoom property is one of Internet Explorer’s proprietary CSS properties that allows the style sheet author to enlarge something.

zoom:2;

The above zoom declaration does as you would expect, it makes something twice as big.Sosince the zoom property will trigger hasLayout, we can use it to force IE into giving certain elements “layout” which can help us with spacing issues between elements.In order to add zoom but avoid any detrimental effects, we just use

zoom: 1;

This keeps the element at the same size while still triggering hasLayout behind the scenes.

To use zoom: 1 to my advantage, my general rule of thumb has been to code my layouts by testing primarily in Firefox (or another standards compliant browser like Safari or Chrome).During the process of coding it, I will periodically test it in IE7 to make sure there are no major hiccups.Usually, I can get the layout working in both browsers without too many hacks. Once the layout is finalized in Firefox and IE7, I test in IE6.If the layout is way off in IE6, I immediately apply the declaration:

*{ zoom: 1; }

which gives “layout” to all elements.This will often fix the major issues in IE6, and the rest is just pixel tweaking with conditional comments.