Browsers

Styling SharePoint with Attribute Selectors and IE6

Heather Solomon — Mon, 09 Mar 2009 14:40:41 GMT

I recently posted some methods for styling SharePoint web parts using attribute selectors. I heard back from several people about how they can't use this option due to IE6's lack of support for attribute selectors. I was aware of this at the time of the post but neglected to point it out in the post text.

IE6 usage is steadily dwindling (Jan '09 - 18.5% browser market share; source: W3). I know there is also internal use of IE6 throughout organizations, but this is also slowly receding.

CSS is usually about form, not necessarily about function. I encourage people to focus on the most common denominator and not the least common denominator when testing and styling web pages for browser support. If attribute selectors or any other type of method works for the mass majority of your users, then use it. Don't make development harder and more time intensive for the sake of a smaller percentage of users. Having your web pages downgrade gracefully does not mean the web page has to look exactly the same in every browser. You do have to decide what must match visually across all browsers, but ultimately the focus is displaying the content and not what color the text is, etc.

You can also use conditional comments in IE to provide JavaScript or CSS files that are targeted for IE, or even a specific IE version. Learn more about conditional comments here. This method can be used in workarounds and styling differences or even providing a simpler interface for IE6 users.

There are a few posted workarounds for attribute selectors and IE6:
Simulating Attributes Selectors in IE6
CSS + Javascript Workaround for Styling Form Inputs in Internet Explorer (IE)

One last comment before the angry mob hits, I understand that there are situations out there where you have to support IE6. They are the mass majority of users for your site, etc. Attribute selectors aren't the only solution, just an option. Meanwhile, keep encouraging those sites/projects/people to leave analog and join the digital age before we toss their computer monitors out. ;-)

DOCTYPES and SharePoint

Heather Solomon — Fri, 25 Jan 2008 17:28:39 GMT

I got asked by two separate friends of mine just within a few days of each other if I had any recommendations for what DOCTYPE tag should be used in SharePoint. Honestly up until that point, I had not put a lot of thought into outside of the attitude of look up whatever A List Apart recommends and use that. So I delved into it a bit more and now I do have an opinion on the matter.

A little info first, DOCTYPE is short for Document Type Declaration. A DOCTYPE associates a web page with a Document Type Definition (DTD). The DTD is the definition of the particular version of HTML or XHTML you are using in your site and is what will be used for rendering of the web page. For DTDs, there are generally 3 types, strict, transitional and frames.

Strict means there isn't presentational elements in your code, such as formatting and alignment. Instead everything has be to controlled separately in the CSS. Transitional allows both CSS and presentational elements in the code. Frames, well is for frames and if you are still using those we need to chat. :-)

Based on your DTD and what browser you are viewing your site in, your page will render in Standards mode or Quirks mode. Standards mode renders the page based on the DTD you defined. Quirks mode will render the page the best it can while emulating older browsers. If you don't define a DTD to use, the browser will default to Quirks mode.

So what about SharePoint? First off, note that default.master does not specify a DTD! The publishing master pages (blueband, blackband, etc) use the HTML 4.0 Transitional DTD that renders in Standards mode.

For my base master pages, I put in a DOCTYPE that uses the HTML 4.0 transitional DTD that will render the site in quirks mode. Why? It is the lowest common denominator and appropriate for the general use of the master page. This is not to say this is the DTD you should be using for your site. Ultimately, you need look at the site's target audience and purpose and select a DTD based on your individual site needs.

However, I do think Transitional DTDs should be used since there is a lot of rendered code with out of the box SharePoint that you don't have control over, therefore your page will have presentation elements in the code and not solely use CSS for formatting. That and Transitional is best when you use tables for page layout. Tables vs. CSS positioning wars aside, out of the box SharePoint makes heavy use of tables for layout so stick with the transitional DTDs.

I personally don't use the XHTML DTDs because I have yet to see justification for using them, and I get a bit worried about the fact that XHTML 1.0 won't be supported in XHTML 2.0 and vice versa. It seems to me if you go with a XHTML DTD, you are limiting yourself. But again, this goes back to what does your site need, not what makes me nervous.

Another important thing about DTDs, is you need to select one BEFORE you delve too deep in developing your user interface. The DTD you specify in the DOCTYPE tag will affect how your page is rendered, so don't write a bunch of HTML and CSS and then apply or change the DTD, many of your page elements could go out of whack and you will have to rewrite some of your code.

Here are the two DTDs I think are best for SharePoint:

HTML 4.0 Transitional in Standards Mode (use this one if you can):
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.0 Transitional in Quirks Mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN">

Here are some additional resources:

UPDATE 1/25/08: Well DOCTYPES must be in the air, Waldek Mastykarz just posted about DOCTYPEs as well, and recommended the use of XHTML 1.0 Strict or Transitional DTD. He talks about his reasonings and the benefits, drawbacks and challenges with this approach. For a different viewpoint, read his article here.

UPDATE 3/10/08: Randy Drisgill has tested SharePoint in the next version of Internet Explorer, IE8, and has a recommendation to include the meta tag that forces IE8 to render the web page based on IE7 parameters.
<meta http-equiv="X-UA-Compatible" content="IE=7" />

SharePoint 2007 Design Tip: Welcome Menu Arrow Display

Heather Solomon — Mon, 17 Sep 2007 21:25:16 GMT

While working with the Welcome menu in your SharePoint site (the drop down menu with the options to sign in as a different user, log out, etc) if you strip the menu out of the table that the SharePoint default.master page uses, the arrow that appears to the right of the Welcome menu may drop down to be level with the baseline of the welcome text.

SharePoint default.master code:

You can correct this by adding a font-size attribute to the wrapping container you use to place the menu in your custom master page:

(CSS Code)
.Custom-WelcomeMenu {
font-size: 8pt
}

(Master page code)
<div class="Custom-WelcomeMenu">
   
   <wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false">
   </wssuc:Welcome>
</div>

Look at a sample screenshot.

MSFT Admits IE Mistakes

Heather Solomon — Tue, 21 Mar 2006 16:33:00 GMT

(sent to me from my bud Chris)

Microsoft Admits Internet Explorer Mistakes

Good post on how not to be a Firefox fanatic

Heather Solomon — Tue, 14 Feb 2006 12:31:00 GMT

Bit of an old post, but I like the message.... Via SpreadFirefox blog...

In my opinion it's ridiculous to have "loyalty" to a company. I base my evaluation of products only on their own self-worth and merit as a product, and not on any pre-conceived opinions about the company that develops it or distributes it. Generalizing about the software of one company as a whole is, frankly, narrow-minded and readily worthy of ridicule. A comment such as 'Note also that Firefox users are in denial about the greatness of Microsoft's products.', would display a bias for Microsoft products and discredit whoever said it. Both sides are doing this, and often our side is a bit ruder about it. Of course you can often expect that if one application from a company is good that they have applied the same level of standard to their other applications, but you still have to try them out to see what you think of them.

Keep reading....

A Final End to IE/MAC

Heather Solomon — Tue, 20 Dec 2005 14:09:00 GMT

Via Web Standards Project:

Microsoft has announced that they will cease all support for IE/Mac as of December 31, 2005 and will cease all distribution of the software on January 31, 2006.

While IE/Mac has become something of a red-headed stepchild in the past couple years, it has a proud history of standards-related achievements, most of which were the result of now-WaSP, then Microsoftie Tantek Çelik.

This milestone doesn't actually mean much for working web developers — how much effort to put into supporting a given browser is best determined by audience share, not whether the browser is currently 'supported' or not. Nevertheless, it's a bittersweet reminder of the creeping obsolescence of what was arguably the single piece of software most responsible for kicking off the CSS layout revolution.

Another angle on the Resolution Debate

Heather Solomon — Thu, 01 Dec 2005 18:32:00 GMT

Oh one of my favorite topics is the resolution debates about tossing 800x600 to the wayside and formerly adopting 1024.

Jon Hicks posted his two cents and another slant on the debate, which was what about all the users out there that don't run their browsers full screen, people running at 1024+ but leave their browsers at a smaller size in order to view more on their monitors and use other tools?

I hadn't thought about that angle, but he has a good point. I think it is a definite consideration.

I stand by fluid design that looks good at 1024 and scales down very nicely to 800x600. No site should sit boxed up in the corner of the browser showing gobs of white space. Fluid sites are the ticket IMHO.

New version of Firefox released

Heather Solomon — Wed, 30 Nov 2005 14:20:00 GMT

Firefox 1.5 has been released.

Download Firefox

Developer/Designer Tools

Heather Solomon — Sun, 18 Sep 2005 17:21:00 GMT

I found out about some cool tools this week:

CSS Optimizer via David Chartier
CSS Optimizer is a simple command line application that optimizes files used for web-development, such as external CSS files. It reduces the filesize significantly, 20-60% depending on your coding style, by stripping unneeded characters such as whitespace, tabs, newline characters, and semi-colons; but, it only elimates ones that are not vital to proper display of the CSS file. CSS Optimizer also converts long-hand CSS declerations to short hand equivilents to eliminate even more unneeded characters. CSS Optimizer has been tested to work under many browsers such as Firefox, Mozilla, Safari, and IE; currently I have not found a browser that it does not work successfully on.

Internet Explorer Developer Toolbar Beta via Mark Harrison
The IE Developer Toolbar provides several features for deeply exploring and understanding Web pages.

-- Explore and modify the document object model (DOM) of a web page.
-- Locate and select specific elements on a web page through a variety of techniques.
-- Selectively disable Internet Explorer settings.
-- View HTML object class names, ID's, and details such as link paths, tab index values, and access keys.
-- Outline tables, table cells, images, or selected tags.
-- Validate HTML, CSS, WAI, and RSS web feed links.
-- Display image dimensions, file sizes, path information, and alternate (ALT) text.
-- Immediately resize the browser window to 800x600 or a custom size.
-- Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
-- Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
-- Display a fully featured design ruler to help accurately align objects on your pages.

GIMPShop via Darren Chan
GIMPShop is a free Open Source image editor that is similar to the popular Adobe Photoshop. Specifically GIMPShop is a version of the GIMP that has been edited to be more user-friendly for Photoshop users.

IE7 will have new icon and logo...

Heather Solomon — Sun, 14 Aug 2005 12:54:00 GMT

... and I actually like it much better than the last version. They stuck with the “e” and the swoosh but glammed it up a bit and make it much more modern and gel-ish. I have to say I am surprised they haven't ditched the version number and gone to some cool hip name or something. I am not complaining though, I like verison numbers, makes dev and support easier.

» Info on logo on IE Blog