I love this simple navigation.

http://digitalmash.com/

Can this be achieved using CSS? I was trying to figure out how to do this by looking through the code but it seems complex to me being a beginner at this stuff.

Just set a background image for the :hover pseudo class

Ahhh nice. Thanks.

Man now this is driving me nuts! I had the image appearing when I moused over the link but now it won't work (I changed the image size slightly and that's when I started having problems). I've changed the code around so much I'm not sure what I'm doing wrong.

http://www.liesldexheimerdesign.com/layout2.html

Try putting your navigation into an unordered list, which is what it is, and put the background on the <a> and swap it with the a:hover.

you could also use a "border-bottom" on CSS if want just a plain code and no picture included...

This is better to use thick border bottm in CSS for hover

I found a really nice javascript code that I've applied to my site. Only prob is that I'm trying to get it to line up more to the left where the white edge of my text area starts. I thought I code use the margin-left CSS code but it messes up the navigation. Help please.

How can we help you if we can't SEE the problem ???

The link was above in a previous post but I'll place it here anyway.

http://www.liesldexheimerdesign.com/layout2.html

Try adding a width (not auto) to div#miniflex and then do the margin-left.

Ok, the FIRST thing you need to do is get rid of all that unnecessary positioning, you just don't need it and it WILL cause problems in IE. Learn to use the normal document flow and use floats, then use positioning only when absolutely necessary.

Once you do that, the float on the nav isn't even necessary, since the div it sits in would be in the flow, then you could just use a margin-left to put the UL where you want it.

Could you elaborate some more? I tried removing all of the code that had positioning absolute and relative. Then I removed the float:left code and added margin:left to the miniflex but the underline part went kinda wonky so I put all the code back to where it was originally.

hey i think it will help !!!!!

u can use border of an image !!!!

------CSS ----------

ul.topNav
{
padding:0px;
margin:0px;
list-style:none;
}
ul.topNav li
{
padding:0px 12px 0px 12px;
margin:0px;
display:block;
float:left;
}
ul.topNav li a
{
padding:0px;
margin:0px;
display:block;
float:left;
color: #515150;
font: 12px Verdana, Geneva, sans-serif;
display:block;
float:left;
}
ul.topNav li a:hover
{
border-bottom:3px solid red;
padding:0px 0px 4px 0px;
}

-----------------------html --------------------

<ul class="topNav">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>

Good luck !!! works in IE6,IE 7 and firefox !!!!!

Need any help !!! PM meh !!!

Let me suggest an alternative - your layout is overly complex for such a relatively simple design:

www.cssslicingguide.com and http://www.subcide.com/tutorials/csslayout/

Most of your problems stem from using position:absolute on everything - it's just not needed and IE has huge problems with it.