Anna Ullrich : CSS

Give up CSS layouts and use tables

Anna — Thu, 23 Apr 2009 05:39:30 GMT

The clock is ticking ….

( Thanks to Janko Jovanovic for making me aware of this site )

HTML, CSS, and JavaScript reference at your fingertips: FireScope add-on for Firefox

Anna — Tue, 27 Jan 2009 22:27:00 GMT

SitePoint has released the “first phase” of their JavaScript reference, and they’ve also completely redesigned their Reference Site for improved usability. To coincide with the redesign, they’ve released a handy Firefox add-on called FireScope to integrate their HTML and CSS reference (sadly not their new JavaScript reference) into Firebug and your Firefox browser:

http://tools.sitepoint.com/firescope

Here’s a screenshot of the new Reference panel in Firebug:

Read the list of features on the SitePoint website to learn more about the tool:

http://tools.sitepoint.com/firescope/

Better error messages “are recommended”

Anna — Sat, 03 Jan 2009 03:18:18 GMT

A code error tip in Expression Web:

“The World-Wide-Web Consortium now regards the attribute ‘[html attribute name]’ as outdated. Newer constructs are recommended.”

Newer constructs are recommended? Who talks like that?! With all due respect, some developers talk like that, that’s who. Technical writers are typically responsible for grooming the text that appears in the user interface of a software program, but sometimes there’s just not enough time to do a quality check of UI text and so we may end up with error messages like that one.

That quoted text appears in a floating tip in the Code view in Expression Web when your web page contains a particular HTML Incompatibility error. When you encounter that tooltip, all you need to know is that you should be using CSS instead of the HTML attribute that Expression Web is flagging. I have never encountered that tooltip in any other scenario and offhand can’t think of another scenario where this tip would be appropriate. So just remember, when you see the tooltip “Newer constructs are recommended”, think CSS!

Perhaps we should change the tooltip to:

“This attribute has been deprecated in favor of style sheets...”

That’s actually a quote from the W3C’s website, in their entry for the bgcolor attribute: http://www.w3.org/TR/html401/present/graphics.html#adef-bgcolor .

HTML Incompatibility errors

