MS Tech: May 2009

Copy paste the below code in a New HTML Page. Make changes as required.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
body
{
font-family:tahoma;
font-size:10px;
}
.menu ul
{
list-style-type:none;
padding:0;
margin:0;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li
{
float:left;
position:relative;
z-index:100;
}
/* use the table to position the dropdown list */
.menu table
{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
/* style all the links */
.menu a, .menu :visited
{
display:block;
font-size:10px;
width:149px;
padding:7px 0;
color:#000;
background: #EDEDED;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover
{
color:#FFFFFF;
background: #FF7700;
}
/* hide the sub level links */
.menu ul ul
{
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul
{
visibility:visible;
}
.backwards
{
unicode-bidi:bidi-override;
direction: rtl;
color:#FF6600;
font-size:11px;
text-align:left;
}
</style>
</HEAD>
<body>
<H4>CSS Menu</H4>
<div class="menu">
<ul>
<li><a href="index.html">DEMOS</a>

<ul>
<li><a href="zero_dollars.html" title="The zero dollar ads page">Zero Dollars</a></li>
<li><a href="embed.html" title="Wrapping text around images">Wrapping Text</a></li>
<li><a href="form.html" title="Styling forms">Styled Form</a></li>
<li><a href="nodots.html" title="Removing active/focus borders">Active Focus</a></li>
<li><a href="shadow_boxing.html" title="Multi-position drop shadow">Shadow Boxing</a></li>
<li><a href="old_master.html" title="Image Map for detailed information">Image Map</a></li>
<li><a href="bodies.html" title="fun with background images">Fun Backgrounds</a></li>
</ul>

</li>
<li><a href="index.html">MENUS</a>

<ul>
<li><a href="spies.html" title="a coded list of spies">Spies Menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">Vertical Menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">Enlarging List</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">Link Images</a></li>
<li><a href="cross.html" title="non-rectangular links">Non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">Jigsaw Links</a></li>
<li><a href="circles.html" title="circular links">Circular Links</a></li>
</ul>

</li>
<li><a href="index.html">LAYOUTS</a>

<ul>
<li><a href="bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="minimum.html" title="A simple minimum width layout">Minimum Width</a></li>
</ul>

</li>
<li><a href="../boxes/index.html">BOXES</a>

<ul>
<li><a href="spies.html" title="a coded list of spies">Spies Menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">Vertical Menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">Enlarging List</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">Link Images</a></li>
<li><a href="cross.html" title="non-rectangular links">Non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">Jigsaw Links</a></li>
<li><a href="circles.html" title="circular links">Circular Links</a></li>
</ul>

</li>
<li><a href="index.html">MOZILLA</a>

<ul>
<li><a href="dropdown.html" title="A drop down menu">Drop Down Menu</a></li>
<li><a href="cascade.html" title="A cascading menu">Cascading Menu</a></li>
<li><a href="content.html" title="Using content:">Content:</a></li>
<li><a href="moxbox.html" title=":hover applied to a div">Mozzie Box</a></li>
<li><a href="rainbow.html" title="I can build a rainbow">Rainbow Box</a></li>
<li><a href="snooker.html" title="Snooker cue">Snooker Cue</a></li>
<li><a href="target.html" title="Target Practise">Target Practise</a></li>
<li><a href="splittext.html" title="Two tone headings">Two Tone Headings</a></li>
<li><a href="shadow_text.html" title="Shadow text">Shadow Text</a></li>
</ul>

</li>
</ul>
</div>

Rendering Mode Control
If you’ve been making websites for a while, you’ll remember at least one browser transition where you needed to address issues with the way your past work appeared in the newest browser. It’s just the reality of being a web designer: old work needs to be tested and new work needs to be adjusted every time there’s a new release of a major browser.

Those who are new to web design have lucked out because Internet explorer 8 allows the designer to specify the rendering mode of pages on an individual basis. Leveraging this provides you with an easy way to instantly “fix” pages, and when permanent solutions are developed, you can easily specify that the page displays in the most recent Internet Explorer rendering mode regardless what that version is.

All of this magic happens with a simple little meta tag:

<meta http-equiv="X-UA-Compatible" content="" />

(Where represents one of the modes below)

IE=5
<meta http-equiv="X-UA-Compatible" content="IE=5" />
This forces IE 8 to render the page in “Quirks” mode.
IE=7
<meta http-equiv="X-UA-Compatible" content="IE=7" />
This forces IE 8 to render the page using IE 7 Strict mode.
IE=EmulateIE7
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This forces IE 8 to use the !DOCTYPE declaration in the page to determine the rendering mode.
IE=8
<meta http-equiv="X-UA-Compatible" content="IE=8" />
This forces IE 8 to display the page in Internet Explorer Standards mode.
IE=EmulateIE8
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
This forces IE 8 to use the !DOCTYPE declaration in the page to determine the rendering mode.
IE=edge
<meta http-equiv="X-UA-Compatible" content="edge" />
This forces Internet Explorer 8 to render in the most recent mode. For instance; currently this would behave like using a value of IE=8, but when IE 9 is available that will be the mode that IE=edge will render in.
This forces Internet Explorer 8 to render in the most recent mode. For instance; currently this would behave like using a value of IE=8, but when IE 9 is available that will be the mode that IE=edge will render in.
Obviously, if you’re the designer of a site and you get a call letting you know that it doesn’t “look right” in Internet Explorer 8, you’ll most likely want to insert the IE 7 rendering meta tag until you can diagnose the rendering issue on your local computer and then publish your changes to the server.

Read in Detail : http://expression.microsoft.com/hi-in/dd835379(en-us).aspx

Sunday, May 24, 2009

Plain CSS Menu

Internet Explorer 8 Rendering Modes

Followers