HTML

<div id=”menu_wrapper”>
<ul>
<li><span>Dashboard</span></li>
<li><a href=”#”>Content</a></li>
<li><a href=”#”>Artwork</a></li>
<li><a href=”#”>Orders</a></li>
<li><a href=”#”>Users</a></li>
<li><a href=”#”>Stats</a></li>
<li><a href=”#”>Prints</a></li>
</ul>
</div>

CSS

#menu_wrapper ul{list-style:none;}

#menu_wrapper ul li{float:left;display:block;}

#menu_wrapper ul li span{ display:block; padding:11px; background-color:#fff;height:20px; color:#323028; margin-right:10px;font-size:12px; text-decoration:none;}
#menu_wrapper ul li a{ display:block; padding:11px; background-color:#000;height:20px; color:#323028; margin-right:10px;font-size:12px; color:#fff3c8; text-decoration:none;}
#menu_wrapper ul li a:hover{ display:block; padding:11px; background-color:#fff;height:20px; color:#323028; margin-right:10px;font-size:12px; text-decoration:none;}

So let me explain it to you. So easy! like piece of cake, As you can see we have small html upthere when we want to show it as a active page menu item. We just put span around it and unlink it. And i think css code is so obvies so play with it and have fun!

ps. you need some dynamic coding too.

-Riza

Since i start working with XHTML format, i have this problem Div acting different in FF, and sometimes i add exact height for solving that problem but now finally i found the solution. and i really love to share it with you, because i know this problem is so common to all people.

HTML CODE:
<div id=”content”></div>

CSS CODE:
#content {
display:table;
margin:0 auto;
background-color:#FFFFFF;
width:965px;
}

yes folks just put display:table; in your css.

More information from http://archivist.incutio.com/viewlist/css-discuss/83996

Firefox (and other good browsers) will calculate ‘height: 100%’ on any
container from its parent. You have forgotten to declare height on
div.shadow, so div.container defaults to ‘height: auto’.

Now, if you add the following…

div.shadow {height: 100%; display: table; width: 810px; margin: 0 auto;
border: solid 1px red;}

div.container {display: table;}

….you’ll get an immediate, and positive, reaction from Firefox (and
other good browsers). Firefox is slightly behind since (I think) it
supports CSS2 for ‘display: table’, while Opera and Safari seems to
support css2.1 for that property and expands all elements completely.
Doesn’t make much of a difference in most cases.

The important parts are ‘height: 100%; display: table;’ on div.shadow,
and ‘display: table;’ on div.container. I put in the rest just for
appearance.

Note that ‘height: 100%’ not only makes an element expand to that
height, it also _limits_ it to that height. There’s where ‘display:
table’ comes in handy, since that property effectively turns ‘height:
100%’ into ‘min-height: 100%’ so the element can keep on expanding if
there’s more content.

IE6 will work fine with the additions above – because of its
‘auto-expansion’ bug. Mode doesn’t matter since you have the old
centering-method in there too.

Flashobject is a small Javascript file used for embedding Adobe Flash content.
The script can detect the Flash plugin in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible.

It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents, and is forward compatible, so it should work for years to come.

<script type=”text/javascript”>
 // <![CDATA[
 var so = new SWFObject("sample.swf", "sotester", "100%", "100%", "9.0.115", "#000000");
 so.useExpressInstall('js/expressinstall.swf');
 so.addParam("scale", "noscale");
 so.addParam("menu", "false");
 so.addParam("allowScriptAccess", "always");
 so.addParam("allowFullscreen", "true");
 so.write("flashcontent");
 // ]]>
</script>

you can download the latest version from : http://code.google.com/p/swfobject/ 
this good script is from: http://blog.deconcept.com/swfobject/

Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace the GIF format, as an image-file format not requiring a patent license. PNG is pronounced /?p??/ both P-N-G and ping. The PNG initialism is optionally recursive, unofficially standing for “PNG’s Not GIF”.

I had problem with PNG in IE6, So i research about it, And find these links:

1. http://www.twinhelix.com/css/iepngfix/
2. http://www.mongus.net/pngInfo/
3. http://www.alistapart.com/stories/pngopacity/

These are good stuff but this was a perfect one.
http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/
So i use this one, and result was ok.