So what’s an HTML Incompatibility error? It’s code in your page that doesn’t comply with the guidelines set by the DOCTYPE of your page. (For more info about DOCTYPES, check out this recent blog post by Michelle Rosenthal: http://blogs.msdn.com/xweb/archive/2008/12/17/the-quirkiness-of-quirks-mode.aspx .)

When your web page has an HTML Incompatibility error, the following happens in Expression Web:

The errant code appears with a red squiggly line underneath it in the Code view of your page. For example, look at the line under bgcolor=”aqua” in this screenshot:
When you move your cursor over the errant code, a floating message (aka “tooltip”) appears with some advice, like so:
When an open page contains an HTML Incompatibility error, the following icon appears in the status bar along the bottom of the program:

In addition to those alerts for an open page, you can check your entire website or specified pages for errors by using the Compatibility Checker which is available on the Tools menu:

After you click on Tools > Compatibility Reports, the Compatibility Checker dialog box appears:

After you click the Check button in the Compatibility Checker dialog box, the Compatibility task pane lists all the HTML Compatibility problems, CSS Compatibility problems, and also Code Errors of the pages you checked:

It’s a mighty fine tool to run on your website before you unleash your site on the world. But the tool isn’t very useful if you don’t know how to fix the problems that Expression Web has identified for you – a problem that inspired me to write this post.

There are plenty of other tooltips that appear in Code view when your page contains a code error (code that’s highlighted in color) or code that’s incompatible with the DOCTYPE of your page, and which you may find difficult to decipher. If you encounter any you need help with, comment on this post or send me an email and I’ll do my best to decrypt it for you. For code errors, you’ll need to share the code for your entire page because often the code that is flagged isn’t the problem, it’s code that precedes it that is causing a confusing domino effect!

Who's editing your CSS?

Anna — Mon, 23 Jun 2008 05:21:00 GMT

The vast majority of front end web developers that I've met prefer to write their own markup in the code editor rather than let the program generate the markup for them. In fact, it's a point of pride to hand code because WYSIWYG programs have gotten a reputation for bloated code, mangled tags, and undesirable formatting. Of course this was never the case with Expression Web (for reals!) but once you've been burned by any markup generator, it's hard to trust any program with your code.

So when does Expression Web touch your CSS and how can you take control of it (or avoid it all together)? Come, let me show you the ways...

WHEN

Expression Web generates CSS for you only when you:

Use the formatting buttons in the toolbars, for example, these buttons in the Common toolbar:
Use the formatting options in dialog boxes, for example, the Paragraph dialog box that appears when you choose Format > Paragraph:
Drag in Design view to set the margins, padding, or dimensions of an element, as in the following screenshot in which I'm dragging the shaded area below a heading to set the margin-bottom of the heading:
Use the New Style or Modify Style dialog box:
Use the CSS Properties task pane, Apply Styles task pane, or Manage Styles task pane:

When you use the features I listed in #4 - 5 (New Style dialog, Modify Style dialog, CSS Properties task pane, Apply Styles task pane, Manage Styles task pane), you are essentially writing CSS by hand, just like in the code editor, and generating whatever CSS you specify. But when you use features #1 - 3 (buttons in toolbar, property dialogs, and setting properties directly in Design view), the CSS that Expression Web generates is subject to options you set in the program.

WHAT

So what kind of CSS does Expression Web generate when you use features #1 - 3? By default, either an inline style or a class, according to the current settings on the CSS tab in the Page Editor Options dialog box (Tools > Page Editor Options):

The one exception is the "Page properties on the <body> tag" option, which you can set to either inline styles or "rules". "Rules" means the program will generate a style that uses a tag selector, i.e. the body tag will be the style's selector. (Note to self, file a suggestion to relabel "rules" to something more meaningful!)

WHERE

So where does Expression Web place the styles that the program generates for you when you use features #1 - 3? By default, Expression Web is set to Auto mode (aka Auto Style Application mode). In Auto mode, new styles that Expression Web generates are placed in an embedded style sheet in the head of the page.

What if you want Expression Web to put the new styles in the external CSS file that is attached to your page? I hear a lot of requests for that behavior (and want it myself!) but with versions 1 and 2 of Expression Web there is no way to have new auto-generated styles automatically appear in the external CSS. Keep in mind that this only applies to NEW styles that Expression Web automatically generates for you when you use features #1 - 3. In contrast, new styles that you create from scratch through the New Style dialog box are written wherever you specify, which can be the current page, a new style sheet, or an existing style sheet that's attached to the current page:

REUSE

So what do you do if you don't want Expression Web to generate a new style and instead want the program to update an existing style whenever you do anything with features #1 - 3? In that case, use Manual mode (aka Manual Style Application mode). In Manual mode, you can have Expression Web target an existing style that's in either your embedded style sheet or an external CSS file that's attached to the page, provided the style already targets the current element.

To turn on Manual mode, open a page, then go to the status bar at the bottom of the program window, right-click Style Application, point to Mode, and select Manual.

(Or choose Tools > Page Editor Options, click the CSS tab, and select the Manual Style Application option, and click OK.)

I'll show you how this works using my previous example of dragging in Design view to set the bottom-margin of my heading (h1).

MANUAL STYLE APPLICATION MODE

With the Style Application set to Manual, and my heading (H1) selected in my page, the Style Application toolbar looks like this:

When the program is in Manual Style Application mode, the critical option in the Style Application toolbar is the Target Rule setting. Whatever style is selected in the Target Rule option is the style that Expression Web updates when you use any of the features I described in #1 - 3. For example, with my h1 selected in my page, by default the style named #column_l h1 is selected for the Target Rule. That style is selected by default because it has the highest precedence of all the styles that affect the selected h1. If I use any of the features #1 - 3 while that h1 is selected, the style #column_l h1 is updated.

If I want Expression Web to update a different style when I use features #1 - 3 while that h1 is selected, all I need to do is click the Target Rule drop down and select the style I want to update or the type of new style I want created for me. For example, the Target Rule drop down menu lets me select a style named #container h1, a style named h1, or I can choose to have Expression Web create either a new class or inline style, or I can launch the New Style dialog box to create a new style from scratch myself:

In my current example, the styles happen to be in the style sheet embedded in the current page (hence why "Current Page" appears next to each style in the Target Rule drop down menu). If they were in the external CSS attached to my page, the style sheet's name would appear next to the style instead of "Current Page" and I could still target those styles if I desired.

New users of Expression Web seem to set the program to Manual style application mode because they're under the impression that this mode means that the program will not automatically generate any CSS for them; in fact, Manual mode simply means you can make Expression Web target existing styles that affect the current element instead of generating new styles by default. (Anecdote: during the development of Expression Web version 1, I anticipated that folks would interpret the label "Manual" incorrectly and so suggested it be labeled "Semi-Auto" instead, but that suggestion was rejected in small part because it brings to mind semi-automatic weapons. :) Regardless, I still think the label would be more meaningful and accurate if changed to Semi-Auto.)

To all of you that prefer to generate your CSS by hand, all you need to do is stay away from features #1 - 3 when using Expression Web and you can rest assured that your CSS is all under your control; just stick to using features #4 - 5 as well as, obviously, a page's Code view editor and the code view of a CSS file. For the rest of you, I hope this post helps illuminate how Expression Web generates CSS for you and the options available to you in the program. So who's editing your CSS? If you're using Expression Web, the options I breezed over in this post ensure YOU are in control of your CSS.

BTW, this post was inspired by Expression Web forum user Bruno Nepomuceno who started a thread to ask how to make Expression Web target his external CSS...thanks Bruno!

http://forums.expression.microsoft.com/en-US/web/thread/73c28363-7f12-497f-94e2-aaa04abe904d

plates overflowing with CSS

Anna — Wed, 05 Mar 2008 10:11:00 GMT

I think I'm the only person at Microsoft who brings her own plate to the cafeterias on campus here in Redmond. I've gotten a lot of positive encouragement from other people who notice me and my plate, but I've yet to see anyone else doing this in my two years here. I do this because in many ways, including aesthetically, it's more pleasurable to eat off a ceramic plate than a styrofoam plate, and more importantly, because it's less wasteful. Bringing my own plate to work is a good habit I got into while working at Adobe in Seattle, after seeing a few guys doing this there.

And I don't bring just any ol' plate...I bring a nice green ceramic plate that's divided like a tv dinner plate is (complete with a little circle to put the matching drinking cup on) and that was designed by Belle Kogan. Here's an image of my plate, waiting for its grilled tofu salad at my favorite Microsoft cafeteria:

I started working at Microsoft in January of 2006, and so I estimate that by bringing my own plate to the cafeteria, I've avoided using 490 disposable styrofoam plates! Four hundred and ninety styrofoam plates! What do 490 styrofoam plates look like? Well, I wish I had an image to show you that's as impressive as the photographs of Chris Jordan, but what I can do is show you a stack of 70 styrofoam plates that I photographed at the cafeteria and then cloned 7 times in Photoshop.

Rather than make you scroll the entire web page to view the image, I've instead used the BETA version of Expression Web 2 to put the image into a <div> container, set the height of the div to a much shorter height than the image, and then set the CSS overflow property to scroll. The scroll value masks out the areas of the image that extend beyond the div's dimensions and provides scroll bars so users can scroll the div container without having to scroll the entire web page.

Here it is in action...scroll baby scroll!

Now if you setup your own overflowing div in the first version of Expression Web, you'll discover that the Design view does not render the overflow property correctly. To see the results, you had to preview your page in a browser that supports the property. I'm pleased to report that the Design view of Expression Web 2 does properly render the overflow property.

Here's how to setup an overflowing div like my example above using any tool you want:

Put your content (image, text, whatever you want...) between a set of <div> </div> tags.
Tip for Expression Web users: if the content is already in your page, and you need to wrap the content with a set of <div> </div> tags, then with your content selected, press CTRL + Q to open the Quick Tag Editor, and type <div> and click the Enter button.
Use CSS to set the width and height of the div to the desired dimensions. For example, here's an inline style applied to a div: <div style="width: 450px; height: 375px;"> .

To set these dimensions in the Design view of Expression Web, click the <div> tag in the quick tag selector bar that lies along the top of your page (see image that follows )...this makes sure your <div> tag is selected and not your <img> tag - very important! And then to set the width of the div, drag the square handle (see image that follows) that's in the middle of the right edge of the div, and then to set the height, drag the square handle that's in the middle of the bottom edge of the div. Again, it's important that you do this while the div is selected, otherwise you'll resize the image instead. And it's very important to drag the handle of a side and not to drag the edge on either side of the handle...if you drag the edge then you'll set the margin of the div instead of the dimension.

After you've set the size of the div so that it's smaller than your content, the Design view of your page will show the content extending out of, or overflowing, the div like this:
Now to mask the photograph so that you can only see the portion of it that is showing within the outline of the div, you need to add the overflow property to the style you've applied to your div, and set the property's value to scroll (or to "hidden" if you don't want to provide the user with the option to scroll in the div). To do this in Expression Web, select your div, and then in the CSS Properties task pane, with the inline style (or your own style) selected under Applied Rules in the task pane, locate the overflow property and set it to scroll.

With the overflow property set to scroll, the Design view in Expression Web 2 masks the area of the photograph that goes beyond the area of the div and shows a scroll bar. The scrollbars don't function in Expression Web...you'll have to preview in your browser to test those out. And the Design view shows an outline of whatever content is overflowing outside of your div. For example, look at the white vertical lines extending downward below the selected div...those lines represent the photograph that is being masked by the div.

Power Expression Web user tip: If you want to avoid inline styles, such as the inline style that was created and applied to the div when you dragged the edges of the div in Design view, then change your CSS settings in the Page Editor Options like this: choose Tools > Page Editor Options. In the Page Editor Options dialog box, click the CSS tab, and change the Sizing, positioning, and floating option to CSS (classes). Then next time you drag the square handles of a selected element in Design view, Expression Web will generate a class for you instead of an inline style.

Center a page (horizontally) by using CSS

Anna — Wed, 20 Feb 2008 03:53:00 GMT

I often see posts in the Microsoft Expression Web discussion forum, asking how to make a web page appear centered in the web browser. One simple method is to surround the contents of your page with a div (if it isn't already), set the div's width, and then set the div's left and right margins to auto. This tutorial shows you how to do all that step-by-step by using the design surface in Expression Web and CSS. The final markup appears at the very end.

[ Note: after posting this tutorial, a colleague pointed out that this solution may not work in Internet Explorer 6. I'll look into this in a few weeks, when I have more time, and either update this post or post a separate addendum. ]

If your entire page is already wrapped by a div tag that has a defined width, then you can jump to step 9.
Put your cursor in your page in Design view.
In the quick tag selector bar that lies along the top of your page, right-click the <body> tag and click Select Tag Contents. This ensures you've got everything in the body of your page selected, including tags.
Do one of the following to wrap your page contents in a <div> tag:

In the Toolbox task pane, under HTML > Tags, right-click <div> and click Wrap.
tag in Toolbox task pane" style="WIDTH: 186px; HEIGHT: 275px" height=275 alt="context menu of
tag in Toolbox task pane" src="http://blogs.msdn.com/photos/posts/images/7799086/original.aspx" width=186 mce_src="http://blogs.msdn.com/photos/posts/images/7799086/original.aspx">
Press CTRL+Q to display the Quick Tag Editor dialog box. In the dialog box, set the pull down menu to Wrap Tag, type <div> on the right, and press Enter to accept your changes and close the dialog.

In the status bar that lies along the bottom of the program window, make sure Visual Aids is set to On. If Visual Aids is set to Off, then double-click Visual Aids in the status bar to turn them on.
In the status bar, right-click Visual Aids and make sure the Block Selection visual aid is selected. When a visual aid is selected, its icon appears orange in the list of visual aids.
In the quick tag selector bar, click the <div> that's directly to the right of the <body> tag, just to make sure it's selected.
In the Design view of your page, on the right edge of your selected div, a square handle appears in the middle. Drag this handle to the left until the div is the desired width. Be careful to drag the square handle and NOT the edge of your div; if you drag the edge of your div you will set the margin of your div instead of its width and that's not what we want to do here. As you drag, the dimensions of the div appear in a floating box. I stopped dragging when the width was 395px...not a practical size for a web page but it's a good size for a screen capture that will fit in this blog post. :)

If you're having trouble getting the precise width you want, with your <div> still selected, go to the CSS Properties task pane, and set the width for the selected style. When you drag in Design view to set the width of an element, you set the width in pixel dimensions, but you could set the width of your div to a % value instead if you want the page's width to change relative to the browser window's width. (Note - by default, the selected style will be an inline style on the <div> tag, but if you've modified your CSS options in the Page Editor Options, the selected style is a class. Or if your Style Application mode is set to Manual (not recommended for novices!), you might have a class or tag selector selected.)
Make sure your outer <div> is still selected (in the quick tag selector bar, click the <div> that's to the right of the <body> tag), and not a different <div> or anything else within it.
In the CSS Properties task pane, find the margin-left and margin-right attributes and set both to auto. If you preview your page in your browser, the page should appear centered no matter the width of your browser window.

Here's the final markup of my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
 background-color: #CC0066;
}
</style>
</head>
<body style="background-color: #CCCCFF">
<div style="width: 395px; margin-left: auto; margin-right: auto;">
 <p class="style1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nonummy. 
Suspendisse mi risus, dignissim id, ornare ultricies, venenatis in, 
sapien. Praesent quis nunc. Sed dapibus. Pellentesque elementum blandit
 dui. Curabitur elit. Aenean auctor euismod sem. Etiam quis justo id lectus
 commodo interdum. Maecenas suscipit, ligula ut adipiscing ullamcorper,
 augue diam suscipit est, et tristique neque nunc quis nulla. Nunc eu mi 
facilisis lacus cursus elementum. Morbi risus ipsum, dictum non, iaculis 
imperdiet, ultricies id, neque. Curabitur ac mauris. Nulla sit amet diam.
 Duis porttitor. </p>
</div>
</body>
</html>

Interactive buttons - a better way using CSS

Anna — Mon, 18 Feb 2008 05:33:00 GMT

My inaugural blog post is a tutorial that I promised to create for an Expression Web user a long (too long!) while ago. I promised to show him how easy it is to use CSS instead of the Interactive Buttons feature he relies on in Expression Web. The Interactive Buttons feature generates simple button images and JavaScript for you, and lets you select the font properties, size, color, and interactive behavior of your buttons. But why bother with images and all that script when you can get the same results with HTML and CSS?

Using HTML and CSS instead of the Interactive Buttons feature has many advantages, including:

More control over and options for the appearance of your buttons
Browsers don't need to download images for each button and button state
Easily reuse the buttons throughout an entire website by attaching a single CSS file to each page
Easily change the appearance of your buttons by editing that one CSS file
The markup has semantic value (http://www.alistapart.com/articles/grokwebstandards/)

If you're new to CSS or to using Expression Web, this tutorial should be useful. Please let me know what you think and if you encounter any problems. If you're not new to CSS, I'd love to hear from you too...what do you think of the CSS I'm using? If you don't want to follow all the steps and just want the final results, you can see the final markup at the end of the tutorial.

Here's what we're going to create:

Start by creating a bulleted list for your menu.
Display the Style toolbar: View > Toolbars > Style. The Style toolbar provides an easy way to both create and assign classes and ids to elements in your page or apply existing classes and ids to elements.
With your cursor in your bulleted list, click the <ul> tag in the quick tag selector bar that lies along the top of your page. This ensures the ID that we assign in the next step is applied to the entire list instead of to only a single list item.
In the Style toolbar, in the ID text box, type a name for your menu, and press Enter. I typed nav_menu. The ID should now be applied to the selected list (i.e. to the ul tag).
On the Format menu, click New Style. (You can also select this command by clicking the New Style button on either the Apply Styles task pane or the Manage Styles task pane, or in the CSS Properties task pane by right-clicking in a blank area in the Applied Rules area.)
In the New Style dialog box, delete everything in the Selector text box, and then type a # sign and then the name that you gave your list in step 4, followed by a space and the tag li. For my example, I typed #nav_menu li in the Selector text box. By using this selector, the style we create will affect any li tag (the tag for a single list item) that is within an element that uses the ID nav_menu but won't affect any list items that are elsewhere on the page.
In the New Style dialog box, under Category, select List. On the right, set list-style-type to none, and then click Apply to see the results in your page but without leaving the dialog. By setting the list-style-type to none, we get rid of the bullets next to each list item.
To make the navigation menu lie horizontally instead of vertically, under Category, select Layout, and then on the right, set float to left. Click Apply to see the results. You'll notice that the list items have no space between them now, but we'll fix that next.
Under Category, select Position. On the right, set width to the desired width for your buttons. I set the value to 4 and the units to em. I used em for units so that if a user changes the text size in their browser, the buttons will expand in size along with the text. Click Apply to see the results.

Time to give the buttons some color and jazz things up...
Under Category, select Background, and then set background-color to the color you want your buttons to be. I set the color to a purple hue: #800080. Click Apply to see the results.

Next, we'll make the text appear centered within each button.
Under Category, select Block. On the right, set text-align to center.
If you want space between your buttons, in the Box category, next to margin, clear the box next to Same for all, and then set right and left to the values you want. I set each value to 1 and the units to px. Click Apply to see the results.
If you want a border around the buttons, select the Border category on the left, and set the properties you want on the right. I set border-style to solid, border-width to 2px, and border-color to #000000.
We're done with that style, so click OK to close the dialog box.
Next, we'll make hyperlinks out of the buttons.
Select the text of one of your buttons, press CTRL+K to open the Insert Hyperlink dialog box, enter the URL you want in the Address text box, and click OK. Repeat for each button in your navigation menu. Now your text probably looks pretty horrible like mine...we'll fix that next.
On the Format menu, click New Style.
In the New Style dialog box, in the Selector text box, type # and the ID of your navigation menu (named in step 4), followed by a space and the letter a (i.e. for the anchor tag.) For example, I entered #nav_menu a. With this selector, our style will affect hyperlinks that are within an element with the id nav_menu and won't affect hyperlinks anywhere else in the page.
Under Category, select Font, and then set all the properties you want on the right. I set font-family to Arial, Helvetica, sans-serif, color to #FFFFFF, and then so the text in my menu isn't underlined, I set text-decoration to none.
Click OK.

Now it's time to create a hover effect so when someone puts their pointer over one of the buttons, the button changes color.
On the Format menu, click New Style.
In the New Style dialog box, next to Selector, type # and the ID of your navigation menu, followed by a space and then li:hover. In my example, I typed #nav_menu li:hover. With this selector, the style we create affects any list item (i.e. the li tag) the visitor's pointer is hovering over but only if the list item is in an element that uses the ID "nav_menu". Any other list items on the page aren't affected.
Select the Background category, and set the background-color to a different color than the background color of your buttons. I set the background-color to a pink hue: #FF0066. You can set other properties too if you want them to change when someone hovers over a button, such as the text color or font.
Click OK.

Let's test this in the browser and see what we have...
Either click the Preview in Browser button in the toolbar or press F12. If you're prompted to save your page, click Yes to save it. (Here's a bonus tip: if you want to prevent that dialog prompt from appearing and want to automatically save your page whenever you click the Preview in Browser button, then choose File > Preview in Browser > Edit Browser List. In the Edit Browser List dialog box, select the option Automatically save page before previewing and click OK.)
In your browser, notice that when you put your pointer over any of your buttons, the background color changes no matter where your pointer is on the button...this is by design, BUT you can't click the hyperlink unless your pointer is directly over text in a button. We'll fix that next...
Open the CSS Properties task pane. Put your cursor in one of your buttons in your page, and then in the CSS Properties task pane, under Applied Rules, click the style you created in step 16-17. In my example, the style is #nav_menu a.
In the CSS Properties task pane, locate the property named display and then set its value to block.
Save your changes and preview your page in the browser. Each button should now respond as a hyperlink no matter where your pointer is on the button.

Here's the final markup from this tutorial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
#nav_menu li {
 border: 2px solid #000000;
 list-style-type: none;
 float: left;
 width: 4em;
 background-color: #800080;
 text-align: center;
 margin-right: 1px;
 margin-left: 1px;
}
#nav_menu a {
 font-family: Arial, Helvetica, sans-serif;
 color: #FFFFFF;
 text-decoration: none;
 display: block;
}
#nav_menu li:hover {
 background-color: #FF0066;
}
</style>
</head>
<body>
<ul id="nav_menu">
  <li> <a target="_blank" href="http://blogs.msdn.com/anna">one</a></li> 
  <li> <a target="_blank" href="http://blogs.msdn.com/anna">two</a></li> 
  <li> <a target="_blank" href="http://blogs.msdn.com/anna">three</a></li> 
</ul>
</body>
</html>