drop down nav bar

[heathers]

I've been working on a drop down nav bar... I think I have the basic formula down, but I'm having a few problems. My website is at www.hmsphotographic.com.

1. The drop down is not showing up in IE. (I only have one drop down currently, under "clients" - this drop down is for "wedding clients" and is for testing only at this point).

2. My nav bar is centered on my home page, but is way over to the left on all of my other pages.

3. It is difficult to click on the drop down... when I move the cursor over "clients", "wedding clients" drops down, but then when I try to move the cursor over "wedding clients" sometimes it picks it up and other times not, like the area needs to be bigger or something.


Thanks for your help!!

Heather

[Allen]

I've been working on a drop down nav bar... I think I have the basic formula down, but I'm having a few problems. My website is at www.hmsphotographic.com (http://www.hmsphotographic.com).

1. The drop down is not showing up in IE. (I only have one drop down currently, under "clients" - this drop down is for "wedding clients" and is for testing only at this point).

2. My nav bar is centered on my home page, but is way over to the left on all of my other pages.

3. It is difficult to click on the drop down... when I move the cursor over "clients", "wedding clients" drops down, but then when I try to move the cursor over "wedding clients" sometimes it picks it up and other times not, like the area needs to be bigger or something.


Thanks for your help!!

Heather
Try this nav html. Also removed the http://hmsphotographic.smugmug.com
parts so the links are relative and if logged in your nickname would stick in
the address.

<!-- CSS Dropdown Nav Bar -->
<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited by me for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->

<div class="menu">

<ul>

<!-- First Main Menu Item -->

<li><a href="/">home</a></li>

<!-- Next Main Menu Item -->

<li><a href="/Portfolio">portfolio</a></li>

<!-- Next Main Menu Item -->

<li><a class="drop" href="/clients">clients
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/wedding%20clients">wedding clients</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="/gallery/2847851">about</a></li>

<!-- Next Main Menu Item -->

<li><a href="/gallery/5354671_4u5Z9/1/327575017_bgMwq">news+reviews</a></li>

<!-- Next Main Menu Item -->

<li><a href="/gallery/3085253">contact</a></li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->

</div>

<!-- End Navbar Code -->

I'm not familar with the CSS you are using but look at the top in this and
change it a little at a time. There is a gap that the cursor can't get
accross. Decrease it some to bring the drop up.

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:125px; /* Size of the daughter cells */
}

Change/add bold to center it.

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
width: 755px;
padding:0;
margin: 0 auto;
list-style-type:none;
text-align:center;
font-family:tahoma;
font-size:0.85em;
}

[heathers]

Thank you for your help!

That solved most of the problems.

The only problem remaining is that the drop is still not showing up in IE. Do you know how to fix that?

You mentioned that you are not familiar with the CSS I am using. Is there a more standard CSS code somewhere for this that I might want to be using instead?

Thanks again!

Heather

[Allen]

Thank you for your help!

That solved most of the problems.

The only problem remaining is that the drop is still not showing up in IE. Do you know how to fix that?

You mentioned that you are not familiar with the CSS I am using. Is there a more standard CSS code somewhere for this that I might want to be using instead?

Thanks again!

Heather
Drop shows here in IE6. Might try changing these tops also. The 2nd one
in this changed IE6.

/* another hack for IE5.5 */
* html .menu ul ul {
top:23px;
t\op:23px; /* IE gap between main bar and the dropdown items */
}

See these pages here (http://allen-steve.smugmug.com/gallery/2327835), here (http://allen-steve.smugmug.com/gallery/2011077) and here (http://allen-steve.smugmug.com/gallery/2078255) for what I use. But yours seem to be working ok.

[heathers]

Hi Allen,

Thank for your responses (to my other post as well) I really appreciate your help.

I just don't understand though. So you can see my drops in Internet Explorer? When I look at my site on Internet Explorer there are no drops, just my regular nav bar. And in the lower left hand corner it says, 'done, but with errors on page'. It's weird though, because when I first added the html code you suggested, I did see the drops in IE....... but now they've gone away.

Maybe I will try rebuilding the CSS from the pages you linked to and see what happens then.

Thanks!

[heathers]

I can now see the drops in IE. I don't know why I can now, but couldn't earlier, since I haven't changed anything since then.......

The page still says there is an error on the page as well, not sure what that is about. Good to see them on there though!

[heathers]

When I look at my site in IE in a full screen, my nav bar is centered. Then when I go to a reduced screen, the nav bar goes all off center to the left. I refresh the page and it recenters itself. The same thing happens when I go from reduced screen to full screen - the nav bar gets off center and then will recenter itself if I refresh the page.

Has anyone else had this issue?

[Allen]

When I look at my site in IE in a full screen, my nav bar is centered. Then when I go to a reduced screen, the nav bar goes all off center to the left. I refresh the page and it recenters itself. The same thing happens when I go from reduced screen to full screen - the nav bar gets off center and then will recenter itself if I refresh the page.

Has anyone else had this issue?
Something in your code is not closed I think. Looked and couldn't find anything.

Put this in your javascript

function hasPath(sPath)
{
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)
}