Navbar help thread

[Andy]

Seems that folks are doing navbars left and right. Cool! These are advanced features, that thankfully, a few members of our community are really helping out with! All navbar help issues should go here :)

Thanks!

[Andy]

From Michael:

So I added a Print and help page to my site
http://www.mlkimages.smugmug.com/gallery/2113733
and somehow created two additional problems:

First is with IE my Nav Bar has become uneven (two tabs are larger than the rest - Galleries & Products/Services). The Nav bar is fine in FF, only IE is it messed up.

Second the background color is fine in IE (Using Tan), but with FF the background color is not working in this gallery? I switched it to Smugmug gradient and it works better, but I really want to keep the background the same as all my others. Ideas, suggestions, HELP!


Thanks,
Michael

[Andy]

From DJ Kennedy:

Hi!

Allen was ableto point out some issues with my code, but the original issues still persist.

My nav bar was changed as I wasn't aware on how to add flyouts to my original code, so I replaced it.

Looks and works -awesome- in FF(2), looks awesome and works great in IE(6) (Menue choices don't change shade in IE6 but no biggie)

Two of my menue buttons have issues with IE7. One is "people photos", the other I believe is Rail photos.

The problem is, when you hover the mouse over those two menue buttons, the drop downs are hard to hold onto with the mouse using IE7.

Anyone here have any more ideas as to how to fix my code to work in IE6&7?

I have no way of testing it right now with IE7 as I'm at work, but any changes needed I could change, and check out when I get off work.

Any help would be appreciated.

Derek

(I really wanted to keep my old nav bar cus it looked so cool but I really wanted to add fly outs)

[magicpic]

From DJ Kennedy:

I need help with the navbar...Look at my site I want the letter in white and the bar in red and I need it placed under and centered thank janis

[Andy]

I need help with the navbar...Look at my site I want the letter in white and the bar in red and I need it placed under and centered thank janis

change the red

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: red;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #b80;
}


It is centered :dunno

[magicpic]

change the red

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: red;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #b80;
}


It is centered :dunno

so do you want me to put the word red in instead of a number? Then how do I move the navbar up and center is better:scratch

[magicpic]

[quote=magicpic how do I move the navbar up

[Andy]

[quote=magicpic how do I move the navbar up


Magic :D

Please please read your posts
I have answered this question 3x now for you in different places.

[magicpic]

[quote=magicpic]


Magic :D

Please please read your posts
I have answered this question 3x now for you in different places.

If you have where do I find my posts that you answered

[Andy]

[quote=Andy]

If you have where do I find my posts that you answered
If?

I have said this numerous times - please click your name to find your posts. Your name, magicpic, on the left <---- click it.

Thanks.

[DJKennedy]

Any idea Andy how to get my nav bar to be a little more compatible with IE7?

I'm not seeing anything that would cause two of the buttons to act oddly with IE7, and the others to work properly (People photos, and Rail photos). :scratch

EDIT: I noticed that www.downriverphotography.com's site works with FF(2) and IE7...

[Andy]

Any idea Andy how to get my nav bar to be a little more compatible with IE7?

I'm not seeing anything that would cause two of the buttons to act oddly with IE7, and the others to work properly (People photos, and Rail photos). :scratch

EDIT: I noticed that www.downriverphotography.com's site works with FF(2) and IE7...I'm not the guy to ask, I wish I could help there.

Ask Allen or Steve.. :D

[DJKennedy]

I'm not the guy to ask, I wish I could help there.

Ask Allen or Steve.. :D

I was able to pick out the stuff I need from that other SM site, now I just have to alter it for my site.

When I'm done altering it - I'll swap it out for the one I have now. :wink

[luckydog]

Do I ned to hide my galleries from the home page prior to making the navbar?

[ivar]

Do I ned to hide my galleries from the home page prior to making the navbar?nope :D

[MichaelKirk]

BUMP for my question

From Michael:


So I added a Print and help page to my site
http://www.mlkimages.smugmug.com/gallery/2113733
and somehow created two additional problems:

First is with IE my Nav Bar has become uneven (two tabs are larger than the rest - Galleries & Products/Services). The Nav bar is fine in FF and IE7, it is only messed up in only IE6??

I removed the code on the print page and I still have the problem so it seem like it is a system self inflicted error :)





Thanks,
Michael





nope :D

[Cason]

*I removed this post because I don't have the Nav bar anymore.

[Allen]

BUMP for my question

From Michael:


So I added a Print and help page to my site
http://www.mlkimages.smugmug.com/gallery/2113733
and somehow created two additional problems:

First is with IE my Nav Bar has become uneven (two tabs are larger than the rest - Galleries & Products/Services). The Nav bar is fine in FF and IE7, it is only messed up in only IE6??

I removed the code on the print page and I still have the problem so it seem like it is a system self inflicted error :)

Thanks,
Michael Found one thing, might? throw off IE. Everything else in menu html looks
perfert, great job.
Remove red. The green can be handled in CSS. HTML defines the elements, the CSS formats it.


<center>
<div id="my_banner"> </div>
<div class="menu">
.
.
.
<li><a href="http://www.djkennedy.com/gallery/2032316">Liquids</a></li>
<li>
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="mailto:dj_kennedy@yahoo.com">Contact Us</a></li>

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

Ice storm put me in dark for two days with power outage. Hopefully
it stays on, too cold here.
AL

[Allen]

Ok..I did some copying and tweaking from another thread and now I'm cross-eyed. I think I have it the way I want. In IE6, I think it looks good. It is centered. However, in FF, the navbar is on the left side. I noticed that Services and Prices are not centered when viewing in FF. Also, I noticed that the screen jumps when I hover over a menu.

Can anybody dumb it down for me?

http://www.restorethepast.com
I first looked at your html.
Remove red - add green (scroll window to right to see green)
<li><a class="drop" href="http://www.restorethepast.com" title="Galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.restorethepast.com/Portfolio" title="Portfolio">Portfolio</a></li>
<li><a href="http://www.restorethepast.com/Client%20Login" title="Client Galleries">Client Galleries</a></li>
<li><a class="drop" href="http://www.restorethepast.com" title="Private Galleries">Private Galleries»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.restorethepast.com/Family">Family</a></li>
<li><a href="http://www.restorethepast.com/Friends">Friends</a></li>
<li><a href="http://www.restorethepast.com/Vacation">Vacation</a></li>
<li><a href="http://www.restorethepast.com/Nature">Nature</a></li>
<li><a href="http://www.restorethepast.com/Events">Events</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
.
.
<li><a class="drop" href="http://www.restorethepast.com" title="Services and Prices">Services and Prices
.
.
<!-- Next Main Menu Item -->

<li><a href="http://www.restorethepast.com" title="About the Photographer">The Photographer</a></li>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="http://www.restorethepast.com" title="Copyright Information">Copyright</a></li>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div>
<!-- End Navbar Code -->

CSS
.menu { width:630px; << width:750px;
this centered menu
See if this gets it closer to what you want,
Al

[Cason]

So, this needs to go in CSS?
CSS
.menu { width:630px; << width:750px;
this centered menu

[Allen]

So, this needs to go in CSS?
CSS
.menu { width:630px; << width:750px;
this centered menu

You already have .menu in there (CSS), just edit the width line. Change the 750 to 630.

.menu {
.
.
.
width: 750px;
.
.
}


Al

[Cason]

When I changed it to 630, it centered up in FF; however, IE6 dropped Copyright to the next line. Also, the drop downs in FF are still uneven.

I will hunt down some other code because I think this particular drop down is way cumbersome for me. Would you say so?

I do thank you for your help!

[Allen]

When I changed it to 630, it centered up in FF; however, IE6 dropped Copyright to the next line. Also, the drop downs in FF are still uneven.

I will hunt down some other code because I think this particular drop down is way cumbersome for me. Would you say so?

I do thank you for your help! Duh? Your navbar disappeared.

Add this green line for IE
width:630px;
_width:650px;
Simply increase/decrease the 650 till the navbar does not wrap.
Al

[Cason]

I removed it because I was tired of working on it. I did what you said and it looks right in IE. Still a little corky in FF. I would have thought the other way around.

See screen shot. Notice in IE everything is lined up centered including the layer drop down and the padding is there before you get to my bio.

FF drops down over my bio, Services and Prices are too far to the right, and the layer drop down is not centered. It bleeds over to the next menu.

Thank you again for taking the time to help!!

[Allen]

I removed it because I was tired of working on it. I did what you said and it looks right in IE. Still a little corky in FF. I would have thought the other way around.

See screen shot. Notice in IE everything is lined up centered including the layer drop down and the padding is there before you get to my bio.

FF drops down over my bio, Services and Prices are too far to the right, and the layer drop down is not centered. It bleeds over to the next menu.

Thank you again for taking the time to help!!
It's all a matter of tweaking the box sizes. Look down this page (http://allen-steve.smugmug.com/gallery/2078255) and
read the comments. It will show what needs to be tweaked.

Menus are designed to dropdown over elements below. If anything IE
has to much room below menu. The space can be adjusted to what
you want though.
Al

[Cason]

I think we did it. Looks centered in FF and in IE6.

Within IE6, do you notice the jump in the screen when the menu expands?

[Allen]

I think we did it. Looks centered in FF and in IE6.

Within IE6, do you notice the jump in the screen when the menu expands?
Looks good. It's probably a padding or margin that's causing the
jump. You'll have to experiment to find it.
Al

[Scott_Quier]

Site/Gallery: http://lovenlaughter.smugmug.com/gallery/2035287

I was showing this gallery to a friend and was demonstrating the Navbar. When I hover over

Galleries -> Wedding

or

Galleries -> Portraits

In IE6 (but not in FF and I don't know, yet, about IE 7) the fly-outs are rendered under the SmugMug style selector. From an interface perspective, this is wrong and I would like to correct it.

Is there any way to get the fly-outs to render on top of other items on the page. I suspect it's something in the CSS, but I'm so confused!

Thanks for the help.

[stephenbruno]

how do i have the headers in the nav bar be equal distance so they are more balanced? thanks much!

[Scott_Quier]

This post wasn't getting attention in the Navbar Help thread (post is here (http://www.dgrin.com/showpost.php?p=437407&postcount=28)) so I thought I would create a new thread to see if I can get some help with this.

Site/Gallery: http://lovenlaughter.smugmug.com/gallery/2035287

I was showing this gallery to a friend and was demonstrating the Navbar. When I hover over

Galleries -> Wedding

or

Galleries -> Portraits

In IE6 (but not in FF and I don't know, yet, about IE 7) the fly-outs are rendered under the SmugMug style selector. From an interface perspective, this just doesn't feel/look right to me and I would change the behavior.

Is there any way to get the fly-outs to render on top of other items on the page. I suspect it's something in the CSS, but I'm quite confused!

Thanks for the help.

[ivar]

This post wasn't getting attention in the Navbar Help thread (post is here (http://www.dgrin.com/showpost.php?p=437407&postcount=28)) so I thought I would create a new thread to see if I can get some help with this.

Site/Gallery: http://lovenlaughter.smugmug.com/gallery/2035287

I was showing this gallery to a friend and was demonstrating the Navbar. When I hover over

Galleries -> Wedding

or

Galleries -> Portraits

In IE6 (but not in FF and I don't know, yet, about IE 7) the fly-outs are rendered under the SmugMug style selector. From an interface perspective, this just doesn't feel/look right to me and I would change the behavior.

Is there any way to get the fly-outs to render on top of other items on the page. I suspect it's something in the CSS, but I'm quite confused!

Thanks for the help.The z-index from the menu class is currently set to 99, change that to 999999, and I think you should be good.

[Allen]

The z-index from the menu class is currently set to 99, change that to 999999, and I think you should be good.
I changed every menu z-index:99; to z-index:999999; and even tried
inserting z-index:999999; into every menu item and did not help.

Al

[Scott_Quier]

I changed every menu z-index:99; to z-index:999999; and even tried
inserting z-index:999999; into every menu item and did not help.

AlYeah, I did that too with the same lack of results.

I did read that z-index is only effective on "elelments" with a position property set to absolute (or is it relative - whatever mine aren't). I do know that I set it (the absolute/relative property) to the other and this caused my Navbar to move all the way to the left border of the viewport.

[Andy]

This post wasn't getting attention in the Navbar Help thread

The attention is from a limited number of volunteers. Please keep these issues in the navbar help thread, thanks. Those that can help you are looking in the navbar help thread. It's very advanced HTML and CSS you are using, so patience is appreciated.

Moving back to navbar help.

[javier.rinaldi]

The problem is that the "select" element doesn't support z-index in IE6,
the following documents the bug http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx

[Allen]

The problem is that the "select" element doesn't support z-index in IE6,
the following documents the bug http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx
Figured it was something way beyond my comprehension.:D The simple
solution is move the stylebar out of the way, that's what I did.
Al

[Scott_Quier]

Figured it was something way beyond my comprehension.:D The simple
solution is move the stylebar out of the way, that's what I did.
AlI can live with that. Viewing the page with FF web developer (or whatever it's called), it appears that it deals with

div #stylebar .nav 12

I don't know. I can usually copy/modify stuff to work. Creating new CSS is something still new to me. Am I correct that this is the object whose property needs to be modified. If so, and if I just want to move it to the left to align or close to align with my "Home" <li>, which property do I modify and in what manner.

The attention is from a limited number of volunteers. Please keep these issues in the navbar help thread, thanks. Those that can help you are looking in the navbar help thread. It's very advanced HTML and CSS you are using, so patience is appreciated.

Moving back to navbar help.Andy, sorry about that. I was seeing responses happening quite quickly (yeah) and saw this thread languish for more than a day - I figured that it was no longer alive. I have been reprimanded and sent to my corner. I promise to be good - I just didn't completely understand all the rules.

Thanks for all your help.

[Andy]

I promise to be good - I just didn't completely understand all the rules.

Thanks for all your help.

It's all good - no worries. But there's so many threads for help that if we can keep this optional, advanced html and css stuff that lots of good folks are doing, in this thread, it'll help us to help everyone :thumb

[cindyinnc]

I have had smugmug for a while now, but have not been able to figure out the customization stuff. I am trying again, and need help with the nav bar. How can I get it horizontal and change the colors? I thought I did everything correct in the tutorial...but it is not right and I have no clue where I went wrong.

Also, how do I change everything back to no theme? My site is www.ashotbeyond.smugmug.com (http://www.ashotbeyond.smugmug.com).

Thanks so much!!!!

Cindy

[Allen]

I have had smugmug for a while now, but have not been able to figure out the customization stuff. I am trying again, and need help with the nav bar. How can I get it horizontal and change the colors? I thought I did everything correct in the tutorial...but it is not right and I have no clue where I went wrong.

Also, how do I change everything back to no theme? My site is www.ashotbeyond.smugmug.com (http://www.ashotbeyond.smugmug.com).

Thanks so much!!!!

Cindy You're missing the closing in the statement above your navbar. Add the
red and the navbar pops in place.

.homepage #my_banner {
display: block;}

To format the colors and spacing see the comments next to the code
on this page.
http://allen-steve.smugmug.com/gallery/2078255

Hope this helps,
Al

[Andy]

I have had smugmug for a while now, but have not been able to figure out the customization stuff. I am trying again, and need help with the nav bar. How can I get it horizontal and change the colors? I thought I did everything correct in the tutorial...but it is not right and I have no clue where I went wrong.

You just had a bunch of errors in your CSS. I fixed it for you, and here it is in case you need it again. To change the colors, change the red parts.

#my_banner {display: none;

width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://ashotbeyond.smugmug.com/photos/116653979-L.jpg) no-repeat;
}


.homepage #my_banner {
display: block;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #ccffcc;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #ff00ff;
}

[cindyinnc]

Andy,

Thanks so much! I have been fearing this whole process. I will keep working and trying to understand. Now, I am just going to research how to link to pages and get the galleries in place. Thanks again, you rock!!!


Cindy
You just had a bunch of errors in your CSS. I fixed it for you, and here it is in case you need it again. To change the colors, change the red parts.

#my_banner {display: none;

width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://ashotbeyond.smugmug.com/photos/116653979-L.jpg) no-repeat;
}


.homepage #my_banner {
display: block;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #ccffcc;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #ff00ff;
}

[cindyinnc]

I have a couple more problems. I am sorry to keep asking....I tried for hours, but just can't figure out what to do.

I want to link to my different galleries in my nav bar. What is the simplest way to do this? Do I have to get a drop down nav bar or can I organize the pics in a way that is going to make it easier???

Thanks
Cindy
Andy,

Thanks so much! I have been fearing this whole process. I will keep working and trying to understand. Now, I am just going to research how to link to pages and get the galleries in place. Thanks again, you rock!!!


Cindy

[Allen]

I have a couple more problems. I am sorry to keep asking....I tried for hours, but just can't figure out what to do.

I want to link to my different galleries in my nav bar. What is the simplest way to do this? Do I have to get a drop down nav bar or can I organize the pics in a way that is going to make it easier???

Thanks
Cindy Cindy,
If you're ready to take the plunge into dropdowns you can look here (http://allen-steve.smugmug.com/gallery/2011077) and
get an idea of what's involved.
If you follow the steps it's not all that hard and there's plenty of help here
to steer you along.

You have your categories displayed now on your home which does provide
navigation. The only problem is not everyone understands the breadcrumb
nav (ashotbeyond > Nature > Nature and Flowers) of going up and down
thru your galleries.

Good luck and fired back here with any questions
AL

[gavin]

I was just wondering how I can change the font in my nav bar to century gothic?

[ivar]

I was just wondering how I can change the font in my nav bar to century gothic?See http://www.dgrin.com/showthread.php?p=443147#post443147

[gavin]

See http://www.dgrin.com/showthread.php?p=443147#post443147

Thank you :)

[PhotoDude 2]

Hello - I need some help with my nav bar, I believe I copied all items correctly, but it still pulls to the left of the frame, not centered. Can anyone please make suggestions?

Thanks,
Daniel

[Allen]

Hello - I need some help with my nav bar, I believe I copied all items correctly, but it still pulls to the left of the frame, not centered. Can anyone please make suggestions?

Thanks,
Daniel Add the green and remove the red. Should put your menu on center.


#bioBox .photo {
display: none;}

<center>

#navcontainer {
width: 490px;
margin:0 auto;
}

#navcontainer ul {
list-style-type: none;
margin:0 auto;
}

margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; }


#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
</center>

See if this helps
Al

[ivar]

Add the green and remove the red. Should put your menu on center.


#bioBox .photo {
display: none;}

<center>

#navcontainer {
width: 490px;
margin:0 auto;
}

#navcontainer ul {
list-style-type: none;
margin:0 auto;
}

margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; }


#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
</center>

See if this helps
AlDon't use that please, it's a hack and works for this situation, but changing/adding/removing links may mess it up.

Just use the standard code as given by me in the tutorial (http://dgrin.smugmug.com/gallery/1932803), which is this:#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
I've already fixed you up actually, you are all set :thumb

[cindyinnc]

I followed Allen's link to make the drop downs. I have done that now, and it is not quite right. I wanted all my categories of galleries to drop down from the galleries section on the nav bar. Right now they are all bunched up together in between my four original entries on my Nav bar. I am trying, but I need you pros to help me again...if you don't mind. Also, can someone tell me how to get the background back to white on all my pages. I do not want any themes and am not sure if I have changed it correctly.
http://www.ashotbeyond.smugmug.com/

Thanks to all of you!

Cindy

[Allen]

I followed Allen's link to make the drop downs. I have done that now, and it is not quite right. I wanted all my categories of galleries to drop down from the galleries section on the nav bar. Right now they are all bunched up together in between my four original entries on my Nav bar. I am trying, but I need you pros to help me again...if you don't mind. Also, can someone tell me how to get the background back to white on all my pages. I do not want any themes and am not sure if I have changed it correctly.
http://www.ashotbeyond.smugmug.com/

Thanks to all of you!

Cindy
You're very close, try the following for the html. Then you'll need more
CSS to format the dropdowns. See here (http://allen-steve.smugmug.com/gallery/2078255) for complete list and read
comments for each element. Remember that your using #navcontainer
instead of .menu so change those for the any added statements.

<div id="navcontainer">
<ul>
<li><a href="http://ashotbeyond.smugmug.com">Home</a></li>
<li><a href="http://ashotbeyond.smugmug.com">About Us</a></li>
<li><a class="drop" href="http://ashotbeyond.smugmug.com">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://ashotbeyond.smugmug.com">Children's Portraits</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Families</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Weddings</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Bridal Portraits</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Engagement Portraits</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Teens and High School Seniors</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Maternity</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Animals and Nature</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Collages and Photo Art</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://ashotbeyond.smugmug.com">Information</a></li>
<li><a href="http://ashotbeyond.smugmug.com/gallery/2238419">Contact Us</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
Hollor back with any questions
Al

[cindyinnc]

Thanks so much Allen! I am quite confused though. I am totally new to this. When I copy the code for the CSS do I delete all the extra stuff to the side that is in a different color? It says things like tweak, etc. I am totally clueless about that. Thanks for all your help.

You're very close, try the following for the html. Then you'll need more
CSS to format the dropdowns. See here (http://allen-steve.smugmug.com/gallery/2078255) for complete list and read
comments for each element. Remember that your using #navcontainer
instead of .menu so change those for the any added statements.

<div id="navcontainer">
<ul>
<li><a href="http://ashotbeyond.smugmug.com">Home</a></li>
<li><a href="http://ashotbeyond.smugmug.com">About Us</a></li>
<li><a class="drop" href="http://ashotbeyond.smugmug.com">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://ashotbeyond.smugmug.com">Children's Portraits</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Families</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Weddings</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Bridal Portraits</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Engagement Portraits</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Teens and High School Seniors</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Maternity</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Animals and Nature</a></li>
<li><a href="http://ashotbeyond.smugmug.com">Collages and Photo Art</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://ashotbeyond.smugmug.com">Information</a></li>
<li><a href="http://ashotbeyond.smugmug.com/gallery/2238419">Contact Us</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
Hollor back with any questions
Al

[Allen]

Thanks so much Allen! I am quite confused though. I am totally new to this. When I copy the code for the CSS do I delete all the extra stuff to the side that is in a different color? It says things like tweak, etc. I am totally clueless about that. Thanks for all your help.
Anything between the /* & */ are comments and are there to describe
what each line does. So they can be deleted but not necessary.

Replace the html in your header customize box. When that's in, your menu
can be formated with the addition of new CSS.

This is what I have so far for your new CSS and should be close.

#my_banner {display: none;
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://ashotbeyond.smugmug.com/photos/116653979-L.jpg) no-repeat;
}

.homepage #my_banner {
display: block;
}

/* html only page for gallery 2238419 */
.gallery_2238419 .nophotos { display: none; }

/* 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 */

/* Common Styling */
#navcontainer {
position:relative;
display:block;
z-index:99;
padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div #navcontainer) */
width:536px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar */
}

#navcontainer ul {
padding:10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

#navcontainer ul li {
float:left;
position:relative;
}

#navcontainer ul li a,
#navcontainer ul li a:visited {
display:block;
font-size:1em; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width:100px; /* main box width */
height:20px; /* main box height */
border:1px solid black; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background:#ffffcc; /* main button color */
padding-left:0px;
line-height:20px; /* positions text up/down in box */
}


* html #navcontainer ul li a, #navcontainer ul li a:visited {
width:104px; width:104px; /* IE main button */
}

#navcontainer ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li:hover a {
color:#fff; /* main when hover DD */
background:#ff00ff; /* main when hover DD */
}

#navcontainer ul li:hover ul {
display:block;
position:absolute;
top:-4px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left:0px; /* FF DD right left */
width:104px; /* unknown */
}

#navcontainer ul li:hover ul li ul {
display: none;
}

#navcontainer ul li:hover ul li a {
display:block;
background:#ff00ff; /* DD FO non-hover */
color:black; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:104px /* DD FO box width */
}

#navcontainer ul li:hover ul li a:hover {
background:#ff00ff; /* DD FO hover */
color:white; /* DD FO hover */
}

#navcontainer ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:102px; /* FF FO right left */
top:-27px; /* FF FO up down */
width:180px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li a:hover {
color:#fff; /* main hover */
background:#ff00ff; /* main hover */
}

#navcontainer ul li a:hover ul {
display:block;
position:absolute;
top:2px; left:0; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:7px;
margin-top:7px; /* DD container up down */
left:0px; /* DD right left */
}

#navcontainer ul li a:hover ul li a {
display:block;
background: #ff00ff; /* IE DD color non-hover */
color:black; /* IE DD color non-hover */
height:auto;
line-height:20px; /* IE DD FO box height */
padding:0px;
width:145px; /* IE DD FO box */
}

#navcontainer ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}

#navcontainer ul li a:hover ul li a:hover {
background:#ff00ff; /* DD FO hover */
color:white; /* DD FO hover */
}


#navcontainer ul li a:hover ul li a:hover ul.left {
left:-134px;
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html #navcontainer a, * html #navcontainer a:visited {
width:125px;
width:139px;
}

/* another hack for IE5.5 */

* html #navcontainer ul ul {
top:30px;
top:31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
#navcontainer table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html #navcontainer ul ul a{
width:125px; /* unknown */
width:104px; /* DD FF width */
}

I Fixed this, changed
.gallery_ .2238419nophotos { display: none; }
To this
.gallery_2238419 .nophotos { display: none; }

I plugged the html and CSS in you page using the Webdev and it looks good
in Firefox but IE's dropdown aren't showing. I think it's because the new
html's not incorporated yet and is very touchy with errors.

One step at a time, get Firefox working and then tackle IE.

I'll be holding my breath,:D waiting to help at the next step,
Al

[b-grinner]

Hi there,

I was in process of modifying navbar so as to have sub menus. Now that I did this my menus are all out of wack (in IE 6 and IE 7) and I do not know where and why?:scratch Funny thing is it works in FF.

My site is http://cyberphotogs.smugmug.com

Thanks and I look forward to your reples.

...B

[Allen]

Hi there,

I was in process of modifying navbar so as to have sub menus. Now that I did this my menus are all out of wack (in IE 6 and IE 7) and I do not know where and why?:scratch Funny thing is it works in FF.

My site is http://cyberphotogs.smugmug.com

Thanks and I look forward to your reples.

...B

Looked thru your code and this is what I found that might/should correct IE.

Add green in CSS
.menu table {
position:absolute;
top:auto 0; left:0;
}

Remove red and add green in header html
You can also remove the centering div. It is handled easily by CSS.
<div align="center">
<div class="menu">
.
.
.
<li><a href="http://www.cyberphotogs.smugmug.com/gallery/2154899" title="San Fran">San Fran</a></li>
</ul> <!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
.
.
.
<!-- Next Main Menu Item -->
<li><a class="drop" href="http://cyberphotogs.smugmug.com/gallery/2163446" title="Guestbook">Guestbook</a></li>
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->
<li><a class="drop" href="http://cyberphotogs.smugmug.com/gallery/2178243" title="About Me">About Me</a></li>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div>
See if this fixes IE.

AL

[b-grinner]

Looked thru your code and this is what I found that might/should correct IE.

Add green in CSS
.menu table {
position:absolute;
top:auto 0; left:0;
}

Remove red and add green in header html
You can also remove the centering div. It is handled easily by CSS.
<div align="center">
<div class="menu">
.
.
.
<li><a href="http://www.cyberphotogs.smugmug.com/gallery/2154899" title="San Fran">San Fran</a></li>
</ul> <!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
.
.
.
<!-- Next Main Menu Item -->
<li><a class="drop" href="http://cyberphotogs.smugmug.com/gallery/2163446" title="Guestbook">Guestbook</a></li>
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->
<li><a class="drop" href="http://cyberphotogs.smugmug.com/gallery/2178243" title="About Me">About Me</a></li>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div>
See if this fixes IE.

AL

Hi Al,

Thanks for your help. Well the menu is all back together. One last thing in IE is when I go to Travel menu item the San Fran sub menu item does not display. It displays in FF fine.

This time go to http://testphotogs.smugmug.com to see the code.

Thanks again and I look forward to your help.

...B

[Allen]

Hi Al,

Thanks for your help. Well the menu is all back together. One last thing in IE is when I go to Travel menu item the San Fran sub menu item does not display. It displays in FF fine.

This time go to http://testphotogs.smugmug.com to see the code.

Thanks again and I look forward to your help.

...B I did a complete plugin of the CSS from this site (http://allen-steve.smugmug.com/gallery/2078255) and IE worked. Look thru the
code there and see if you can find the IE flyout code needed.
Al

Edit: It should center with margin:0 auto; and the left & _left not needed
as long as the width:612px; is minimized without wrapping. Of course IE
might need a slightly different width. Just find a suitable width that
works in FF also.

.menu {
position:relative;
display:block;
z-index:99;
padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px;
font-size:.9em;
width:612px; /* width of menu - too small and menu will wrap to two lines */
margin:0 auto;
left:0px; /* tweak this to center navbar */
_left:0px; /* tweak this to center navbar for IE */
}

IE flyout - Add the green

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

Modifed the green to align
.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top:-20px; /* FO up down */
color:#000000; /* unknown */
left:102px; /* FO right left */
}

Edit 2: class="MENU"> >>>> "menu" is case sensitive in html

[b-grinner]

I did a complete plugin of the CSS from this site (http://allen-steve.smugmug.com/gallery/2078255) and IE worked. Look thru the
code there and see if you can find the IE flyout code needed.
Al

Edit: It should center with margin:0 auto; and the left & _left not needed
as long as the width:612px; is minimized without wrapping. Of course IE
might need a slightly different width. Just find a suitable width that
works in FF also.

.menu {
position:relative;
display:block;
z-index:99;
padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px;
font-size:.9em;
width:612px; /* width of menu - too small and menu will wrap to two lines */
margin:0 auto;
left:0px; /* tweak this to center navbar */
_left:0px; /* tweak this to center navbar for IE */
}

IE flyout - Add the green

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

Modifed the green to align
.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top:-20px; /* FO up down */
color:#000000; /* unknown */
left:102px; /* FO right left */
}

Edit 2: class="MENU"> >>>> "menu" is case sensitive in html

Hi Al,

I looked up your tutorial and rebuilt my navbar following the tutorial. Well it looks like I have it working for the most part however it is not centered and it has underlines when hover over the items. How do you center and remove the underlines? The coloring is based on the coding in the CSS code. I am guessing I will have to locate the colors based on what they are now and change accordingly to my color scheme. Correct?

Check out my site at http://testphotogs.smugmug.com.

...B

[Allen]

Hi Al,

I looked up your tutorial and rebuilt my navbar following the tutorial. Well it looks like I have it working for the most part however it is not centered and it has underlines when hover over the items. How do you center and remove the underlines? The coloring is based on the coding in the CSS code. I am guessing I will have to locate the colors based on what they are now and change accordingly to my color scheme. Correct?

Check out my site at http://testphotogs.smugmug.com.

...B
I've been following your changes with WebDev and looking at why not
centered. You still have <center> ... </center> around your html, I'd
remove it. Still looking, got to be there somewhere.:D Found it. Add the
green in CSS.

/* CSS Dropdown Nav Bar */

I see under line is galleries and all under it. Looking at that too.
Al

Edit: remove the red parts
<li><a href="Place" link="" here="">"HANNUKAH 2006"</a></li>

Add green gets rid of underlines in IE

.menu ul li a:hover { text-decoration: none;
color:blue; /* main hover */
background:yellow; /* main hover */
}

[cindyinnc]

You are the best! I think I am slowly understanding a very small part of this. I think I have it okay now...it seems to look okay in FF, but not in IE. So, can that be fixed? I would like to change my font to something a little nicer....but not sure what or how. Thanks so much....so are really amazing and I am so so so appreciative!

Cindy
Anything between the /* & */ are comments and are there to describe
what each line does. So they can be deleted but not necessary.

Replace the html in your header customize box. When that's in, your menu
can be formated with the addition of new CSS.

This is what I have so far for your new CSS and should be close.

#my_banner {display: none;
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://ashotbeyond.smugmug.com/photos/116653979-L.jpg) no-repeat;
}

.homepage #my_banner {
display: block;
}

/* html only page for gallery 2238419 */
.gallery_2238419 .nophotos { display: none; }

#my_banner {display: none;

width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://ashotbeyond.smugmug.com/photos/116653979-L.jpg) no-repeat;
}


.homepage #my_banner {
display: block;
}

/* html only page for gallery 2238419 */
.gallery_ .2238419nophotos { display: none; }

/* 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 */

/* Common Styling */
#navcontainer {
position:relative;
display:block;
z-index:99;
padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div #navcontainer) */
width:526px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar */
}

#navcontainer ul {
padding:10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

#navcontainer ul li {
float:left;
position:relative;
}

#navcontainer ul li a,
#navcontainer ul li a:visited {
display:block;
font-size:1em; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width:100px; /* main box width */
height:20px; /* main box height */
border:1px solid black; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background:#ffffcc; /* main button color */
padding-left:0px;
line-height:20px; /* positions text up/down in box */
}


* html #navcontainer ul li a, #navcontainer ul li a:visited {
width:104px; width:104px; /* IE main button */
}

#navcontainer ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li:hover a {
color:#fff; /* main when hover DD */
background:#ff00ff; /* main when hover DD */
}

#navcontainer ul li:hover ul {
display:block;
position:absolute;
top:-4px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left:0px; /* FF DD right left */
width:104px; /* unknown */
}

#navcontainer ul li:hover ul li ul {
display: none;
}

#navcontainer ul li:hover ul li a {
display:block;
background:#ff00ff; /* DD FO non-hover */
color:black; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:104px /* DD FO box width */
}

#navcontainer ul li:hover ul li a:hover {
background:#ff00ff; /* DD FO hover */
color:white; /* DD FO hover */
}

#navcontainer ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:102px; /* FF FO right left */
top:-27px; /* FF FO up down */
width:180px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li a:hover {
color:#fff; /* main hover */
background:#ff00ff; /* main hover */
}

#navcontainer ul li a:hover ul {
display:block;
position:absolute;
top:2px; left:0; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:7px;
margin-top:7px; /* DD container up down */
left:0px; /* DD right left */
}

#navcontainer ul li a:hover ul li a {
display:block;
background:white; /* IE DD color non-hover */
color:red; /* IE DD color non-hover */
height:auto;
line-height:20px; /* IE DD FO box height */
padding:0px;
width:145px; /* IE DD FO box */
}

#navcontainer ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}

#navcontainer ul li a:hover ul li a:hover {
background:blue; /* DD FO hover */
color:gold; /* DD FO hover */
}


#navcontainer ul li a:hover ul li a:hover ul.left {
left:-134px;
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html #navcontainer a, * html #navcontainer a:visited {
width:125px;
width:139px;
}

/* another hack for IE5.5 */

* html #navcontainer ul ul {
top:30px;
top:31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
#navcontainer table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html #navcontainer ul ul a{
width:125px; /* unknown */
width:104px; /* DD FF width */
}

I Fixed this, changed
.gallery_ .2238419nophotos { display: none; }
To this
.gallery_2238419 .nophotos { display: none; }

I plugged the html and CSS in you page using the Webdev and it looks good
in Firefox but IE's dropdown aren't showing. I think it's because the new
html's not incorporated yet and is very touchy with errors.

One step at a time, get Firefox working and then tackle IE.

I'll be holding my breath,:D waiting to help at the next step,
Al

[Allen]

You are the best! I think I am slowly understanding a very small part of this. I think I have it okay now...it seems to look okay in FF, but not in IE. So, can that be fixed? I would like to change my font to something a little nicer....but not sure what or how. Thanks so much....so are really amazing and I am so so so appreciative!

Cindy First go back to message 52 and change your header html to what I had
there. It is not quite working as is. Then we can get it formated with the
CSS.
IE needs all the extra stuff in there.
Al

[b-grinner]

I've been following your changes with WebDev and looking at why not
centered. You still have <center> ... </center> around your html, I'd
remove it. Still looking, got to be there somewhere.:D Found it. Add the
green in CSS.

/* CSS Dropdown Nav Bar */

I see under line is galleries and all under it. Looking at that too.
Al

Edit: remove the red parts
<li><a href="Place" link="" here="">"HANNUKAH 2006"</a></li>

Add green gets rid of underlines in IE

.menu ul li a:hover { text-decoration: none;
color:blue; /* main hover */
background:yellow; /* main hover */
}

Al,

Once again many thanks for the tips. I am getting there however the last menu item wraps around to the second line. Tried reducing names of menu items but no luck. Mind taking one more look?

...B

[Allen]

Al,

Once again many thanks for the tips. I am getting there however the last menu item wraps around to the second line. Tried reducing names of menu items but no luck. Mind taking one more look?

...B See message #58, adjust the width until it doesn't wrap. 636 seems to work.
AL

[b-grinner]

See message #58, adjust the width until it doesn't wrap. 636 seems to work.
AL

Al,

Once again thanks. Now menu is centered on one line. But, my slideshow does not appear. Again this is only in IE. Any ideas?

...B

[Allen]

Al,

Once again thanks. Now menu is centered on one line. But, my slideshow does not appear. Again this is only in IE. Any ideas?

...B
Showing here in IE6
Al

[b-grinner]

Showing here in IE6
Al

Really?? I am trying in both IE7 and IE6 and no slide show. This is wierd. I even tried the cache clearing thing too but no success. Had a buddy try it on his machine and he had the same result. Why is IE so difficult????

[Allen]

Really?? I am trying in both IE7 and IE6 and no slide show. This is wierd. I even tried the cache clearing thing too but no success. Had a buddy try it on his machine and he had the same result. Why is IE so difficult???? Oops, showing on your regular site not test one.

You sure you have it in your Bio? ssSlide not showing in page sourse.

Check control panel and pick display bio.
You might also have to put at least a space in your bio to get it to show.

[b-grinner]

Oops, showing on your regular site not test one.

You sure you have it in your Bio? ssSlide not showing in page sourse.

Check control panel and pick display bio.
You might also have to put at least a space in your bio to get it to show.


Al,

I put a space in the bio page but still no luck.

Any more ideas?

...B

[Allen]

Al,

I put a space in the bio page but still no luck.

Any more ideas?

...B Does your bio show in control panel? If it is you have to toggle
display in the upper right corner.
Al

I search for bio in your page sourse the only one is way down in your sideshow code. So bio not active.

[b-grinner]

Does your bio show in control panel? If it is you have to toggle
display in the upper right corner.
Al

I search for bio in your page sourse the only one is way down in your sideshow code. So bio not active.

Oh OK with BIO not being active in SS code then how do I get the SS to appear in IE. Do I need to set this to active in the code?

[Allen]

Oh OK with BIO not being active in SS code then how do I get the SS to appear in IE. Do I need to set this to active in the code? IE? I don't see it in FF either.
The only thing I can think of it's turned off in the control panel, don't see
anything in CSS disabling it. I'm at a loss.:scratch
Al

Edit: BTW:
You have some of these \* *\ which should be /* */ at the end of your CSS.

Make sure you're logged off regular site first then log on test site.
On your test site.
If you go into your control panel do you see your BIO? Yes or No?
Yes is bad. No is good.
If yes click "display" in upper right corner.

[b-grinner]

IE? I don't see it in FF either.
The only thing I can think of it's turned off in the control panel, don't see
anything in CSS disabling it. I'm at a loss.:scratch
Al

Edit: BTW:
You have some of these \* *\ which should be /* */ at the end of your CSS.

Make sure you're logged off regular site first then log on test site.
On your test site.
If you go into your control panel do you see your BIO? Yes or No?
Yes is bad. No is good.
If yes click "display" in upper right corner.

when I go in to CP see bio: change. that is all. when I click on change there is no where to change show or not show bio.
I do not see any section in control panel for BIO either. So I guess this is good. I am confused.

I am wondering if I should just take my code from my test site and add to my good site seeing as I have the menu working. The slideshow works in my good site so once adding menu code I am guessing the good site will be fine.

What do you think?

[Allen]

when I go in to CP see bio: change. that is all. when I click on change there is no where to change show or not show bio.
I do not see any section in control panel for BIO either. So I guess this is good. I am confused.

I am wondering if I should just take my code from my test site and add to my good site seeing as I have the menu working. The slideshow works in my good site so once adding menu code I am guessing the good site will be fine.

What do you think? On regular site first copy each section to txt files for backup, CSS, footer, header, js, etc.
Then replace the menu stuff. It looks good on test site.
Al

[cindyinnc]

Allen,

I did that...or I think I did that. Now, it is not all on the same line. Am I putting it in the correct spot? Thanks so much :)

Cindy
First go back to message 52 and change your header html to what I had
there. It is not quite working as is. Then we can get it formated with the
CSS.
IE needs all the extra stuff in there.
Al

[Allen]

Allen,

I did that...or I think I did that. Now, it is not all on the same line. Am I putting it in the correct spot? Thanks so much :)

Cindy Great, now go to message 54 and replace your CSS and your menu should be formated.
Al

Edit: Your whole CSS is there in the code box in message 54, replace it all.
I just edited the code there to get the color same in IE as Firefox.

[b-grinner]

On regular site first copy each section to txt files for backup, CSS, footer, header, js, etc.
Then replace the menu stuff. It looks good on test site.
Al
HI Al,

Still at it here. I have been able to get the menu to behave as I want it to in FF. Now when I try in IE no such luck. Can you take look at my code and see what I need to do so that I get in IE too?

site name is http://testphotogs.smugmug.com.

I look forward to your reply and thanks. I am almost there. I can feel it!!

...B

[Allen]

HI Al,

Still at it here. I have been able to get the menu to behave as I want it to in FF. Now when I try in IE no such luck. Can you take look at my code and see what I need to do so that I get in IE too?

site name is http://testphotogs.smugmug.com.

I look forward to your reply and thanks. I am almost there. I can feel it!!

...B Find the following and change these. Coordinates IE & FF colors and
removes underline in IE.

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background: #000000;
color: #FFA500;
}

/* style the second level hover */
.menu ul ul a.drop:hover{
text-decoration: none;
background: #FFA500;
color: #000000;
}

.menu ul ul :hover > a.drop {
background: #FFA500;
color: #000000;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background: #FFA500;
color: #000000;
}

/* style the third level hover */
.menu ul ul ul a:hover {
text-decoration: none;
background: #FFA500;
color: #000000;
}

.menu ul ul ul :hover > a {
background: #FFA500;
color: #000000;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color: #000000;
text-decoration: none;
background: #FFA500;
}

AL

Your galleries > private > travel >Napa is not working correctly in IE.
The flyout not aligned. Will keep looking.

[cindyinnc]

I have done that now. I would like to get rid of the boxes around the nav bar and center it. Thanks so much!

Cindy
Great, now go to message 54 and replace your CSS and your menu should be formated.
Al

Edit: Your whole CSS is there in the code box in message 54, replace it all.
I just edited the code there to get the color same in IE as Firefox.

[Allen]

I have done that now. I would like to get rid of the boxes around the nav bar and center it. Thanks so much!

Cindy
Change the green width and it'll center and delete red to remove box borders.

#navcontainer {
position:relative;
display:block;
z-index:99;
padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div #navcontainer) */
width:425px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar */
}

#navcontainer ul li a,
#navcontainer ul li a:visited {
display:block;
font-size:1em; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width:100px; /* main box width */
height:20px; /* main box height */
border:1px solid black; /* start your design with borders on,
easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background:#ffffcc; /* main button color */
padding-left:0px;
line-height:20px; /* positions text up/down in box */
}

Hollar back with any questions,
Al

[b-grinner]

Find the following and change these. Coordinates IE & FF colors and
removes underline in IE.

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background: #000000;
color: #FFA500;
}

/* style the second level hover */
.menu ul ul a.drop:hover{
text-decoration: none;
background: #FFA500;
color: #000000;
}

.menu ul ul :hover > a.drop {
background: #FFA500;
color: #000000;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background: #FFA500;
color: #000000;
}

/* style the third level hover */
.menu ul ul ul a:hover {
text-decoration: none;
background: #FFA500;
color: #000000;
}

.menu ul ul ul :hover > a {
background: #FFA500;
color: #000000;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color: #000000;
text-decoration: none;
background: #FFA500;
}

AL

Your galleries > private > travel >Napa is not working correctly in IE.
The flyout not aligned. Will keep looking.

Thanks Al :clap

Working fine. However I wanted the last flyout to be set to black background and orange text. Basically I want the selected item to remain orange background with black text and the selected one to be set to orange background with black text. This way user can identify the selections they have made.

WRT to the alignment of the flyout I think it has to do with the height of the flyouts. They should be equal to height of main row, correct? I saw this before but could not find where to change in the code.

Thanks so much for your help. Can you help altering colors(as mentioned) as I tend to get eye-tied trying to figure this out. I kinda get the idea of what is happening but seem to get confused too.

...B

[Allen]

Thanks Al :clap

Working fine. However I wanted the last flyout to be set to black background and orange text. Basically I want the selected item to remain orange background with black text and the selected one to be set to orange background with black text. This way user can identify the selections they have made.

WRT to the alignment of the flyout I think it has to do with the height of the flyouts. They should be equal to height of main row, correct? I saw this before but could not find where to change in the code.

Thanks so much for your help. Can you help altering colors(as mentioned) as I tend to get eye-tied trying to figure this out. I kinda get the idea of what is happening but seem to get confused too.

...B I found how to get last flyout different in IE but FF won't cooperate.:scratch Is this what you're lookin for?


This will set IE main menu hover same as FF.
.menu a:hover, .menu ul ul a:hover {
color:#000000;
background:#FFA500;
}

This one does not work for FF
.menu ul li:hover ul li:hover ul li:hover ul li:hover {
color: #FFA500;
background: #000000;}

This one works for IE
.menu ul li a:hover ul li a:hover ul li a:hover ul li a:hover {
color: #FFA500;
background: #000000;}

AL

[b-grinner]

I found how to get last flyout different in IE but FF won't cooperate.:scratch Is this what you're lookin for?


This will set IE main menu hover same as FF.
.menu a:hover, .menu ul ul a:hover {
color:#000000;
background:#FFA500;
}

This one does not work for FF
.menu ul li:hover ul li:hover ul li:hover ul li:hover {
color: #FFA500;
background: #000000;}

This one works for IE
.menu ul li a:hover ul li a:hover ul li a:hover ul li a:hover {
color: #FFA500;
background: #000000;}

AL

I do not think so. If I can simplify what I am after is for all items to be black background with orange text. As soon as I hover/select an item it should turn to orange background wiht black text. If I hover over an item it would reverse to orange background/black text. If I go down to next item in same menu list the previous one should revert back to black background/orange text. I hope I am making myself clear. I know how confusing this can be when describing it in written type.

...B

[cindyinnc]

Al,

Okay, I think I have that now. I think it needs to be moved up some though??? Ya think? I also think it may look better with just white text on a black background with no borders. I owe you big time for all your help!


Thanks :)
Cindy
Change the green width and it'll center and delete red to remove box borders.

#navcontainer {
position:relative;
display:block;
z-index:99;
padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div #navcontainer) */
width:425px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar */
}

#navcontainer ul li a,
#navcontainer ul li a:visited {
display:block;
font-size:1em; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width:100px; /* main box width */
height:20px; /* main box height */
border:1px solid black; /* start your design with borders on,
easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background:#ffffcc; /* main button color */
padding-left:0px;
line-height:20px; /* positions text up/down in box */
}

Hollar back with any questions,
Al

[b-grinner]

I do not think so. If I can simplify what I am after is for all items to be black background with orange text. As soon as I hover/select an item it should turn to orange background wiht black text. If I hover over an item it would reverse to orange background/black text. If I go down to next item in same menu list the previous one should revert back to black background/orange text. I hope I am making myself clear. I know how confusing this can be when describing it in written type.

...B

Al,

I think I have it. Working in FF. Now in IE it just does not seem to be hilighting the last flyout.

The height issue still prevails in IE too.

...B

[Allen]

I do not think so. If I can simplify what I am after is for all items to be black background with orange text. As soon as I hover/select an item it should turn to orange background wiht black text. If I hover over an item it would reverse to orange background/black text. If I go down to next item in same menu list the previous one should revert back to black background/orange text. I hope I am making myself clear. I know how confusing this can be when describing it in written type.

...B
Is this better? FF works. IE works except for blog. Still looking at that.

.menu ul li ul li a,
.menu ul li a ul li a ul li a ul li a {
color: #FFA500;
background: #000000;}

.menu ul li:hover ul li:hover ul,
.menu ul li:hover ul li:hover ul li:hover,
.menu ul li a:hover ul li a:hover ul li a:hover ul li a:hover {
color: #000000;
background: #FFA500;}
Al

[b-grinner]

Is this better? FF works. IE works except for blog. Still looking at that.

.menu ul li ul li a,
.menu ul li a ul li a ul li a ul li a {
color: #FFA500;
background: #000000;}

.menu ul li:hover ul li:hover ul,
.menu ul li:hover ul li:hover ul li:hover,
.menu ul li a:hover ul li a:hover ul li a:hover ul li a:hover {
color: #000000;
background: #FFA500;}
Al

Al,

I replied before receiving this that I now have it working fully in FF but not IE. The problem in IE is the very last flyout. It is not highlighting correctly. Does the above code still need to be added?

...Bruce

[Allen]

Al,

Okay, I think I have that now. I think it needs to be moved up some though??? Ya think? I also think it may look better with just white text on a black background with no borders. I owe you big time for all your help!
Thanks :)
Cindy
Add the green to move menu up and play with left's to center.

Change the padding to 0px to minimize the space around it.


#navcontainer {
top: -40px;
left: 10px; /* FF */
_left: 10px; /* IE */
position:relative;
display:block;
z-index:99;
padding: 0px 0px 0px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div #navcontainer) */
width: 425px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar */
}

The dropdowns are different widths for FF & IE. Would you like
them wide enough so each item fits on one line like IE? If so change
the width as shown

#navcontainer ul li:hover ul li a {
display:block;
background:#ff00ff; /* DD FO non-hover */
color:black; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:150px /* DD FO box width */
}

Al

[b-grinner]

Is this better? FF works. IE works except for blog. Still looking at that.

.menu ul li ul li a,
.menu ul li a ul li a ul li a ul li a {
color: #FFA500;
background: #000000;}

.menu ul li:hover ul li:hover ul,
.menu ul li:hover ul li:hover ul li:hover,
.menu ul li a:hover ul li a:hover ul li a:hover ul li a:hover {
color: #000000;
background: #FFA500;}
Al

Al, I inserted this code to give it a try and guess what!! It is working!!!:clap

Kudos!! Thank you.

Now just need to tackle the height issue on the fly outs in IE. Any ideas?

...B

[Allen]

Al, I inserted this code to give it a try and guess what!! It is working!!!:clap

Kudos!! Thank you.

Now just need to tackle the height issue on the fly outs in IE. Any ideas?

...B Try this one, moves drops down in IE
/* another hack for IE5.5 */
* html .menu ul ul {
top:20px;
t\op:17px; /* Distance between main bar and dropdown list*/
}

That travel > napa thing in IE, I'm thinking it's in the html but can't find it.

Edit: I plugged the CSS in from here (http://allen-steve.smugmug.com/gallery/2078255) and everything worked. Even
the private > travel > napa thing. So it is something in the CSS.

[b-grinner]

Try this one, moves drops down in IE
/* another hack for IE5.5 */
* html .menu ul ul {
top:20px;
t\op:17px; /* Distance between main bar and dropdown list*/
}

That travel > napa thing in IE, I'm thinking it's in the html but can't find it.

Edit: I plugged the CSS in from here (http://allen-steve.smugmug.com/gallery/2078255) and everything worked. Even
the private > travel > napa thing. So it is something in the CSS.
Thanks for the 17px adjustment. That seems to have solved it.

WRT the travel>napa thing in IE I am wondering what tweak is needed here.
So you figure it is in CSS. I also thought it was in HTML. I was going to check it
out but I guess I will not now.

Let me know if you find something in CSS that is causing the issue.

Thanks again for all this help. You have been great.

[Allen]

Thanks for the 17px adjustment. That seems to have solved it.

WRT the travel>napa thing in IE I am wondering what tweak is needed here.
So you figure it is in CSS. I also thought it was in HTML. I was going to check it
out but I guess I will not now.

Let me know if you find something in CSS that is causing the issue.

Thanks again for all this help. You have been great.
Could not find why travel>napa is borked.:scratch

Just for the fun of it I replace the whole nav CSS with the one from here (http://allen-steve.smugmug.com/gallery/2078255)
and got everything to work except for last flyout, the previous button path
don't highlight in FF.

Here the CSS. If you want to try it be sure to save your original in a txt file
first.

/* 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 */

/* Common Styling */
.menu {
position:relative;
display:block;
z-index:99;
padding:5px 0px 15px 0px; /* spacing around menu - top right bottom left */
height:auto; /* menu container (div .menu) */
width:553px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
padding:10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {
display:block;
font-size:10px; /* main buttons */
color: #FFA500; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width:90px; /* main box width */
height:20px; /* main box height */
border:1px solid #242424; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: #000000; /* main button color */
padding-left:0px;
line-height:20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width:90px; w\idth:90px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #000000; /* main when hover DD */
background: #FFA500; /* main when hover DD */
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:-4px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left:0px; /* FF DD right left */
width:104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000000; /* DD FO non-hover */
color: #FFA500; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:90px /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #FFA500; /* DD FO hover */
color: #000000; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:92px; /* FF FO right left */
top:-27px; /* FF FO up down */
width:90px; /* FF FO box width */
}

.menu ul li:hover ul li:hover ul.left {
left:-134px; /* unknown - previously defined */
} /* class of .left for left flyouts? */

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
color: #000000; /* main hover */
background: #FFA500; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top:2px; left:0; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:7px;
margin-top:7px; /* DD container up down */
left:0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #000000; /* IE DD color non-hover */
color: #FFA500; /* IE DD color non-hover */
height:auto;
line-height:20px; /* IE DD FO box height */
padding:0px;
width:90px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}

.menu ul li a:hover ul li a:hover {
background: #FFA500; /* DD FO hover includes menu 6 */
color: #000000; /* DD FO hover includes menu 6 */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top:-22px; /* FO up down */
color: #000000; /* unknown */
left:92px; /* FO right left */
}

/* following commented out for now not sure if needed */
.menu ul li a:hover ul li a:hover ul {
text-decoration:none; /* IE effects FO1 & FO2 */
color: #FFA500 ; /* IE effects line-through above FO1 & FO2 */
font-size:10px; /* IE effects FO2 only */}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width:125px;
width:139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
t\op:auto 0; left:0;
}

/* Temporary fixes WebDev yellow element box wrap */
/* If changing table to .menu table above (Thanks to Ivan) */
/* this maybe not needed */
/* #webdeveloper-element-information table {
position:relative;
} */

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width:125px; /* unknown */
w\idth:104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color: #000000;
text-decoration: none;
background: #FFA500;
}

/* ==== END NAVBAR CSS CODE ==== */

Al

[b-grinner]

Could not find why travel>napa is borked.:scratch

Just for the fun of it I replace the whole nav CSS with the one from here (http://allen-steve.smugmug.com/gallery/2078255)
and got everything to work except for last flyout, the previous button path
don't highlight in FF.

Here the CSS. If you want to try it be sure to save your original in a txt file
first.

/* 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 */

/* Common Styling */
.menu {
position:relative;
display:block;
z-index:99;
padding:5px 0px 15px 0px; /* spacing around menu - top right bottom left */
height:auto; /* menu container (div .menu) */
width:553px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
padding:10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {
display:block;
font-size:10px; /* main buttons */
color: #FFA500; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width:90px; /* main box width */
height:20px; /* main box height */
border:1px solid #242424; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: #000000; /* main button color */
padding-left:0px;
line-height:20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width:90px; w\idth:90px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #000000; /* main when hover DD */
background: #FFA500; /* main when hover DD */
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:-4px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left:0px; /* FF DD right left */
width:104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000000; /* DD FO non-hover */
color: #FFA500; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:90px /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #FFA500; /* DD FO hover */
color: #000000; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:92px; /* FF FO right left */
top:-27px; /* FF FO up down */
width:90px; /* FF FO box width */
}

.menu ul li:hover ul li:hover ul.left {
left:-134px; /* unknown - previously defined */
} /* class of .left for left flyouts? */

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
color: #000000; /* main hover */
background: #FFA500; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top:2px; left:0; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:7px;
margin-top:7px; /* DD container up down */
left:0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #000000; /* IE DD color non-hover */
color: #FFA500; /* IE DD color non-hover */
height:auto;
line-height:20px; /* IE DD FO box height */
padding:0px;
width:90px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}

.menu ul li a:hover ul li a:hover {
background: #FFA500; /* DD FO hover includes menu 6 */
color: #000000; /* DD FO hover includes menu 6 */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top:-22px; /* FO up down */
color: #000000; /* unknown */
left:92px; /* FO right left */
}

/* following commented out for now not sure if needed */
.menu ul li a:hover ul li a:hover ul {
text-decoration:none; /* IE effects FO1 & FO2 */
color: #FFA500 ; /* IE effects line-through above FO1 & FO2 */
font-size:10px; /* IE effects FO2 only */}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width:125px;
width:139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
t\op:auto 0; left:0;
}

/* Temporary fixes WebDev yellow element box wrap */
/* If changing table to .menu table above (Thanks to Ivan) */
/* this maybe not needed */
/* #webdeveloper-element-information table {
position:relative;
} */

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width:125px; /* unknown */
w\idth:104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color: #000000;
text-decoration: none;
background: #FFA500;
}

/* ==== END NAVBAR CSS CODE ==== */
Al

Hi Al,

Burning the midnight oil with this thing. It's driving me batty. I copied your code and it looks really good. I think we are pretty well there. It looks to be working for me. Last flyout appears to work.

Thanks so much with this and for sticking with it. I know it can be frustrating. You have been a big help. I am signing off for the night.

Have a Merry xmas too!!

...Bruce:thumb

[cindyinnc]

Al,

I think I have my nav bar where I want it now. I am so happy that you helped me. I am so amazed at how great you were to me! Thanks so much for everything! I am off to try to fix some other things now....I want a slideshow and need to make my html only pages look better.

I hope you have a wonderful holiday!

Cindy
Al,

Okay, I think I have that now. I think it needs to be moved up some though??? Ya think? I also think it may look better with just white text on a black background with no borders. I owe you big time for all your help!


Thanks :)
Cindy

[akhoopes]

ive been playing around now trying to learn how to do this and im stuck, so maybe somebody here can help, i set up the nav bar and im ok with that but on my home page its covered up by a box that has my nickname and homepage written on it, how do i get ride of this box, you can check out

http://www.jumpingthrew.smugmug.com/

to see what im talking about. thanks so much

[Allen]

ive been playing around now trying to learn how to do this and im stuck, so maybe somebody here can help, i set up the nav bar and im ok with that but on my home page its covered up by a box that has my nickname and homepage written on it, how do i get ride of this box, you can check out

http://www.jumpingthrew.smugmug.com/

to see what im talking about. thanks so much
Looks like you fixed it. Looks good.
Al

[Nate]

Ok, I've searched far and wide, but haven't been able to stumble across an answer to my particular issue. I am trying to have my navbar width = 760 in order to align perfectly with my custumized header which is also 760. However, no matter how much I increase/decrease, add padding, remove padding, put margins to 0 etc, it doesn't fix. It looks to be only off by a few px. Any suggestions?
:dunno
www.cin-axis.smugmug.com (http://www.cin-axis.smugmug.com)

[Allen]

Ok, I've searched far and wide, but haven't been able to stumble across an answer to my particular issue. I am trying to have my navbar width = 760 in order to align perfectly with my custumized header which is also 760. However, no matter how much I increase/decrease, add padding, remove padding, put margins to 0 etc, it doesn't fix. It looks to be only off by a few px. Any suggestions?
:dunno
www.cin-axis.smugmug.com (http://www.cin-axis.smugmug.com)
Try adjusting the button widths.

.menu ul li a,
.menu ul li a:visited {
width:148px; /* main box width */
}

Al

[Nate]

Try adjusting the button widths.

.menu ul li a,
.menu ul li a:visited {
width:148px; /* main box width */
}

Al

That did it, thanks Al.

[Montec]

Yesterday I received some extensive help from Al and got my navbar tweaked just perfect including drop down menu.

When I logged out last night it was perfect in both IE and Firefox.

Today, for some reason the last two items in my navbar are scrunched together in IE. How could this happen, nothing was changed?

www.kootenayphotography.com (http://www.kootenayphotography.com)

[Allen]

Yesterday I received some extensive help from Al and got my navbar tweaked just perfect including drop down menu.

When I logged out last night it was perfect in both IE and Firefox.

Today, for some reason the last two items in my navbar are scrunched together in IE. How could this happen, nothing was changed?

www.kootenayphotography.com (http://www.kootenayphotography.com) Did you fix it? The're not showing here scrunched in IE6.

Noticed the code for IE needs to be tweaked to align your dropdowns.
Find this and change the green and remove red. I think that should do it but can't confirm.

#navcontainer ul li a:hover ul {
display:block;
position:absolute;
top:2px; left:0; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:7px; << duplicate REMOVE
margin-top:7px; /* DD container up down */
left:0px; /* DD right left */
}

Al

[Montec]

Did you fix it? The're not showing here scrunched in IE6.
Al

It must be just my browser then because the last two items in the navbar do not have a space separating them.

I just checked on another computer and they look fine....darned IE...

I cleared the cache, deleted temp files, still the same.

Thanks for you help, It is an IE7 problem I will need to sort out.

[Montec]

I changed the above code and now my navbar in FireFox is scrunched together.
Same kind of problem I have with IE but only the last two items in IE are scrunched together.

Why would it work perfect yesterday and then not today?


Update: I fixed it in IE but FF still is aligned wonky and text is wrong but for now I can live with the IE being correct.

[CAS]

Hi - a quick question for which I couldn't locate an answer in previous threads - this seemed like the right place to ask it - if not, sorry for cutting in on someone else's train of thought:

I've been running my site with a handful of minor code additions in the CSS, Header and Javascript sections of Customize for the past few months. I'd like to try Ivar's Banner-Navbar-Slideshow tutorial. To dip my toe in the water, I inserted some of his instructions, and tried the Preview feature for my homepage, but no changes appeared in the preview window. Am I using the program incorrectly? or before starting do I have to take my site back to all the defaults first, then insert Ivar's suggested code? or use update and log out/log back in? something else? With little experience at this, I didn't want to risk trashing my site without a preview.

Thanks. Chuck

[Montec]

I have a problem with my navbar not lining up correctly in FireFox. I would like to have it look the same as it does in IE.

I would appreciate any help.

www.kootenayphotography.com (http://www.kootenayphotography.com)

[Nate]

That did it, thanks Al.

One more question, i hope. Now that I've got my total navbar width in check, it seems to have knocked my second level dropdowns out of adjustment. It is strange too, because the dropdown on the far right (the "more" link) seems to have been effected more so than the others. Any suggestions?

www.cin-axis.smugmug.com

[Allen]

One more question, i hope. Now that I've got my total navbar width in check, it seems to have knocked my second level dropdowns out of adjustment. It is strange too, because the dropdown on the far right (the "more" link) seems to have been effected more so than the others. Any suggestions?

www.cin-axis.smugmug.com (http://www.cin-axis.smugmug.com)
A quick look at your html and it needs a little clean up. Might not see the difference in firefox but IE might hiccup.
Remove the red and add the green.

<div align="center">
<div class="menu">

<ul>
<li><a class="drop" href="http://cin-axis.smugmug.com">Home
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://cin-axis.smugmug.com/date/2006-11-24/2006-12-24">Recent</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="http://cin-axis.smugmug.com/Nate%20Menefee">Nate Menefee
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://cin-axis.smugmug.com/Nate%20Menefee/265358">Juneau</a></li>
<li><a href="http://cin-axis.smugmug.com/Nate%20Menefee/265361">Events/Weddings</a></li>
<li><a href="http://cin-axis.smugmug.com/Nate%20Menefee/265363">Landscapes</a></li>
<li><a href="http://cin-axis.smugmug.com/Nate%20Menefee/265359">Travel</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.cin-axis.smugmug.com/Matt%20Weber">Matt Weber</a></li>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.cin-axis.smugmug.com/gallery/1725733">Professional Portfolio</a></li>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="http://www.cin-axis.smugmug.com">More
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://cin-axis.smugmug.com/gallery/2270125">Guestbook</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div><!-- end of info -->
BTW, the centering shown in pink above can easily be done with CSS and
can be deleted here.

I'll dig into your CSS next and see what I can find. It is a weird one.
Hang on and check back here later,
Al

[Allen]

One more question, i hope. Now that I've got my total navbar width in check, it seems to have knocked my second level dropdowns out of adjustment. It is strange too, because the dropdown on the far right (the "more" link) seems to have been effected more so than the others. Any suggestions?

www.cin-axis.smugmug.com (http://www.cin-axis.smugmug.com)
If you remove the centering pink in previous message and add green to CSS
it centers your navbar.

.menu {
width:750px;
font-size:0.85em;
padding-bottom:10px;
margin:0 auto;
}

.menu ul li a,
.menu ul li a:visited {
width:148px; /* main box width */
text-align:center;
}
Still looking at dropdown weirdness.
Al

Edit: If you change the red above the dropdowns line
up better. That's all I could find. Although it makes
your menu slightly smaller then your banner.

[Nate]

If you remove the centering pink in previous message and add green to CSS
it centers your navbar.

.menu {
width:750px;
font-size:0.85em;
padding-bottom:10px;
margin:0 auto;
}

.menu ul li a,
.menu ul li a:visited {
width:148px; /* main box width */
text-align:center;
}
Still looking at dropdown weirdness.
Al

Edit: If you change the red above the dropdowns line
up better. That's all I could find. Although it makes
your menu slightly smaller then your banner.

Thanks Al, I made the html changes you suggested - all of that worked ok. It didn't seem to change the dropdown alignment.

I can of course resize my banner image, but it seemed odd that i couldn't get the navbar to be 760 with drop downs functioning as normal.

[MichaelKirk]

My Navbar works perfect with FF and IE6....but with IE7 my Navbar is having an issue.

Using IE7 when you hold the mouse over a main table I will get the drop downs....BUT as soon as you move the mouse to a drop down table the drop downs dissapear. I may have to try once - sometimes I will have to try 5-6 times before I am allowed to move a mouse to a dropdown and the dropdows will stay visable and allow me to choose a gallery.

Example from my page:
I will hold the mouse over the "Products/Services" table
drops downs appear "Photo Products - Sports Posters - Photo Templates - 2007 Calendars - etc"
I move the mouse down into the dropdown selections and the drop downs dissapear and I have no ability to choose a dropdown gallery.
It may work the next time I try....sometimes I need to try 5-6 times befoe it will work.

Doesn't happen 100% of the time to each table main topic and it doesnt require the same number of attempts to get it to work - more of a random problem.

Anyone else having this issue and is there a way to fix it?

Thanks,
Michael

[Nate]

My Navbar works perfect with FF and IE6....but with IE7 my Navbar is having an issue.

Using IE7 when you hold the mouse over a main table I will get the drop downs....BUT as soon as you move the mouse to a drop down table the drop downs dissapear. I may have to try once - sometimes I will have to try 5-6 times before I am allowed to move a mouse to a dropdown and the dropdows will stay visable and allow me to choose a gallery.

Example from my page:
I will hold the mouse over the "Products/Services" table
drops downs appear "Photo Products - Sports Posters - Photo Templates - 2007 Calendars - etc"
I move the mouse down into the dropdown selections and the drop downs dissapear and I have no ability to choose a dropdown gallery.
It may work the next time I try....sometimes I need to try 5-6 times befoe it will work.

Doesn't happen 100% of the time to each table main topic and it doesnt require the same number of attempts to get it to work - more of a random problem.

Anyone else having this issue and is there a way to fix it?

Thanks,
Michael

Michael, did you find a fix for this? Your page worked great for me using FF and IE7. I'm interested because I've made some adjustments to my own navbar and seem to be encountering the same issue you were having.

Thanks,
Nate

www.cin-axis.smugmug.com

[jclguru]

Not sure if this is the same problem or not,

With my menu, any selection that falls over top of my photo
on my home page disappears and I can't select it (this also happens
with my filmstrips).

This seems to be only happening on IE 6. IE 7 is fine.

So if anyone has any suggestions, I'm all ears.

Doug

www.dwphotographer.com (http://www.dwphotographer.com)

[Allen]

My Navbar works perfect with FF and IE6....but with IE7 my Navbar is having an issue.

Using IE7 when you hold the mouse over a main table I will get the drop downs....BUT as soon as you move the mouse to a drop down table the drop downs dissapear. I may have to try once - sometimes I will have to try 5-6 times before I am allowed to move a mouse to a dropdown and the dropdows will stay visable and allow me to choose a gallery.

Example from my page:
I will hold the mouse over the "Products/Services" table
drops downs appear "Photo Products - Sports Posters - Photo Templates - 2007 Calendars - etc"
I move the mouse down into the dropdown selections and the drop downs dissapear and I have no ability to choose a dropdown gallery.
It may work the next time I try....sometimes I need to try 5-6 times befoe it will work.

Doesn't happen 100% of the time to each table main topic and it doesnt require the same number of attempts to get it to work - more of a random problem.

Anyone else having this issue and is there a way to fix it?

Thanks,
Michael I've had this before and the only solution I could find is moving the
dropdown up to close the gap. So play the the dropdown up/down
movement. In combination with that, another possibility is the height of the
boxes and the height of the active area, mouse hover, of the box. On my
site, main buttons only, the top half only has the hover mouse hand. :scratch It
works in FF & IE6 so I haven't worried about it, but who knows, IE7 might
be b00rked.

Al

[Oxenhampics]

Ivar's site has a pretty cool nav bar, I was wondering how to do the all caps trick where the overline only goes over the smaller letters, and all of the letters are in caps. Any help?

Thx

[MichaelKirk]

I just went to your site and your Navbar is having the same issues - inability to select some of your dropdowns - the will drop down when the curser is over the words - but when you move the curser to select the new gallery - all the dropdown words dissapear leaving me the inability to select anything. Dos not happen each and every time I try to select though.

Michael





I've had this before and the only solution I could find is moving the
dropdown up to close the gap. So play the the dropdown up/down
movement. In combination with that, another possibility is the height of the
boxes and the height of the active area, mouse hover, of the box. On my
site, main buttons only, the top half only has the hover mouse hand. :scratch It
works in FF & IE6 so I haven't worried about it, but who knows, IE7 might
be b00rked.

Al

[Allen]

I just went to your site and your Navbar is having the same issues - inability to select some of your dropdowns - the will drop down when the curser is over the words - but when you move the curser to select the new gallery - all the dropdown words dissapear leaving me the inability to select anything. Dos not happen each and every time I try to select though.

Michael Thanks Michael,
Below are the two things I tweaked to align the dropdown to get
rid of the gap.

/* ----------- dropdown ---------- */
.menu ul li a:hover ul,
#familyMenu ul li a:hover ul,
#selectcontainer1 ul li a:hover ul,
#selectSSBill ul li a:hover ul {
display:block; z-index:99;
position: absolute !important;
top:19px; /* IE DD container up down */
left:15px; _left:0px; /* IE DD right left */
background:#000000;
margin-top:0px; marg\in-top:0px;}


/* ----------- Flyout ----------- */
.menu ul li a:hover ul li a:hover ul,
#familyMenu ul li a:hover ul li a:hover ul,
#selectcontainer1 ul li a:hover ul li a:hover ul,
#selectSSBill ul li a:hover ul li a:hover ul {
visibility:visible; z-index:99;
position: absolute !important;
top:-2px; /* IE FO up down */
color:#8f7b62;
left:136px;} /* IE FO right left */

[MichaelKirk]

Lookslike your code is different thant mine - or I just have the inability to matcg them up. Any chance you would take a look at mine to see where I need to make the change and try and impliment the fix?

Thanks,
Michael

/* 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 */

/*Common Styling*/
.menu {
position:relative;
z-index:99;
padding-top:10px; /* space above */
padding-bottom:10px; /* space below */
height:20px;
font-size:.9em;
display:block;
width:750px;
margin:0 auto;
left:5px; /* center menu FF */
_left:5px; /* center menu IE */
}

.menu ul {
padding:10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {
display:block;
font-size:1em; /* main buttons */
text-decoration:none;
color:#e3cfb5;
text-align:center;
width:100px; /* main box width */
height:20px; /* main box height */
color:#e3cfb5; /* unknown */
border:1px SOLID BLACK;
border-width: 1px 1px 1px 1px;
background:#000000; /* main button color */
color:white; /* main buttons text */
padding-left:0px;
line-height:20px;
}


* html .menu ul li a, .menu ul li a:visited {
width:104px; w\idth:104px; /* IE main button */
}

.menu ul li ul {
display:none;}

.droptable1, .droptable2, .droptable3, .droptable4, .droptable5, .droptable6, .droptable7, .droptable8, .droptable9, .droptable10, .droptable11, .droptable12, .droptable13 {
margin:-1px; /* unknown */
border-collapse:collapse;
font-size:12px SOLID BLACK; /* unknown */
text-align:center; /* unknown */
}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color:black; /* main when hover DD */
background:white; /* main when hover DD */
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:-4px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left:0px; /* FF DD right left */
width:104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background:WHITE; /* DD FO non-hover */
color:BLACK; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:145px /* DD box width */
}

.menu ul li:hover ul li a:hover {
background:#CCCCCC;
color:#000000;}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:147px; /* FF FO right left */
top:-27px; /* FF FO up down */
width:146px; /* FF FO box width */
} /* this toppx number controls how flyouts line up */

.menu ul li:hover ul li:hover ul.left {
left:-134px;
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
color:black; /* main hover */
background:white; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top:2px; left:0; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:7px;
marg\in-top:7px; /* DD container up down */
left:0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background:white; /* IE DD color non-hover */
color:black; /* IE DD color non-hover */
height:auto;
line-height:20px; /* IE DD FO box height */
padding:0px;
w\idth:145px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0; width:0;
}

.menu ul li a:hover ul li a:hover {
background:white; /* DD FO hover */
color:black; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top:-22px; /* FO up down */
color:#000000;
left:147px; /* FO right left */
}

/*this toppx number controls how flyouts line up - was at 10 originally*/ /* changed visibility: visible to display: block just above to make IE flyouts hide until hovered over */

.menu ul li a:hover ul li a:hover ul.left {
left:-134px;
}

/* this isn't working here */
.menu ul li a:hover ul li a:hover ul {
text-decoration: none;
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width:125px;
w\idth:139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in the layout - required for IE to work */

.menu table {
position:absolute;
top:auto 0; left:0;
}

#webdeveloper-element-information table {
position:relative;
}


/* yet another hack for IE5.5 */

* html .menu ul ul a{
width:125px; /* unknown */
w\idth:104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the second level visible when hover on first level list OR link */

.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */

.menu ul :hover ul ul{
visibility:hidden;
}

/* keep the fourth level hidden when you hover on second level list OR link */

.menu ul :hover ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */

.menu ul :hover ul :hover ul{
visibility:visible;
}

/* make the fourth level visible when you hover over third level list OR link */

.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}

/* END NAVBAR CSS CODE */

[Allen]

Lookslike your code is different thant mine - or I just have the inability to matcg them up. Any chance you would take a look at mine to see where I need to make the change and try and impliment the fix?

Thanks,
Michael
We're just about ready to move back home now that the powers
back on so it'll be a few hours before I'll look into this.


Look at this to tweak. Oops red twice
.menu ul li a:hover ul {
display:block;
position:absolute;
top:2px; left:0px; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:7px;
marg\in-top:7px; /* DD container up down */
left:0px; /* DD right left */
}

Later
Al

[ivar]

Ivar's site has a pretty cool nav bar, I was wondering how to do the all caps trick where the overline only goes over the smaller letters, and all of the letters are in caps. Any help?

ThxHi Oxenhampics :wave

I think I might be able to help you with this :D

What I did, is class the Capital different from the rest of the link.

Example: "Home"

<a href="http://nickname.smugmug.com"><span class="caps">H</span><span class="overlined">ome</span></a>

And now you can use CSS to style them differently.

Use text-transform: uppercase; for your menu, and something like this:

.caps {
font-size: 1.4em;
}

a:hover .overlined {
text-decoration: overline;
}to get the overline and large caps.

I hope this helps. Let me know if you have any questions.

[CavalierPhoto]

I've been following the separate galleries page and navbar threads and am mulling over the possibility of incorporating the separate galleries on my own site.

My dilemma is that I have two distinct galleries, one for my photos and one for my wife's photos. I had no problem creating the separate gallery pages for each of them and have that code setting aside until I can figure out whether or not it's possible to have different navbars for the homepage and the two gallery pages. I want to maintain the look and feel of the homepage on the other two (possibly trying to incorporate separate SS's on each but I'll save that for another day) which will make this easy but I just want to change the navbars according to what is in each gallery. I've searched through the forums and didn't see anything that specifically mentioned whether or not this would be possible and if so how to implement.

Any ideas as to whether different navbars are possible on different pages?

[Allen]

I've been following the separate galleries page and navbar threads and am mulling over the possibility of incorporating the separate galleries on my own site.

My dilemma is that I have two distinct galleries, one for my photos and one for my wife's photos. I had no problem creating the separate gallery pages for each of them and have that code setting aside until I can figure out whether or not it's possible to have different navbars for the homepage and the two gallery pages. I want to maintain the look and feel of the homepage on the other two (possibly trying to incorporate separate SS's on each but I'll save that for another day) which will make this easy but I just want to change the navbars according to what is in each gallery. I've searched through the forums and didn't see anything that specifically mentioned whether or not this would be possible and if so how to implement.

Any ideas as to whether different navbars are possible on different pages? Sure, and it's not all that difficult. You now have #navcontainer so just
make another and call it #navcontainerWife or whatever.

Note: * 's added to enable display here. Don't add.

<*div id="navcontainerWife"*>
<*ul>
<*li><*a href="http://cavalierphotographic.smugmug.com/wifesGallery">WifesHome<*/a><*/li>
....

In your CSS add both as shown below

#navcontainer ul,
#navcontainerWife ul {
margin: 0;
padding: 12.5px;
list-style-type: none;
text-align: center;
}

#navcontainer ul li,
#navcontainerWife ul li
{ display: inline; }

#navcontainer ul li a,
#navcontainerWife ul li a {
text-decoration: none;
padding: .5em .5em;
}

Then also in CSS turn each on for what ever pages you want,
something like below.

#navcontainer {display:block;}
.category_wife #navcontainer {display:none;}

#navcontainerWife {display:none;}
.category_wife #navcontainerWife {display:block;}

This is very basic but should give an idea of what's needed. Holler back and
we'll help you with every step if need be.
Al

[CavalierPhoto]

I think I grasp it and I had all of the appropriate code in and was doing the update and Smugmug went down. Oh well, what can you do...

Guess I'll have to wait to see if it worked or not.

[CavalierPhoto]

Allen,

I actually ended up doing three navbars (Homepage, PhotosbyChris, PhotosbyLiz).

I've got two duplicate pages (PhotosbyChris, PhotosbyLiz) that I wanted the Homepage navbar (buttons for photos by chris and photos by liz) to be replaced by the appropriate buttons for each respective page.

First go round they all showed up on the Homepage and I lost the SS. Fixed that and was able to only have the Homepage navbar show up on the homepage like it was supposed to.

Clicking on either Photos by Chris or Photos by Liz seems to take me to the appropriate page but the navbar doesn't change to the appropriate one.

I double checked everything and the only thing I didn't put in was the .category_wife #navcontainer {display:none;} mainly because I was confused regarding category_wife and whether that should be changed accordingly. I might be missing something after staring at it and trying various things but now I'm stumped.

[Allen]

Allen,

I actually ended up doing three navbars (Homepage, PhotosbyChris, PhotosbyLiz).

I've got two duplicate pages (PhotosbyChris, PhotosbyLiz) that I wanted the Homepage navbar (buttons for photos by chris and photos by liz) to be replaced by the appropriate buttons for each respective page.

First go round they all showed up on the Homepage and I lost the SS. Fixed that and was able to only have the Homepage navbar show up on the homepage like it was supposed to.

Clicking on either Photos by Chris or Photos by Liz seems to take me to the appropriate page but the navbar doesn't change to the appropriate one.

I double checked everything and the only thing I didn't put in was the .category_wife #navcontainer {display:none;} mainly because I was confused regarding category_wife and whether that should be changed accordingly. I might be missing something after staring at it and trying various things but now I'm stumped.
:DCategoryWife was just an attempt of signifying the location
of her start page. Looks like it should be this. It puts the two
menus on all general pages except chis and liz.

#navcontainer {display:block;}

#navcontainerHomepage {display:block;}

.PhotosbyLiz #navcontainerHomepage,
.category_Liz #navcontainerHomepage,
.PhotosbyChris #navcontainerHomepage,
.category_Chris #navcontainerHomepage,
#navcontainerPhotosbyChris,
#navcontainerPhotosbyLiz,
.PhotosbyLiz #navcontainer,
.category_Liz #navcontainer,
.PhotosbyChris #navcontainer,
.category_Chris #navcontainer {display:none;}

.PhotosbyLiz #navcontainerPhotosbyLiz,
.category_Liz #navcontainerPhotosbyLiz {display:block;}

.PhotosbyChris #navcontainerPhotosbyChris,
.category_Chris #navcontainerPhotosbyChris {display:block;}

How's this work?
Al

Edit: might have to rethink this. .PhotosbyChris & .PhotosbyLiz are single pages that you can have each nav on, but if you want the menu to follow under to galleries like deep into a category you need to assign menu to cats.

[CavalierPhoto]

Thanks for the assistance Allen,

I gave that a shot and still had the same results, Navbar never changed. Now that I'm clear on the location designations :D I may fiddle around with it some more at a later time. I've got all of the code stashed away in a text file so as long as I cut and paste to the proper place should be pretty easy. I'll keep my eyes peeled in the forums to see if anyone else may have some luck with it.

I wasn't going to go too much further than the sub-category level for the navbars especially since I only really use two, Infrared Photography and Color Photography. Going much further than that would have become a maintenance issue, i.e. adjusting navbars everytime a gallery was added.

Thanks again,
Chris V.

[xris]

Newbie here. I find this forum format to be quite confusing, but I think I have the correct thread and I'm hoping I'm posting correctly here.

I've followed the Nav Bar tutorial and it's worked well, but with verticle spacing problems. After sliding through this forum for about an hour I got most of the spacing problems worked out too. But one problem remains:

My nav bar sits well on my home page and in all my galleries, but on the category pages it crowds the top of the display area.

Any suggestions?

I'm xris.smugmug

[Allen]

Newbie here. I find this forum format to be quite confusing, but I think I have the correct thread and I'm hoping I'm posting correctly here.

I've followed the Nav Bar tutorial and it's worked well, but with verticle spacing problems. After sliding through this forum for about an hour I got most of the spacing problems worked out too. But one problem remains:

My nav bar sits well on my home page and in all my galleries, but on the category pages it crowds the top of the display area.

Any suggestions?

I'm xris.smugmug Add this to your CSS.
Play with the green to suit.

.category #navcontainer {
margin-bottom: 20px;
}

Hope this helps
Al

[Mac Swenson]

Ive been spinning my wheels going through the different tutorials and browsing the forums here. What i get stuck with is, where are the links for a gallery page to insert in the nav bar code? I cannot for the life of me figure out where this is. Do i need to create this as an entire new page? I already have the galleries show up on my home page, but that is out of necessity since there is no ther way to view them. Any help is much appreciated.

Mac

P.S. My site is http://macswenson.smugmug.com/

[Mac Swenson]

For about the past 3 hours, I have been trying to get a nav bar working. I have abbondoned all other projects to focus on this, but I have been at a stand still. I have inserted the code as the tutorial says, but where im totaly lost is where i am suppose to get the links from. (the ones shown in the code here, http://dgrin.smugmug.com/gallery/1932803/1/98079641/Large ) So for example, if i want to make the 'Gallery' link work, where do i get that specific link from? At the moment, i have it liked to somewhere, but thats just the ruins of a previous attempt. It there a way to create a seperate page which i could have the link take the viewer to? In other words, where do you link your gallery page to? If im too vague, or if im just rambling, just ask me to clarify, I'm rather flustered, so i can understand if you dont understand a word I've just said.

Thanks, Mac

My site is located at www.macswenson.smugmug.com

[Allen]

For about the past 3 hours, I have been trying to get a nav bar working. I have abbondoned all other projects to focus on this, but I have been at a stand still. I have inserted the code as the tutorial says, but where im totaly lost is where i am suppose to get the links from. (the ones shown in the code here, http://dgrin.smugmug.com/gallery/1932803/1/98079641/Large ) So for example, if i want to make the 'Gallery' link work, where do i get that specific link from? At the moment, i have it liked to somewhere, but thats just the ruins of a previous attempt. It there a way to create a seperate page which i could have the link take the viewer to? In other words, where do you link your gallery page to? If im too vague, or if im just rambling, just ask me to clarify, I'm rather flustered, so i can understand if you dont understand a word I've just said.

Thanks, Mac

My site is located at www.macswenson.smugmug.com (http://www.macswenson.smugmug.com) You need to create a virtual gallery to link to. This will act as a new
homepage in that it your galleries or categories will show there.

Then on the real homepage you can have your bio or put a slideshow in it.
You're menu would provide the link to the gallery page.

This page (http://dgrin.smugmug.com/gallery/2160039) and tutor will walk you through it.

Holler back with any questions,
Al

[Mac Swenson]

Al, Thank so much for the help. I have all the code entered into the correct boxes(or so I think) But when i click on the 'Gallery' button on the nav bar, it now brings me to an error page entitled, 'Server Not Found' Any ideas?

[PBolchover]

Al, Thank so much for the help. I have all the code entered into the correct boxes(or so I think) But when i click on the 'Gallery' button on the nav bar, it now brings me to an error page entitled, 'Server Not Found' Any ideas?

You made an error in cutting and pasting the link. It currently reads
http://http//macswenson.smugmug.com/galleries
(ie one too many http://'s)

For a couple of the other buttons, you haven't replaced the word <nickname> with your own account name

[Allen]

Al, Thank so much for the help. I have all the code entered into the correct boxes(or so I think) But when i click on the 'Gallery' button on the nav bar, it now brings me to an error page entitled, 'Server Not Found' Any ideas? You need to enter the source gallery number here in your footer slideshow
code.

slideshowUrl = "http://nickname.smugmug.com/gallery/XXXXXXX";

Your CSS looks ok for showing the cats or galleries. In your control panel if
you see your galleries or categories you need to click "display" or "show". I
suspect they're not toggled to display.

Holler back with any questions,
Al

Edit:
Thanks PBolchover missed that.



(http://www.digitalgrin.com/member.php?u=9759)

[xris]

It worked! Thank you for the quick and concise response Al.

Add this to your CSS.
Play with the green to suit.

.category #navcontainer {
margin-bottom: 20px;
}

Hope this helps
Al

[Andy]

Ive been spinning my wheels going through the different tutorials and browsing the forums here. What i get stuck with is, where are the links for a gallery page to insert in the nav bar code? I cannot for the life of me figure out where this is. Do i need to create this as an entire new page? I already have the galleries show up on my home page, but that is out of necessity since there is no ther way to view them. Any help is much appreciated.

Mac

P.S. My site is http://macswenson.smugmug.com/


Moved your post here. The guys that are helping on Navbars are watching this thread :deal

[Mac Swenson]

Thanks Andy. I'm pretty sure that I got the 'Gallery' page done, but how about the other ones? What do I need to do there?

[Mac Swenson]

Any takers? I'm not sure how the different code works, so if someone could point me in the right direction. I'm not sure how to create the different pages for the 'About Me' section, the 'Information' section, and I could also use help adding a new section entitled 'Pricing'. Any help of a point in the right direction is much appreciated.

[Allen]

Any takers? I'm not sure how the different code works, so if someone could point me in the right direction. I'm not sure how to create the different pages for the 'About Me' section, the 'Information' section, and I could also use help adding a new section entitled 'Pricing'. Any help of a point in the right direction is much appreciated.
Sounds like what you need is an html only gallery for each of
those. See FAQ (http://www.digitalgrin.com/showthread.php?t=26043). #91.

Hope this helps, holler back with any questions
AL

[Mac Swenson]

That looks like what I need. But when it says 'Insert your HTML here' where am i supposed to find that? I know absolutly zero HTLM and would be totaly un-able to write something like that. For now, I just craeted a gallery, and typed everything in the description box, but its quite a hack job in terms of professional look.

[xris]

Yo!

Quick one here, me thinks.

I've added a 'help' button to my nav bar. It works well, but I'd like it to open the help page in a new window. Below is my current code. Is there a simple fix?

<li><a href="http://www.smugmug.com/help/">Help</a></li>

Xris

[Allen]

Yo!

Quick one here, me thinks.

I've added a 'help' button to my nav bar. It works well, but I'd like it to open the help page in a new window. Below is my current code. Is there a simple fix?

<li><a href="http://www.smugmug.com/help/">Help</a></li>

Xris Add the green

<li><a href="http://www.smugmug.com/help/" target="_blank">Help</a></li>

Al

[xris]

Too cool Al! Worked like a charm. First time. Thanks again.

Add the green

<li><a href="http://www.smugmug.com/help/" target="_blank">Help</a></li>

Al

[caseserve]

I changed the menu on my site and under IE it looks really bad. Fierefox is great.

Any help would be appreciated.

Site url is in my signature.

THanks,

Here is the html

<!-- Start ----------------------- Dropdown Menu ------------------- -->
<!-- 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 -->
<!-- source from http://www.cssplay.co.uk/menus/final_drop.html -->

<div align="center">
<div class="menu">
<ul>

<!-- Start of 1st Menu item -->
<li><a href="/">Home<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</li>
<!-- END of 1st Menu item -->

<!-- Start of 2nd Menu item -->
<li><a href="http://www.casephotographyonline.com">Information<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/823121" title="Contact Us!">Contact Us</a></li>
<li><a href="/gallery/1192903" title="Biography!">Biography</a></li>
<li><a href="/gallery/1045025" title="Services">Services</a></li>
<li><a class="drop" href="" title="Portrait Tips">Portrait Tips<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left">
<li><a href="/gallery/1158486" title="Makeup Tips">Makeup Tips</a></li>
<li><a href="/gallery/1158451" title="Glamour Makeup">Glamour Makeup</a></li>
<li><a href="/gallery/1158429" title="Clothing Suggestions">Clothing Suggestions</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="/gallery/1799576" title="Commercial Photography">Commercial Photography</a></li>
<li><a href="/gallery/1156246" title="Event Photography">Event Photography</a></li>
<li><a href="/gallery/423069" title="FAQ">FAQ</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- END of 2nd Menu Item -->

<!-- Start of 3rd Menu Item -->
<li><a href="">Portraits<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/1154449" title="Children and Families">Children and Families </a></li>
<li><a href="/gallery/1167574" title="The Seven Ages of Childhood">The Seven Ages of Childhood </a></li>
<li><a href="/gallery/1099525" title="Amber Alert">Amber Alert </a></li>
<li><a href="/gallery/1154455" title="Portraits">Portraits </a></li>
<li><a href="/gallery/1154459" title="Fashion">Fashion </a></li>
<li><a href="/gallery/1124148" title="Model Search">Model Search </a></li>
<li><a href="/gallery/2394102" title="Glamour">Glamour</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- END of 3rd Menu Item -->

<!-- Start of 4th Menu Item -->
<li><a href="">Weddings<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/1794584" title="Gallery">Gallery</a></li>
<li><a href="/gallery/1150160" title="Style">Style</a></li>
<li><a class="drop"href="/gallery/1151949" title="Wedding Albums">Wedding Albums</a><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left">
<li><a href="/gallery/1151949" title="Wedding Albums">Wedding Albums</a></li>
<li><a href="/gallery/1154039#53844947" title="Layout Standard">Layout Standard</a></li>
<li><a href="/gallery/1154143#53848443" title="Layout Wide">Layout Wide</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="/gallery/1192903" title="Packages">Packages</a></li>
<li><a href="/gallery/1167430" title="Gift Registery">Gift Registery</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- END of 4th Menu Item -->

<!-- Start of 5th Menu Item -->
<li><a href="">View and Buy Photos<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Customer%20Proofs/222716" title="Customer Proofs">Customer Proofs</a></li>
<li><a class="drop" href="" title="How to Order">How to Order<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left">
<li><a href="/gallery/1149274" title="How to order PRINTS">How to order PRINTS</a></li>
<li><a href="/gallery/822328" title="How to order GIFTS">How to order GIFTS</a></li>
<li><a href="/gallery/1799671" title="How to Download">How to Download</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="/Now%20Showing" title="Now Showing">Now Showing</a></li>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- END of 5th Menu Item -->

</ul>
</div>
</div>
<!-- END ----------------------- Dropdown Menu ------------------- -->



Here is the CSS


/* ================================================== ==============
Start CSS MENU
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
.menu {
width:750px;
font-size:0.85em;
position:relative;
z-index:100;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#fff;
width:139px;
height:30px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#758279;
padding-left:10px;
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#d4d8bd url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
.menu ul ul :hover > a.drop {
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}

/* 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:31px;
left:0;
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}
/* position the third level flyout menu */
.menu ul ul ul{
left:150px;
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* ================================================== ==============
END CSS MENU
================================================== ================= */

[Allen]

I changed the menu on my site and under IE it looks really bad. Fierefox is great.

Any help would be appreciated.

Site url is in my signature.

THanks,

Before it can be formated with CSS lets get the html straight first.
Start by looking at this, I fixed a few lines.

<!-- Start ----------------------- Dropdown Menu ------------------- -->
<!-- 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 -->
<!-- source from http://www.cssplay.co.uk/menus/final_drop.html -->

<div class="menu">
<ul>

<!-- Start of 1st Menu item -->
<li><a href="/">Home</a></li>

<!-- END of 1st Menu item -->

<!-- Start of 2nd Menu item -->
<li><a class="drop" href="http://www.casephotographyonline.com">Information
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/823121" title="Contact Us!">Contact Us</a></li>
<li><a href="/gallery/1192903" title="Biography!">Biography</a></li>
<li><a href="/gallery/1045025" title="Services">Services</a></li>
<li><a class="drop" href="" title="Portrait Tips">Portrait Tips
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left">
<li><a href="/gallery/1158486" title="Makeup Tips">Makeup Tips</a></li>
<li><a href="/gallery/1158451" title="Glamour Makeup">Glamour Makeup</a></li>
<li><a href="/gallery/1158429" title="Clothing Suggestions">Clothing Suggestions</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/1799576" title="Commercial Photography">Commercial Photography</a></li>
<li><a href="/gallery/1156246" title="Event Photography">Event Photography</a></li>
<li><a href="/gallery/423069" title="FAQ">FAQ</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- END of 2nd Menu Item -->

<!-- Start of 3rd Menu Item -->
<li><a class="drop" href="">Portraits
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/1154449" title="Children and Families">Children and Families </a></li>
<li><a href="/gallery/1167574" title="The Seven Ages of Childhood">The Seven Ages of Childhood </a></li>
<li><a href="/gallery/1099525" title="Amber Alert">Amber Alert </a></li>
<li><a href="/gallery/1154455" title="Portraits">Portraits </a></li>
<li><a href="/gallery/1154459" title="Fashion">Fashion </a></li>
<li><a href="/gallery/1124148" title="Model Search">Model Search </a></li>
<li><a href="/gallery/2394102" title="Glamour">Glamour</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- END of 3rd Menu Item -->

<!-- Start of 4th Menu Item -->
<li><a class="drop" href="">Weddings
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/1794584" title="Gallery">Gallery</a></li>
<li><a href="/gallery/1150160" title="Style">Style</a></li>
<li><a class="drop" href="/gallery/1151949" title="Wedding Albums">Wedding Albums
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left">
<li><a href="/gallery/1151949" title="Wedding Albums">Wedding Albums</a></li>
<li><a href="/gallery/1154039#53844947" title="Layout Standard">Layout Standard</a></li>
<li><a href="/gallery/1154143#53848443" title="Layout Wide">Layout Wide</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/1192903" title="Packages">Packages</a></li>
<li><a href="/gallery/1167430" title="Gift Registery">Gift Registery</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- END of 4th Menu Item -->

<!-- Start of 5th Menu Item -->
<li><a class="drop" href="">View and Buy Photos
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="drop">
<li><a href="/Customer%20Proofs/222716" title="Customer Proofs">Customer Proofs</a></li>
<li><a class="drop" href="" title="How to Order">How to Order
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left">
<li><a href="/gallery/1149274" title="How to order PRINTS">How to order PRINTS</a></li>
<li><a href="/gallery/822328" title="How to order GIFTS">How to order GIFTS</a></li>
<li><a href="/gallery/1799671" title="How to Download">How to Download</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Now%20Showing" title="Now Showing">Now Showing</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- END of 5th Menu Item -->

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
<!-- END ----------------------- Dropdown Menu ------------------- -->
This has to be correct or stupid IE will b0rk.:D
Holler back then and we'll look at the CSS.
Al

[caseserve]

Thank you very much.

I got the site looking great. Except, there's always an exception...

How do I add padding under the menu in Fire Fox? If you load the site in firefox you'll see that the page loads too close to the menu.

In IE there is a padding between them menu and the page, how do I get that same padding in FF?

Thanks everyone!!!

[Allen]

Thank you very much.

I got the site looking great. Except, there's always an exception...

How do I add padding under the menu in Fire Fox? If you load the site in firefox you'll see that the page loads too close to the menu.

In IE there is a padding between them menu and the page, how do I get that same padding in FF?

Thanks everyone!!!
Add the top margin to push away from nav.
You can also add a top margin to the menu to drop it from the top
of the page.

/* center the homepage slideshow */
#bioBox {text-align: center;
margin-top:30px;
background: black;
}

.menu {
width:750px;
font-size:0.85em;
position:relative;
z-index:100;
margin-top:10px;
}

Hope this helps
Al

[caseserve]

Add the top margin to push away from nav.
You can also add a top margin to the menu to drop it from the top
of the page.

/* center the homepage slideshow */
#bioBox {text-align: center;
margin-top:30px;
background: black;
}

.menu {
width:750px;
font-size:0.85em;
position:relative;
z-index:100;
margin-top:10px;
}

Hope this helps
Al

Al,
thanks its getting better. The menu is now off the top. But the page is still loading into the menu if FF.

Thanks,

[Allen]

Al,
thanks its getting better. The menu is now off the top. But the page is still loading into the menu if FF.

Thanks,
It looks like just adding the margins to the menu does it.
So try removing the red and adding the green. Thought I had
tried this but maybe not. This works on homepage and galleries.

.menu {
width:750px;
font-size:0.85em;
position:relative;
z-index:100;
margin-top:10px;
margin-bottom:20px;
}

/* center the homepage slideshow */
#bioBox {text-align: center;
margin-top:30px;
background: black;
}

Al

[caseserve]

Al,
Thanks for the help. I currently have the topmost menu item for every menu as follows:
<li><a href="/">Case Photography<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

If I leave the href="" then when someone clicks on it they get a page not found. How to I make the top menu items so then you click on them they do nothing. Right now I would imagine that people would get frustrted when going for another menu and they click by accident instead of hover they they constantly go back to the home page the I have it with href="/"

Thanks

[Allen]

Al,
Thanks for the help. I currently have the topmost menu item for every menu as follows:
<li><a href="/">Case Photography<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
If I leave the href="" then when someone clicks on it they get a page not found. How to I make the top menu items so then you click on them they do nothing. Right now I would imagine that people would get frustrted when going for another menu and they click by accident instead of hover they they constantly go back to the home page the I have it with href="/"

Thanks
Remove the red in <a href="/"> to get <a> and there's no link associated.

Al

[WW601]

This is my second post and I am getting better so thanks to all that are willing to help me. I am having a hard time setting My NavBar so when a person clicks on The the galleries Button it will link to the catagories/galleries box which contains all of the galleries which to include the feature box. I have been working on this problem for weeks and it is really bothering me and starting to effect my business. I have tried everything and I have lurked for the same problems within the threads to no avail. My site is www.emotions1.com (http://www.emotions1.com). After reading through all of the post and replys on this thread I am still having problems getting the catagories/Galleries page to display only after clicking on the galleries button on the NavBar. I have taken the liberty of downloading the Mozilla Browser per your advise. I am a good Photographer but I am on a major learning curve when it comes to coding. Any help would be great.

Eric Taylor
WorldWide 601:scratch

[Allen]

This is my second post and I am getting better so thanks to all that are willing to help me. I am having a hard time setting My NavBar so when a person clicks on The the galleries Button it will link to the catagories/galleries box which contains all of the galleries which to include the feature box. I have been working on this problem for weeks and it is really bothering me and starting to effect my business. I have tried everything and I have lurked for the same problems within the threads to no avail. My site is www.emotions1.com (http://www.emotions1.com). After reading through all of the post and replys on this thread I am still having problems getting the catagories/Galleries page to display only after clicking on the galleries button on the NavBar. I have taken the liberty of downloading the Mozilla Browser per your advise. I am a good Photographer but I am on a major learning curve when it comes to coding. Any help would be great.

Eric Taylor
WorldWide 601:scratch
First remove the red in your slideshow footer code.
/* optional slideshow variables */
/* see properties section */
slideControls = true;
slideHeight="400";
slideWidth="640";
loadSlideshow (1);
if (YD.hasCla ......
Change G to g in the link for your menu header html.

<li><a href="http://e-motionspro.smugmug.com/Galleries">galleries</a></li>

It will now go to your virtual galleries page instead of reverting back to your homepage.

Looking into why your cat/galleries not showing.
Be back later
Al

[twinsrus]

Hi there. I followed the instructions by Steve Allen to create a
custom navbar with drop downs and flyouts. But there is no color
and it looks like I used the bullet command in Word to do it. Can
you have a look at it?

Thanks!

Dick
www.danrphotography.com (http://www.danrphotography.com)

[Allen]

Hi there. I followed the instructions by Steve Allen to create a
custom navbar with drop downs and flyouts. But there is no color
and it looks like I used the bullet command in Word to do it. Can
you have a look at it?

Thanks!

Dick
www.danrphotography.com (http://www.danrphotography.com)
The link to your site doesn't seem to work.
Al

[twinsrus]

sorry - www.dandrphotography.com

[Allen]

sorry - www.dandrphotography.com (http://www.dandrphotography.com)
Only one trivial thing left. Ya forgot to add the supporting CSS.:D
See here (http://allen-steve.smugmug.com/gallery/2078255#107552529).

Holler back if you have any questions,
Al

Edit: You also have some html errors, checking now, hang on.

[Allen]

Hi there. I followed the instructions by Steve Allen to create a
custom navbar with drop downs and flyouts. But there is no color
and it looks like I used the bullet command in Word to do it. Can
you have a look at it?

Thanks!

Dick
www.danrphotography.com (http://www.danrphotography.com)
Fixed a few things.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="Place%20link%20here">About
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="place%20link%20here">Bio</a></li>
<li><a href="place%20link%20here">Contact</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="place%20Link%20here">Weddings
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="place%20link%20here">Kelly &amp; Jason</a></li>
<li><a href="place%20link%20here">Kristi &amp; Cliff</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="place%20Link%20here">Portraits
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="place%20link%20here">Flyout 1</a></li>
<li><a href="place%20link%20here">Flyout 2</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="place%20Link%20here">Environmental
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="place%20link%20here">Japan</a></li>
<li><a href="place%20link%20here">Flyout 2</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="place%20link%20here">Menu 4</a></li>
<li><a href="place%20link%20here">Menu 5</a></li>
<li><a href="place%20link%20here">Menu 6</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

Al

[twinsrus]

Thanks. Can hardly read the stuff about CSS on the post just before this one, not the one with the code, the one before that where you said I forgot something. When you said you fixed a few things, did you just fix it in the post or did you fix it on my page?

[Allen]

Thanks. Can hardly read the stuff about CSS on the post just before this one, not the one with the code, the one before that where you said I forgot somehting.
Sorry, you have to add the supporting CSS for the navbar,
I provided this link (http://allen-steve.smugmug.com/gallery/2078255#107552529). Copy and paste the whole thing starting just after:

This code goes in your CSS.

down to but not encluding:

/* ============ Advanced option =============== */

I plugged it in to your site along with the menu html and it worked fine.
Read the violet comments on each line and you should be able to
set the colors and positions you like.

Fixed in the post, can't do your site. Used Firedox WebDev
Holler back with any questions,
Al

[twinsrus]

I really screwed it up. I can't get in to customization to change the code. What now?

[Allen]

I really screwed it up. I can't get in to customization to change the code. What now?
Try this link

http://dandrphotography.smugmug.com/homepage/controlpanel.mg

[twinsrus]

Inserted the code you suggested. Got a nav bar that stairsteps down.

What am I doing wrong?

I am throwing everything out and starting over from scratch. This is extremely frustrating. I've been working on this for about four hours today and have absolutely nothing but a starirstep navbar across the top of my page, no banner, a gallery that I'm not sure how it got there. If it sounds like I'm at the end of my rope for today, you are correct.

The tutorials are great, but I can't see them very well because of the colors. I don't know how it will affect what is already there. For instance, I completely lost my banner at the top of the page. So I think I'm going to go back to square one and start over.

[Allen]

Inserted the code you suggested. Got a nav bar that stairsteps down.

What am I doing wrong?

I am throwing everything out and starting over from scratch. This is extremely frustrating. I've been working on this for about four hours today and have absolutely nothing but a starirstep navbar across the top of my page, no banner, a gallery that I'm not sure how it got there. If it sounds like I'm at the end of my rope for today, you are correct.

The tutorials are great, but I can't see them very well because of the colors. I don't know how it will affect what is already there. For instance, I completely lost my banner at the top of the page. So I think I'm going to go back to square one and start over.
If you change your menu html and add the CSS I posted your page
will look like enclosed.

A couple of quick tweaks below.

Size banner to actual size - green
#my_banner {
display: block;
width: 504px;
height: 108px;
margin: 0 auto;
margin-top: 10px;
background: url(http://dandrphoto.smugmug.com/photos/125293970-O.jpg) no-repeat;
}

Remove this
.homepage #my banner {
display: block;
}

Navbar formating to center (This with CSS inserted)
/* Common Styling */
.menu {
position:relative;
display:block;
z-index:99;
padding:0px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div .menu) */
width:620px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar, if not tweak with left's below */
/* left:0px; tweak this to center navbar */
/* _left:0px; tweak this to center navbar for IE */
}

This is a screen shot of your page.
The weird colors are there to help you find them in the CSS code.

[Allen]

Here's your CSS with the colors tweaked. Replace your whole CSS.
Add the menu html in the post above in your header code and you're all done.

#my_banner {
display: block;
width: 504px;
height: 108px;
margin: 0 auto;
margin-top: 10px;
background: url(http://dandrphoto.smugmug.com/photos/125293970-O.jpg) no-repeat;
}

.homepage #my banner {
display: block;
}

/* 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 */

/* Common Styling */
.menu {
position:relative;
display:block;
z-index:99;
padding:0px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div .menu) */
width:620px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar, if not tweak with left's below */
/* left:0px; tweak this to center navbar */
/* _left:0px; tweak this to center navbar for IE */
}

.menu ul {
padding:10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
float:left; /* WARNING: float right reverses menu */
position:relative;
}

.menu ul li a,
.menu ul li a:visited {
display:block;
font-size:1.3em; /* main buttons */
color: black ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width:100px; /* main box width */
height:20px; /* main box height */
border:1px solid #cccccc; /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: none; /* main button color */
padding-left:0px;
line-height:20px; /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
width:104px; w\idth:104px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #000000; /* main when hover DD */
background:white; /* main when hover DD */
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:-6px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left:0px; /* FF DD right left */
width:104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #ffffff; /* DD FO non-hover */
color: #000000; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:100px /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #cccccc; /* DD FO hover */
color: #000000; /* DD FO hover See */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:101px; /* FF FO right left */
top:-27px; /* FF FO up down */
width:146px; /* FF FO box width */
}

.menu ul li:hover ul li:hover ul.left {
left:-134px; /* unknown - previously defined */
} /* class of .left for left flyouts? */

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: #000000; /* main hover */
background: white; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top:2px; left:0; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:7px;
margin-top:7px; /* DD container up down */
left:0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #ffffff; /* IE DD color non-hover */
color: #000000; /* IE DD color non-hover */
height:auto;
line-height:20px; /* IE DD FO box height */
padding:0px;
width:145px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}

.menu ul li a:hover ul li a:hover {
background: #cccccc; /* DD FO hover */
color: #000000; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top:-22px; /* FO up down */
color:#000000; /* unknown */
left:147px; /* FO right left */
}

.menu ul li a:hover ul li a:hover ul.left {
left:-134px;
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width:125px;
w\idth:139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width:125px; /* unknown */
w\idth:104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}
Hope this helps, holler back with any questions.

BTW, you mentioned the colors weren't readable, I'd like to fix it if you have any
suggestions. I don't quite understand what you mean and am anxious to
change things so they're more user friendly.

Al

[Allen]

New screen shot with color changes

[twinsrus]

New screen shot with color changes

Thanks for the help. I'll do this and see what happens. I appreciate your able assistance.

[raptorcaptor]

I would like to have my navbar on the right hand side, but don't want it to shift to the left when the window size is changed. My attempts have failed miserably.:dunno Any suggestions?

www.raptorcaptor.com

[Allen]

I would like to have my navbar on the right hand side, but don't want it to shift to the left when the window size is changed. My attempts have failed miserably.:dunno Any suggestions?

www.raptorcaptor.com (http://www.raptorcaptor.com) Try adding this.

#navcontainer {
position:relative;
width: 360px;
left: 210px;
margin: 0 auto;
}

or this

#navcontainer {
position:relative;
width: 360px;
left: 210px;
top: -48px;
margin: 0 auto;
}

[raptorcaptor]

Try adding this.

#navcontainer {
position:relative;
width: 360px;
left: 210px;
margin: 0 auto;
}

or this

#navcontainer {
position:relative;
width: 360px;
left: 210px;
top: -48px;
margin: 0 auto;
}
Thanks Allen! I'll give it a try.

Works great! Thanks again!

[caroline]

i would like the existing navbar, (that ivar kindly assisted with) to have dropdowns on the galleries link. I've read up about this, but as usual I'm not sure how to start - do I remove completely the existing code in css and header ? Could someone hold my hand through this please.

Caroline

EDIT:- Just found this http://allen-steve.smugmug.com/gallery/2011077
I need to do some more thinking first, please disregard this post, there is a lot of good info about planning the dropdown etc

[zacker]

Hey, I want a nav bar too .... lol, How do I get one? Is there someplace i can cut n paste the code from? then make whatever changes i want to? I have no " HTML" clue about code so any help would be really appreciated! :wink

[Allen]

Hey, I want a nav bar too .... lol, How do I get one? Is there someplace i can cut n paste the code from? then make whatever changes i want to? I have no " HTML" clue about code so any help would be really appreciated! :wink
See here (http://dgrin.smugmug.com/gallery/1932803) for a simple navbar.

Holler back with any questions

[caroline]

Hey, I want a nav bar too .... lol, How do I get one? Is there someplace i can cut n paste the code from? then make whatever changes i want to? I have no " HTML" clue about code so any help would be really appreciated! :wink

Craig, take a look at the link in my previous post, its a very clear starting point. You have quite a few galleries and need to have some idea before you start of how you want to arrange things, thats why I stopped and have gone back to think about it.:scratch
http://allen-steve.smugmug.com/gallery/2011077

Caroline

[zacker]

Allen, thanks, thats just what I needed!!

Caroline...lol too many galleries, I just made one link for each..lol it beats hitting the back button.. now to rename and link em all..thanks for the tutorials guys..got em saved in my faves for future use!!

[Jill Bazeley]

Hello to all. I must be doing something seriously wrong as I've carefully followed the Simple Navbar tutorial and the navbar won't show up at all. Could there be some kind of conflict with my existing css (which seems pretty messy) or my header html? Thanks for any help!

http://jillb.smugmug.com

[Montec]

:scratch I have a problem with my Navbar moving to the left on it's own.

I have adjusted the bar several times to get it centered and that usually works for a while then it will move left again after a period of time. The latest stayed centered for a couple of weeks before moving.

I do not make any changes to the site at all yet it will still do this.
Anyone have any reason or solution for this?

http://www.kootenayphotography.com/

[Allen]

Hello to all. I must be doing something seriously wrong as I've carefully followed the Simple Navbar tutorial and the navbar won't show up at all. Could there be some kind of conflict with my existing css (which seems pretty messy) or my header html? Thanks for any help!

http://jillb.smugmug.com
I don't see any navbar code in either your header or CSS.:scratch

If you took it out, you might put it back in so we'll be able to help.

[Allen]

:scratch I have a problem with my Navbar moving to the left on it's own.

I have adjusted the bar several times to get it centered and that usually works for a while then it will move left again after a period of time. The latest stayed centered for a couple of weeks before moving.

I do not make any changes to the site at all yet it will still do this.
Anyone have any reason or solution for this?

http://www.kootenayphotography.com/
Try adding the green /*'s and use a width around 700px. Getting the width
to a minimum without wrapping will keep it centered by the margin: 0 auto.
IE might take a slightly larger width.

#navcontainer {
position:relative;
display:block;
z-index:99;
padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div #navcontainer) */
width:700px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin:0 auto; /* this should center navbar, if not tweak with left's below */
/* left:85px; tweak this to center navbar */
/* _left:85px; tweak this to center navbar for IE */
}

[Montec]

Hi Allen,

Changing the width:700px; does not work. Anything smaller than the value I have makes the nvbar wrap around.

Centering it is not the problem.

I can easily center the bar but after a period of time it moves on it's own to the left. I was wondering if anyone knew why this is occuring?

I just centered it again by adjusting the code below to 120px. It was 85px previously and was perfectly centered. In a few days or weeks it will move again and I will need to change this value to center it again. Something is wrong but I have no clue what it could be.

left:120px; tweak this to center navbar */
_left:120px; tweak this to center navbar for IE */

[Allen]

Hi Allen,

Changing the width:700px; does not work. Anything smaller than the value I have makes the nvbar wrap around.

Centering it is not the problem.

I can easily center the bar but after a period of time it moves on it's own to the left. I was wondering if anyone knew why this is occuring? You're going to have erratic behavior because of these in red.
Need the greens ones to complete the set or just delete both lines.
Then just minimize width to center without wrapping.

/* left:120px; tweak this to center navbar */
/* _left:120px; tweak this to center navbar for IE */

[Montec]

You're going to have erratic behavior because of these in red.
Need the greens ones to complete the set or just delete both lines.
Then just minimize width to center without wrapping.

/* left:120px; tweak this to center navbar */
/* _left:120px; tweak this to center navbar for IE */

Thanks I will give it a go

[SPK64]

I just found out my navbar is not functioning correctly in IE6. It works fine in FF and IE7.

I am sure it is something simple but I just cannot find the problem.

[Jill Bazeley]

I don't see any navbar code in either your header or CSS.:scratch

If you took it out, you might put it back in so we'll be able to help.

:clapThanks for taking a look, Al - if I'd left it in I would have seen the problem: unlike other elements, the navbar is not viewable in the preview! So, when I finally updated the customization to save the navbar css, I discovered I had....a navbar. I knew I must have been doing something idiotic! I may come back with more questions as I start tweaking, but in the meantime, thanks so much for being here to help!

[Allen]

I just found out my navbar is not functioning correctly in IE6. It works fine in FF and IE7.

I am sure it is something simple but I just cannot find the problem.
You have a few oops in your html code, I"ll see if I can clean it up for you,
hang on.

[Lenka]

This is my first time posting a question here so I'm not sure if I am doing this in the right place but here it goes.

I was wondering if there is any way to lock my navigation bar into one place on the screen. I have a slideshow on my main page and my pictures are not all the same size and therefore the navigation bar moves along with the pictures which is a bit distracting. Is there a way to keep it down at the bottom?

Thank you in advance!
Lenka
www.lenka.smugmug.com (http://www.lenka.smugmug.com)
www.lenkasphotography.com (http://www.lenkasphotography.com)
e-mail: lenka77@msn.com

[Andy]

This is my first time posting a question here so I'm not sure if I am doing this in the right place but here it goes.

I was wondering if there is any way to lock my navigation bar into one place on the screen. I have a slideshow on my main page and my pictures are not all the same size and therefore the navigation bar moves along with the pictures which is a bit distracting. Is there a way to keep it down at the bottom?

Thank you in advance!
Lenka
www.lenka.smugmug.com (http://www.lenka.smugmug.com)
www.lenkasphotography.com (http://www.lenkasphotography.com)
e-mail: lenka77@msn.com
I moved your post so that those who are helping with the navbar stuff will see it :thumb

Welcome to Dgrin :wave

[Allen]

I just found out my navbar is not functioning correctly in IE6. It works fine in FF and IE7.

I am sure it is something simple but I just cannot find the problem.
See it this will work better.


<!-- 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>

<li><a class="drop" href="http://go.skactionpix.com" title="SKActionPix Photography">Home
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="javascript:norobotmail('steve', 'skactionpix.com')">Email me!</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="http://go.skactionpix.com/gallery/2433739" title="Sports">Sports Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<li><a class="drop" href="" title="FK Softball">Floyds Knobs Softball»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://go.skactionpix.com/share/yjs3EBRCfEgik">2006 Season</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="" title="Net-Surfers">Net-Surfers Soccer»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://go.skactionpix.com/share/2yeMnbmTZGduc">2006 Spring U10</a></li>
<li><a href="http://go.skactionpix.com/share/KvheKN5ZO3X4s">2006 Queen City Tournament</a></li>
<li><a href="http://go.skactionpix.com/share/RtI99XJQRpIbA">2006 Fall U11</a></li>
<li><a href="http://SteveAngie.smugmug.com/share/vXIR60PmblJ4I">2007 Indoor</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="" title="HF Sports">Holy Family Sports»</a>
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://go.skactionpix.com/share/FkiR35xQ3J04w">2006 Soccer</a></li>
<li><a href="http://SteveAngie.smugmug.com/share/Vk70N5dpGRSgA">2006 Cross Country</a></li>
<li><a href="http://go.skactionpix.com/share/5dyGE4GA93BYA">2006 Basketball</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

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

<li><a class="drop" href="" title="Dance">Dance Galleries
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="" title="Dance Competition">Dance 2006»
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://go.skactionpix.com/share/Ju6gQzvpCpQAs">KAR Nationals 2006</a></li>
<li><a href="http://go.skactionpix.com/gallery/2207151">Christmas Program</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

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

<li><a href="http://go.skactionpix.com/gallery/2293186" title="Information on ordering prints">Prints</a></li>

<li><a href="http://go.skactionpix.com/gallery/2269380" title="Please sign our guestbook!">Guestbook</a></li>

<li><a href="http://go.skactionpix.com/gallery/2269644" title="About the photographer">Photographer</a></li>

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


Holler back with any questions

[Allen]

This is my first time posting a question here so I'm not sure if I am doing this in the right place but here it goes.

I was wondering if there is any way to lock my navigation bar into one place on the screen. I have a slideshow on my main page and my pictures are not all the same size and therefore the navigation bar moves along with the pictures which is a bit distracting. Is there a way to keep it down at the bottom?

Thank you in advance!
Lenka
www.lenka.smugmug.com (http://www.lenka.smugmug.com)
www.lenkasphotography.com (http://www.lenkasphotography.com)
e-mail: lenka77@msn.com Lenka, add this to your CSS, it reserves space for the slideshow so the
elements below won't move.

#ssSlide {
height: 500px;
}

You migth also have to set slideHeight = "xxx"; in your footer
code, I thought I saw one pic that went over your footer.

[SPK64]

See it this will work better.


[/code] Holler back with any questions


That worked!
You guys are the best.:clap

[SPK64]

That worked!
You guys are the best.:clap

Well all looked good except the last flyout on the sports gallery. I am looking at the code and it all looks in place.

As before it works fine in FF and not in IE6.

Thanks,

[Allen]

Well all looked good except the last flyout on the sports gallery. I am looking at the code and it all looks in place.

As before it works fine in FF and not in IE6.

Thanks, Remove the red.

F Sports">Holy Family Sports»</a>


My bad.:D

[SPK64]

Remove the red.

F Sports">Holy Family Sports»</a>


My bad.:D

yes, that was it.

Thanks again!

[iamagoo]

Well, I managed to get my banner, nav bar and slideshow all looking decent on FF and Safari (on my Mac). To my dismay, when I went to work today and looked at it on Internet Explorer (on a Windows system), the nav bar colors and sizes were quite wonky. Anyone know where I can learn how to fix it?
Thanks,
Chris

Edit: Too bad, most of you are just getting up when I'm online here in Japan. Oh well, maybe someone will help me out while I'm sleeping.

[Allen]

Well, I managed to get my banner, nav bar and slideshow all looking decent on FF and Safari (on my Mac). To my dismay, when I went to work today and looked at it on Internet Explorer (on a Windows system), the nav bar colors and sizes were quite wonky. Anyone know where I can learn how to fix it?
Thanks,
Chris

Edit: Too bad, most of you are just getting up when I'm online here in Japan. Oh well, maybe someone will help me out while I'm sleeping. I think I have all the colors and positions set now. I changed a few items
down thru this part of the code and rather then try to find exactly which
ones, I pasted this whole section.

/* 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 */

/* Common Styling */
.menu {
position:relative;
display:block;
z-index:99;
padding: 15px 0px 20px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 850px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
padding:10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
float:left; /* WARNING: float right reverses menu */
position:relative;
}

.menu ul li a,
.menu ul li a:visited {
display:block;
fo nt-family: palatino;
font-size:1em; /* main buttons */
text-decoration:none;
text-align:center;
width: 104px; /* main box width */
height: 20px; /* main box height */
border:1px SOLID BLACK;
border-width: 1px 1px 1px 1px;
background: ##104E8B; /* main button color */
color: white; /* main buttons text */
padding-left: 0px;
line-height: 20px;
}

* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: white; /* main when hover DD */
background: steelblue; /* main when hover DD */
}

.menu ul li:hover ul {
display:block;
position:absolute;
top: -5px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000080; /* DD FO non-hover */
color: #F5F5DC; /* DD FO non-hover */
height:auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 104px /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: steelblue; /* DD FO hover */
color: white; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 106px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 104px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: white; /* main hover */
background: steelblue; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top: 2px; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top: 7px;
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #000080; /* IE DD color non-hover */
color: white; /* IE DD color non-hover */
height:auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 104px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: steelblue; /* DD FO hover */
color: white; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -18px; /* FO up down */
color: #000000; /* unknown */
left: 106px; /* FO right left */
}

.menu ul li a:hover ul li a:hover ul.left {
left: -134px;
}

/* following commented out for now not sure if needed */
/*.menu ul li a:hover ul li a:hover ul {
text-decoration:line-through; /* IE effects FO1 & FO2 */
color: black ; /* IE effects line-through above FO1 & FO2 */
font-size: 1.2em; /* IE effects FO2 only */}*/

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 104px;
w\idth: 108px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width: 104px; /* unknown */
w\idth: 108px; /* DD FF width */
} /* another hack for IE5.5 */

* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width: 104px; /* unknown */
w\idth: 104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* ======= END NAVBAR ======= */

I know what you mean by time difference, my son and his family
are in Yokosuka. Not too convenient for seeing three grandkids.
Hope this helps, holler back with any questions.

Edit: Added the whole navbar code.

[iamagoo]

I almost can't wait to go to work tomorrow to see how it looks on IE.
There is one small thing I'd like to change. Correction, I decided to see if I could figure it out and I did (removing the second tone from nav bar hover). So... I'll ask another question then. The boxes on my nav bar are slightly larger than the boxes in the dropdown. How do I align their sizes? If that's a problem, then at least having the dropdowns centered under each bar box would be better than it is now.
Damn. Tried to fix that myself before posting but no luck. This is addictive. I should get some sleep!
Thanks for your help.
-C-

I think I have all the colors and positions set now. I changed a few items
down thru this part of the code and rather then try to find exactly which
ones, I pasted this whole section.

* html .menu ul li a, .menu ul li a:visited {
width:104px; w\idth:104px; /* IE main button */
}

.menu ul li ul {
display:none;}

.droptable1, .droptable2, .droptable3, .droptable4,
.droptable5, .droptable6, .droptable7, .droptable8,
.droptable9, .droptable10, .droptable11,
.droptable12, .droptable13 {
margin:-1px; /* unknown */
border-collapse:collapse;
font-size:12px; /* unknown */
text-align:center; /* unknown */
}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: white; /* main when hover DD */
background: steelblue; /* main when hover DD */
}

.menu ul li:hover ul {
display:block;
position:absolute;
top:-4px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left:0px; /* FF DD right left */
width:104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000080; /* DD FO non-hover */
color: #F5F5DC; /* DD FO non-hover */
height:auto;
line-height:20px; /* DD FO box height */
padding:0px 0px;
width:100px /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: steelblue; /* DD FO hover See below for menu 6 */
color: white; /* DD FO hover See below for menu 6 */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:102px; /* FF FO right left */
top:-27px; /* FF FO up down */
width:146px; /* FF FO box width */
}

.menu ul li:hover ul li:hover ul.left {
left:-134px; /* unknown - previously defined */
} /* class of .left for left flyouts? */
/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: white; /* main hover */
background: steelblue; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top:2px; left:0; /* DD container up down */
background:none; /* gets rid of DD container */
margin-top:7px;
margin-top:7px; /* DD container up down */
left:0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #000080; /* IE DD color non-hover */
color: white; /* IE DD color non-hover */
height:auto;
line-height:20px; /* IE DD FO box height */
padding:0px;
width:105px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}

.menu ul li a:hover ul li a:hover {
background: steelblue; /* DD FO hover includes menu 6 */
color: white; /* DD FO hover includes menu 6 */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top:-18px; /* FO up down */
color: #000000; /* unknown */
left:107px; /* FO right left */
}

.menu ul li a:hover ul li a:hover ul.left {
left:-134px;
}

/* following commented out for now not sure if needed */
/*.menu ul li a:hover ul li a:hover ul {
text-decoration:line-through; /* IE effects FO1 & FO2 */
color: black ; /* IE effects line-through above FO1 & FO2 */
font-size:1.2em; /* IE effects FO2 only */}*/

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width:125px;
w\idth:139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}

/* Temporary fixes WebDev yellow element box wrap */
/* If changing table to .menu table above (Thanks to Ivan) */
/* this maybe not needed */
/* #webdeveloper-element-information table {
position:relative;
} */

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width:125px; /* unknown */
w\idth:104px; /* DD FF width */
}

I know what you mean by time difference, my son and his family
are in Yokosuka. Not too convenient for seeing three grandkids.
Hope this helps, holler back with any questions.

[Allen]

I almost can't wait to go to work tomorrow to see how it looks on IE.
There is one small thing I'd like to change. Correction, I decided to see if I could figure it out and I did (removing the second tone from nav bar hover). So... I'll ask another question then. The boxes on my nav bar are slightly larger than the boxes in the dropdown. How do I align their sizes? If that's a problem, then at least having the dropdowns centered under each bar box would be better than it is now.
Damn. Tried to fix that myself before posting but no luck. This is addictive. I should get some sleep!
Thanks for your help.
-C-
I think I did adjust the size/colors/positions for IE to look just like FF. They
should look identical.

[iamagoo]

Sorry, I guess I wasn't clear. I don't have IE here at home so I won't know what that looks like until tomorrow. My problem is on Safari and FF. The blocks on the top line of the nav bar are slightly wider (only to the right) then the boxes in the dropdowns and flyouts. That's what I'd like to fix up tonight. Thanks for your assistance.
-C-

[Allen]

Sorry, I guess I wasn't clear. I don't have IE here at home so I won't know what that looks like until tomorrow. My problem is on Safari and FF. The blocks on the top line of the nav bar are slightly wider (only to the right) then the boxes in the dropdowns and flyouts. That's what I'd like to fix up tonight. Thanks for your assistance.
-C-
I edited message #194 above to add the whole updated navbar code. I checked both IE6 and FF2 and they look identical now. Went thru and think I caught all the box widths to equalize them.

Oh, delete this at the bottom of your CSS.
#navcontainer ul {
...
font-family: palatino; < < you want this font?
}

Have no idea how it will look in other browsers including Safari.

[iamagoo]

Well this just proves that I'm an absolute beginner at this. When you were saying, "I changed this... etc.". I think I mistakenly thought that you were actually changing it on my site and that I didn't have to copy that into my CSS box. (I was wrong, right?) Thanks for your help. It looks great on FF and Safari now, and I figured out how to change the font to palatino.
-C-


I edited message #194 above to add the whole updated navbar code. I checked both IE6 and FF2 and they look identical now. Went thru and think I caught all the box widths to equalize them.

Oh, delete this at the bottom of your CSS.
#navcontainer ul {
...
font-family: palatino; < < you want this font?
}

Have no idea how it will look in other browsers including Safari.

[tracy]

I was wondering how you get rid of built in smugmug nav bar below the nav bar that has been created? It is in my pricing page and the gallery pages.
http://www.tlcphotos.net/gallery/1383382 it says Tracy - Professional- pricing.

Can you help?

Tracy
tlcphotos.net

[Lenka]

Lenka, add this to your CSS, it reserves space for the slideshow so the
elements below won't move.

#ssSlide {
height: 500px;
}

You migth also have to set slideHeight = "xxx"; in your footer
code, I thought I saw one pic that went over your footer.

Thank you for the help! It worked just right!

Lenka :):barb

[Allen]

I was wondering how you get rid of built in smugmug nav bar below the nav bar that has been created? It is in my pricing page and the gallery pages.
http://www.tlcphotos.net/gallery/1383382 it says Tracy - Professional- pricing.

Can you help?

Tracy
tlcphotos.net
Add this to your CSS to remove smugmug nav

.gallery_1383382 #breadcrumb {display:none;}


PLayed the image and text alignment, just an option.

/* This formats the caption text. */

.gallery_1383382 .journal_entry li {
margin: 10px 0 0 20px; /* top right bottom left */
}

/* This will align image top with the caption text. */

.gallery_1383382 .journal_entry img {
margin-top: 25px;
}

Hope this helps, holler back with any questions.

[tracy]

Hi Al - same is true with the rest of my galleries as well. Is there a way to get rid of all the smugmug nav? I noticed that the one you showed me had a number to the gallery, but not all have a number; like this one http://www.tlcphotos.net/Engagement . It is the same with every gallery. Some have gallery # and others just the category. On the one you gave me the code for had the words breadcrumb, is that the theme? If so I have different themes through out. Could you give me a guideline I can follow? And would I be doing each gallery separatley?

Thank You, Tracy

[Allen]

Hi Al - same is true with the rest of my galleries as well. Is there a way to get rid of all the smugmug nav? I noticed that the one you showed me had a number to the gallery, but not all have a number; like this one http://www.tlcphotos.net/Engagement . It is the same with every gallery. Some have gallery # and others just the category. On the one you gave me the code for had the words breadcrumb, is that the theme? If so I have different themes through out. Could you give me a guideline I can follow? And would I be doing each gallery separately?

Thank You, Tracy

By adding the gallery number it made specific for that gallery.
Remove the .gallery_1383382 and it will be applied on all your pages.
It's also recommended to enable them when you're logged in. It really helps
to navigate around the site. Only you when logged in will see it.


#breadcrumb {display:none;}
.loggedIn #breadcrumb {display:block;}

Hope this helps

[tracy]

AL - your the Awesome, thank you so much for all your help.

Tracy

[Beal]

In IE6 one of my links is below the rest of the navbar. Also when the drop down menu drops it disappears when you try to make a choice. I checked out post #184 but it looks to me like my code is ok. Any help would be much appreciated.

Todd
www.bealsphoto.smugmug.com

[Allen]

In IE6 one of my links is below the rest of the navbar. Also when the drop down menu drops it disappears when you try to make a choice. I checked out post #184 but it looks to me like my code is ok. Any help would be much appreciated.

Todd
www.bealsphoto.smugmug.com (http://www.bealsphoto.smugmug.com) First clean up the html so IE will work.
Add the green and remove the red.


<li><a href="http://bealsphoto.smugmug.com/Pricing/237966">Individual Print Pricing</a></li>
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
Once that's done we can look at the CSS and reposition and line up the
drops in IE.

[Beal]

First clean up the html so IE will work.
Add the green and remove the red.


<li><a href="http://bealsphoto.smugmug.com/Pricing/237966">Individual Print Pricing</a></li>
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
Once that's done we can look at the CSS and reposition and line up the
drops in IE.

Got it. I think. Thanks for your help!

[Allen]

Got it. I think. Thanks for your help! Looks like IE's ok now, all it needs is width adjusted and drops positioned.
I'll see if I can get you started on that, be back soon, hope.

Edit: back, you need to make these changes to your html.


<li><a href="http://bealsphoto.smugmug.com/Pricing/237966">Individual Print Pricing</a></li>
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

[Beal]

Looks like IE's ok now, all it needs is width adjusted and drops positioned.
I'll see if I can get you started on that, be back soon, hope.

Edit: back, you need to make these changes to your html.


<li><a href="http://bealsphoto.smugmug.com/Pricing/237966">Individual Print Pricing</a></li>
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>


Hmm, looked at it at work today and it still looks like I have it wrong. Made the changes in the Edit: back. I think I have them right.

[Allen]

Hmm, looked at it at work today and it still looks like I have it wrong. Made the changes in the Edit: back. I think I have them right.
Found a couple errors in your slideshow code in the footer.
Remove red and add green

slideHeight="400";
slideWidth="640";
slideDuration=4;
loadSlideshow

if (YD.hasClass(document.body,'homepage') && !YD.hasClass(document.body,
'galleries'))
loadSlideshow ();
< /script >

Menu looks good in IE but can't get it to not wrap.

Getting a hasPath not defined error and don't see any hasPath function
definition in js. This might be causing problems because to use it in your
footer code, below, the function has to be defined first in js.

Might remove this for now and see it IE cooperates.

< script >
if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
< /script >

Other then then that I can't find anything else funny.

[Beal]

Found a couple errors in your slideshow code in the footer.
Remove red and add green

slideHeight="400";
slideWidth="640";
slideDuration=4;
loadSlideshow

if (YD.hasClass(document.body,'homepage') && !YD.hasClass(document.body,
'galleries'))
loadSlideshow ();
< /script >

Menu looks good in IE but can't get it to not wrap.

Getting a hasPath not defined error and don't see any hasPath function
definition in js. This might be causing problems because to use it in your
footer code, below, the function has to be defined first in js.

Might remove this for now and see it IE cooperates.

< script >
if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
< /script >

Other then then that I can't find anything else funny.

Thanks, I've ,made the recommended changes. I have IE7 and FF so I will check it out tomorrow at work.

Thanks, again for your help.

[Allen]

Thanks, I've ,made the recommended changes. I have IE7 and FF so I will check it out tomorrow at work.

Thanks, again for your help.
Finally got IE's menu not to wrap by making it a little wider.

Remove this, don't apply anywhere I can find.

#navcontainer {
width:750px;
margin:0 auto;
}

Remove this in red above menu, it's a duplicate.

.menu table {
position:absolute;
top:auto 0; left:0;
}

Add the green _width for IE

.menu {
position:relative;
display:block;
z-index:99;
padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div .menu) */
width:616px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
_width:630px; /* width for IE */
margin:0 auto; /* this should center navbar, if not tweak with left's below */
/* left:0px; tweak this to center navbar */
/* _left:0px; tweak this to center navbar for IE */
}

[Beal]

Finally got IE's menu not to wrap by making it a little wider.

Remove this, don't apply anywhere I can find.

#navcontainer {
width:750px;
margin:0 auto;
}

Remove this in red above menu, it's a duplicate.

.menu table {
position:absolute;
top:auto 0; left:0;
}

Add the green _width for IE

.menu {
position:relative;
display:block;
z-index:99;
padding:20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div .menu) */
width:616px; /* width of menu - minimize this untill doesn't wrap to two lines - too large effects centering */
_width:630px; /* width for IE */
margin:0 auto; /* this should center navbar, if not tweak with left's below */
/* left:0px; tweak this to center navbar */
/* _left:0px; tweak this to center navbar for IE */
}

Ok, changes made!

[Allen]

Ok, changes made!
:thumbLooks good in both Firefox and IE now.

Anything else you need help with, holler back.

[PH[O]TO]

Hi,

I need help customizing my NavBar hover highlight to be just a line either under or above (Like Andy's site) the links - not the whole word highlighted.

Also, how to customize the color of this "line" highlight.

Thanks

[zacker]

Hey Allen, is there any way to change the Font in my navbar??? Id like to get it to match my header font if thats possible.. Thanks!

[Allen]

Hey Allen, is there any way to change the Font in my navbar??? Id like to get it to match my header font if thats possible.. Thanks!
The first one gives the menu a little height. See second for font. Not all browsers see all fonts. Check here (http://typetester.maratz.com/) to get common one.

.navcontainer {
height: 20px;
}

.navcontainer ul li a {
font-family: verdana, tahoma, helvetica, arial, sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #C0C0C0;
background-color: #000000;

}

You have three sets of identical nav code. Might remove two of them.

[Allen]

TO']Hi,

I need help customizing my NavBar hover highlight to be just a line either under or above (Like Andy's site) the links - not the whole word highlighted.

Also, how to customize the color of this "line" highlight.

Thanks
You have a site out there on the internet somewhere?:D

Could be as simple as adding a bottom or top border.

.menu ul li a,
.menu ul li a:visited {
.
.
border: 1px solid red;
border-width: 1px 0px 1px 0px; /* top right bottom left */
.
.
}

[zacker]

The first one gives the menu a little height. See second for font. Not all browsers see all fonts. Check here (http://typetester.maratz.com/) to get common one.

.navcontainer {
height: 20px;
}

.navcontainer ul li a {
font-family: verdana, tahoma, helvetica, arial, sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #C0C0C0;
background-color: #000000;

}

You have three sets of identical nav code. Might remove two of them.

ok Allen, do i insert the green stuff into my code? i did and it did nothing....lol

if i remove two of the three codes i have, will it screw up my nav bar? it works great now, im afraid to mess with it. i just want to change the font to better match my header.. what do i do?
thanks!

[PH[O]TO]

You have a site out there on the internet somewhere?:D

Could be as simple as adding a bottom or top border.

.menu ul li a,
.menu ul li a:visited {
.
.
border: 1px solid red;
border-width: 1px 0px 1px 0px; /* top right bottom left */
.
.
}

Thanks Allen! I played around with the borders and decided to use right and left borders. The link titles shift slightly when hovering over them. I imagine I just need to adjust spacing between the links?

Here is my work in progress: http://gregoryrobak.smugmug.com/

By the way, the Smugmug support you and Andy provide is awesome, I am recommending this site to everyone who will listen.

[Allen]

ok Allen, do i insert the green stuff into my code? i did and it did nothing....lol

if i remove two of the three codes i have, will it screw up my nav bar? it works great now, im afraid to mess with it. i just want to change the font to better match my header.. what do i do?
thanks!

The green is good, the red are all dups.

These are the fonts browsers will use.
verdana, tahoma, helvetica, arial, sans-serif
They'll pick the first one on the left and if not installed on go to the next
one and so on. Change those to what ever you want but be careful, not all
browers/pc's/macs have the fonts installed

.navcontainer {
height: 20px;
}

.navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

.navcontainer ul li {
display: inline;
}

.navcontainer ul li a {
font-family: verdana, tahoma, helvetica, arial, sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #C0C0C0;
background-color: #000000;
}

.navcontainer ul li a:hover {
color: #C0C0C0;
background-color: #000000;
}

.navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

.navcontainer ul li {
display: inline;
}

.navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #C0C0C0;
background-color: #000000;
}

.navcontainer ul li a:hover {
color: #C0C0C0;
background-color: #000000;
}

.navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

.navcontainer ul li {
display: inline;
}

.navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #C0C0C0;
background-color: #000000;
}

.navcontainer ul li a:hover {
color: #C0C0C0;
background-color: #000000;
}

[Allen]

TO']Thanks Allen! I played around with the borders and decided to use right and left borders. The link titles shift slightly when hovering over them. I imagine I just need to adjust spacing between the links?

Here is my work in progress: http://gregoryrobak.smugmug.com/

By the way, the Smugmug support you and Andy provide is awesome, I am recommending this site to everyone who will listen.
Hey that's pretty cool.:thumb

[Beal]

Thanks for all your help Allen,

Much appreciated!!

:bow

[jrglass]

I incorporated the Nav Bar w/dropdowns a few weeks back and thought everything was working fine. Yesterday I was on friends computer and found that the Nav Bar is not working properly in IE7. It seems to be working fine in IE6. I have not tried it with any other browsers.

I re-read the help threads and did not find anything to fix my issue. I also went back and looked at the code to see if I could find any problems - no luck.

Could someone take a look with IE7. I am sure it is something simple that I am missing.

www.jrglassphotography.com (http://www.jrglassphotography.com)

Thanks,
Jr.

[zacker]

I incorporated the Nav Bar w/dropdowns a few weeks back and thought everything was working fine. Yesterday I was on friends computer and found that the Nav Bar is not working properly in IE7. It seems to be working fine in IE6. I have not tried it with any other browsers.

I re-read the help threads and did not find anything to fix my issue. I also went back and looked at the code to see if I could find any problems - no luck.

Could someone take a look with IE7. I am sure it is something simple that I am missing.

www.jrglassphotography.com (http://www.jrglassphotography.com)

Thanks,
Jr.


yeah i see it... its all jumbled up in the center of the page.. is all the code in the right spots/boxes?

wait till Andy or Mike see this post, they should know the fix. Sorry i cant help you but only confirm that its messed up.

[Allen]

I incorporated the Nav Bar w/dropdowns a few weeks back and thought everything was working fine. Yesterday I was on friends computer and found that the Nav Bar is not working properly in IE7. It seems to be working fine in IE6. I have not tried it with any other browsers.

I re-read the help threads and did not find anything to fix my issue. I also went back and looked at the code to see if I could find any problems - no luck.

Could someone take a look with IE7. I am sure it is something simple that I am missing.

www.jrglassphotography.com (http://www.jrglassphotography.com)

Thanks,
Jr.
These two changes in green should fixed it for Firefox.
Looks like you're miissing a few other elements also, looking now.

.menu {
position:relative;
display:block;
z-index:99;
padding:0px 0px 0px 0px; /* spacing around menu - top right bottom left */
height:20px; /* menu container (div .menu) */
width:740px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
_width:700px; /* tweak this to center navbar for IE */
margin:0 auto; /* this should center navbar, if not tweak with left's below */
left: 10px; /* tweak this to center navbar */
_left: 0px; /* tweak this to center navbar for IE */
}

.menu ul li a,
.menu ul li a:visited {
display:block;
font-size:.9em; /* main buttons */
color: #fff ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width: 90px; /* main box width */
height:20px; /* main box height */
border:1px solid white; /* borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background:none; /* main button color */
padding-left:0px;
line-height:20px; /* positions text up/down in box */
}

Edit:
Adding missing elements that might be causing problems.
Doing a compare with code from here (http://allen-steve.smugmug.com/gallery/2078255).


/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}

.menu ul li a:hover ul li a:hover ul.left {
left: -134px;
}

[jrglass]

Al,

I incorporated the two changes you suggested. How does the Nav Bar now look in IE7? I don't have IE7 so I can't check it at this time.

Also, the changes moved the Nav Bar to the left in IE6, so the Nav Bar is no longer lined up under my banner.

I removed the Hide Extra Levels code because I did not have any extra levels and did not think it was necessary. Was I wrong?

Thanks,
Jr.

[Allen]

Al,

I incorporated the two changes you suggested. How does the Nav Bar now look in IE7? I don't have IE7 so I can't check it at this time.

Also, the changes moved the Nav Bar to the left in IE6, so the Nav Bar is no longer lined up under my banner.

I removed the Hide Extra Levels code because I did not have any extra levels and did not think it was necessary. Was I wrong?

Thanks,
Jr.
Check my post above, adding width for IE. Don't have IE7 here either but if
the html's exactly correct it follows FF pretty good.

[zacker]

looking good from here with IE7 my friend!

[Allen]

Al,

I incorporated the two changes you suggested. How does the Nav Bar now look in IE7? I don't have IE7 so I can't check it at this time.

Also, the changes moved the Nav Bar to the left in IE6, so the Nav Bar is no longer lined up under my banner.

I removed the Hide Extra Levels code because I did not have any extra levels and did not think it was necessary. Was I wrong?

Thanks,
Jr.
See post above for tweaking IE only.

You should only need the 2nd level visible when hover on 1st level.

[jrglass]

Al,

Thanks for the code help. I have made the changes and it looks good in IE6.

Zacker,

Thanks for giving me a set of eyes on IE7. If you could check one more time (after the latest changes), how does it look in IE7 now?

:clap
Dgrin and the fine folks here come through again!
Jr.

[zacker]

STILL LOOKING GOOD! now i gotta go check out your pics...lol I saw light painting and thats something i been wanting to go try but its been so cold outside!

[zacker]

the only thing i do notice is when you click on a link in the drop down it pulls up the gallery, you have a double line border above and below the lead gallery image, the top line of the two runs through the center of the Nav bar, not a huge deal but a deal none the less... your lightpainting pics are amazing, all most look like computer grafix instead of photos... i love the first image of the cowboy sitting on the floor.. bravo!

[zacker]

Ummm i got it now, the lines only come out when you actually clikc on the nav bar, if you pull up the regular gallery, its not there...lol

[yldan]

I'm having a couple problems with my navbar in different browsers...

in IE6... it looks great. just how i want it, but sometimes it will dip down behind photos (only in some galleries, it seems).

in IE7... there is a space. i'd like to fix that.

in Safari... my navbar drops down behind the slideshow, rendering it almost worthless. i think it also drops down behind pictures. i don't have safari, so maybe someone could tell me. also, is there a space? (i can't remember)

in Firefox... everything is great, except the "portfolio" dropdown drops behind the word "next" when you're viewing galleries with multiple pages... which is most of them.

any catch all "always on top" that fixes all of these?

yldan.smugmug.com
Thanks for the help!

[Allen]

I'm having a couple problems with my navbar in different browsers...

in IE6... it looks great. just how i want it, but sometimes it will dip down behind photos (only in some galleries, it seems).

in IE7... there is a space. i'd like to fix that.

in Safari... my navbar drops down behind the slideshow, rendering it almost worthless. i think it also drops down behind pictures. i don't have safari, so maybe someone could tell me. also, is there a space? (i can't remember)

in Firefox... everything is great, except the "portfolio" dropdown drops behind the word "next" when you're viewing galleries with multiple pages... which is most of them.

any catch all "always on top" that fixes all of these?

yldan.smugmug.com
Thanks for the help! To start with add the red behind every </ul>

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

[yldan]

To start with add the red behind every </ul>

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

thanks al, can i ignorantly ask what this does? (just trying to learn...)

[yldan]

To start with add the red behind every </ul>

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

Al, just did it, and I'm still getting the "next" problem in FF. did i do something wrong, or is this not a fix for that?

[Allen]

Al, just did it, and I'm still getting the "next" problem in FF. did i do something wrong, or is this not a fix for that?
This is some of what I have, it basically sets the navs showing thru to a
lower z-index. Play with a combination of these. Don't have time at the
moment so good luck.


#pageNavigation_top,
#pageNavigation_top .nav.first,
#pageNavigation_top .nav.last,
#pageNavigation_top .nav.next,
#pageNavigation_top .nav.prev,
#pageNavigation_top .pageOn.title,
#pageNavigation_bottom,
#pageNavigation_bottom .nav.first,
#pageNavigation_bottom .nav.last,
#pageNavigation_bottom .nav.prev,
#pageNavigation_bottom .nav.next,
#pageNavigation_bottom .pageOn.title {
z-index: 50 !important;
color: #111111 !important;
}

[lisac19]

I've been trying to use Steve Allen's drop down tutor page to create these and just can't comprehend how yall do this! I got lost on my <ul><li>'s (don't even have a clue as to what these mean)
This is what I'm trying to get:
Football--Neville (DD)--Freshmen (FO); JV (FO); Varsity (FO)
Soccer--Neville (DD)--JV (FO); Varsity (FO)
NELSA (DD)--Max (FO); Oliver (FO)
Baseball--Neville (DD)--Freshmen (FO); JV (FO); Varsity (FO)
MYBA (DD)--Max (FO); Oliver (FO)
Family and Stuff--Gabriella (DD)
Stuff (DD)

Any assist would be GREATLY appreciated!!!

http://campbellphotos.smugmug.com/

THANKS, LISA

[Allen]

I've been trying to use Steve Allen's drop down tutor page to create these and just can't comprehend how yall do this! I got lost on my <ul><li>'s (don't even have a clue as to what these mean)
This is what I'm trying to get:
Football--Neville (DD)--Freshmen (FO); JV (FO); Varsity (FO)
Soccer--Neville (DD)--JV (FO); Varsity (FO)
NELSA (DD)--Max (FO); Oliver (FO)
Baseball--Neville (DD)--Freshmen (FO); JV (FO); Varsity (FO)
MYBA (DD)--Max (FO); Oliver (FO)
Family and Stuff--Gabriella (DD)
Stuff (DD)

Any assist would be GREATLY appreciated!!!

http://campbellphotos.smugmug.com/

THANKS, LISA
Only take a few minutes to throw together for you.
Be back in a while.:D

[RogersDA]

O.k.....what happened?

All page links are now formated (poorly) as a result of the navbar code. Looks even worse in IE7.

Can I get the links on the pages to be the formatting I selected (black, underlined, for example) without incorporating the navbar formatting?

Never mind - I got it.

[Allen]

Got the html header code worked out, working on the CSS now.
I left most of the links out, be easy to add later. See green below for typical placement.

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="/Football">Football
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="Place link here">Neville >
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/2248042">Freshmen</a></li>
<li><a href="/gallery/2493144">JV</a></li>
<li><a href="/gallery/2493151">Varsity</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="drop" href="/Soccer">Soccer
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="">Neville >
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Soccer/288105">Varsity</a></li>
<li><a href="/Soccer/288098">JV</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Soccer/287988">NELSA >
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/2494691">Max</a></li>
<li><a href="/gallery/2494694">Oliver</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Baseball">Baseball
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="">Neville >
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Baseball/288058">Freshmen</a></li>
<li><a href="/Baseball/288139">JV</a></li>
<li><a href="/Baseball/288141">Varsity</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="">MYBA >
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">Max</a></li>
<li><a href="/Baseball/287896">Oliver</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Family_and_Stuff">Family and Stuff
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Family_and_Stuff/263461">Gabriella</a></li>
<li><a href="/Family_and_Stuff/287285">Stuff</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>


Edit: Inserted a bunch of the links

[Allen]

Here's the CSS to support the hrml. Might need a few tweaks for IE.


/* 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 */

/* Common Styling */
#navcontainer {
position:relative;
display:block;
z-index:99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div #navcontainer) */
width: 620px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this centers navbar */
}

#navcontainer ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

#navcontainer ul li {
float:left; /* WARNING: float right reverses menu */
position:relative;
}

#navcontainer ul li a,
#navcontainer ul li a:visited {
display:block;
font-size:1em; /* main buttons */
color: #C0C0C0 ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width: 110px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: #000000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html #navcontainer ul li a, #navcontainer ul li a:visited {
width: 110px; w\idth: 114px; /* IE main button */
}

#navcontainer ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li:hover a {
color: white; /* main when hover DD */
background: #000000; /* main when hover DD */
}

#navcontainer ul li:hover ul {
display:block;
position:absolute;
top: -6px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 110px; /* unknown */
}

#navcontainer ul li:hover ul li ul {
display: none;
}

#navcontainer ul li:hover ul li a {
display:block;
background: #000000; /* DD FO non-hover */
color: #cccccc; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 110px /* DD FO box width */
}

#navcontainer ul li:hover ul li a:hover {
background: #000000; /* DD FO hover */
color: white; /* DD FO hover */
}

#navcontainer ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 112px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 110px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: white; /* main hover */
background: #000000; /* main hover */
}

#navcontainer ul li a:hover ul {
display:block;
position:absolute;
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

#navcontainer ul li a:hover ul li a {
display:block;
background: #000000; /* IE DD color non-hover */
color: white; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 110px; /* IE DD FO box */
}

#navcontainer ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

#navcontainer ul li a:hover ul li a:hover {
background: #000000; /* DD FO hover */
color: white; /* DD FO hover */
}

#navcontainer ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}

#navcontainer ul li a:hover ul li a:hover ul.left {
left: -134px;
}

/* following commented out for now not sure if needed */
/*#navcontainer ul li a:hover ul li a:hover ul {
text-decoration:line-through; /* IE effects FO1 & FO2 */
color: black ; /* IE effects line-through above FO1 & FO2 */
font-size:1.2em; /* IE effects FO2 only */}*/

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html #navcontainer a, * html #navcontainer a:visited {
width: 110px;
w\idth: 114px;
}

/* another hack for IE5.5 */

* html #navcontainer ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
#navcontainer table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html #navcontainer ul ul a{
width: 110px; /* unknown */
w\idth: 114px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
#navcontainer ul a:hover ul, /* IE */
#navcontainer ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
#navcontainer ul a:hover ul ul, /* IE */
#navcontainer ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
#navcontainer ul li a:hover ul li a:hover ul ul, /* IE */
#navcontainer ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
#navcontainer ul a:hover ul a:hover ul, /* IE */
#navcontainer ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
#navcontainer ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
#navcontainer ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* **** END navbar **** */

[lisac19]

Thanks so much. Everything looks great! How can I remove my old nav bars that have shifted to the left and then center my new specially made ones?

I'm amazed by the talent and assist on this site
I bow in your presence! Lisa

http://campbellphotos.smugmug.com/


Here's the CSS to support the hrml. Might need a few tweaks for IE.


/* 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 */

/* Common Styling */
#navcontainer {
position:relative;
display:block;
z-index:99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div #navcontainer) */
width: 620px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this centers navbar */
}

#navcontainer ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

#navcontainer ul li {
float:left; /* WARNING: float right reverses menu */
position:relative;
}

#navcontainer ul li a,
#navcontainer ul li a:visited {
display:block;
font-size:1em; /* main buttons */
color: #C0C0C0 ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width: 110px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: #000000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html #navcontainer ul li a, #navcontainer ul li a:visited {
width: 110px; w\idth: 114px; /* IE main button */
}

#navcontainer ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li:hover a {
color: white; /* main when hover DD */
background: #000000; /* main when hover DD */
}

#navcontainer ul li:hover ul {
display:block;
position:absolute;
top: -6px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 110px; /* unknown */
}

#navcontainer ul li:hover ul li ul {
display: none;
}

#navcontainer ul li:hover ul li a {
display:block;
background: #000000; /* DD FO non-hover */
color: #cccccc; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 110px /* DD FO box width */
}

#navcontainer ul li:hover ul li a:hover {
background: #000000; /* DD FO hover */
color: white; /* DD FO hover */
}

#navcontainer ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 112px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 110px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

#navcontainer ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: white; /* main hover */
background: #000000; /* main hover */
}

#navcontainer ul li a:hover ul {
display:block;
position:absolute;
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

#navcontainer ul li a:hover ul li a {
display:block;
background: #000000; /* IE DD color non-hover */
color: white; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 110px; /* IE DD FO box */
}

#navcontainer ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

#navcontainer ul li a:hover ul li a:hover {
background: #000000; /* DD FO hover */
color: white; /* DD FO hover */
}

#navcontainer ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}

#navcontainer ul li a:hover ul li a:hover ul.left {
left: -134px;
}

/* following commented out for now not sure if needed */
/*#navcontainer ul li a:hover ul li a:hover ul {
text-decoration:line-through; /* IE effects FO1 & FO2 */
color: black ; /* IE effects line-through above FO1 & FO2 */
font-size:1.2em; /* IE effects FO2 only */}*/

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html #navcontainer a, * html #navcontainer a:visited {
width: 110px;
w\idth: 114px;
}

/* another hack for IE5.5 */

* html #navcontainer ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}

/* style the table so that it takes no part in
the layout - required for IE to work */
#navcontainer table {
position:absolute;
top:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html #navcontainer ul ul a{
width: 110px; /* unknown */
w\idth: 114px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
#navcontainer ul a:hover ul, /* IE */
#navcontainer ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
#navcontainer ul a:hover ul ul, /* IE */
#navcontainer ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
#navcontainer ul li a:hover ul li a:hover ul ul, /* IE */
#navcontainer ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
#navcontainer ul a:hover ul a:hover ul, /* IE */
#navcontainer ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
#navcontainer ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
#navcontainer ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

/* **** END navbar **** */

[Allen]

Thanks so much. Everything looks great! How can I remove my old nav bars that have shifted to the left and then center my new specially made ones?

I'm amazed by the talent and assist on this site
I bow in your presence! Lisa

http://campbellphotos.smugmug.com/ Just delete your old nav from your header code.

<div id="navcontainer">
<ul>
<li><a href="http://campbellphotos.smugmug.com">Home</a></li>
<li><a href="http://campbellphotos.smugmug.com/Football">Football</a></li>
<li><a href="http://campbellphotos.smugmug.com/Soccer">Soccer</a></li>
<li><a href="http://campbellphotos.smugmug.com/Baseball">Baseball</a></li>
<li><a href="http://campbellphotos.smugmug.com/Family%20and%20Stuff">Family and Stuff</a></li>
</ul>
</div>

Delete the old CSS also.

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 2em;
color: #C0C0C0;
background-color: #000000;
}

#navcontainer ul li a:hover {
color: #000000;
background-color: #C0C0C0;
}

Also you have a ":" the needs to be deleted between these two. It's
messing up everything after it.

.galleryPage #imageInfo {display:none}
:
/* CSS Dropdown Nav Bar */

Search for this and change the left to 110px. It moves the flyouts closer
to the drops.

#navcontainer ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 110px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 110px; /* FF FO box width */
}

[Allen]

Thanks so much. Everything looks great! How can I remove my old nav bars that have shifted to the left and then center my new specially made ones?

I'm amazed by the talent and assist on this site
I bow in your presence! Lisa

http://campbellphotos.smugmug.com/
After you get these changes incorporated we'll have to look a IE and probably
have to tweak it some. All this is for Firefox so far.

In the CSS code you'll see these in the comments.
FF = Firefox
IE = IE
DD = dropdown
FO = flyout

[HoltArts]

I've been sifting all through this place for some navbar answers, and it seems that my question's answer comes naturally to most. Alas, here it goes, as I know next to nothing about CSS...or any coding, really. :D

I've tried the navbar tutorial (as I saw someone else did awhile back), but no changes appeared in my preview. What I'm really wondering, though, is how to link a navbar button to a gallery page. I can see how most other links (about me, guestbook, etc.) can simply be schnazzed-up galleries, but to just get a page of galleries...:scratch Would I have to hide everything on my main page??

Ideally, I'd like to have a homepage similar to that of the MoonRiver site, with a classy slideshow for people to gawk at before they even get to the meat of the site. Any help there would be WOW! :-)

Finally, (sorry for the onslaught of helplessness!) I'm having some searchbar issues as well--I know this is the navbar zone, but there's a good chance of me losing my train of thought between posts. :D
Anyway, I'd like my search bar to move from the bottom-left corner of the page to the upper-right part of the area where a navbar would be.
Also, how can I let people search for more than one word without just bringing up a list of keywords as the result?

Thanks so much! This place is AMAZING :thumb

[Allen]

...
Finally, (sorry for the onslaught of helplessness!) I'm having some searchbar issues as well--I know this is the navbar zone, but there's a good chance of me losing my train of thought between posts. :D
Anyway, I'd like my search bar to move from the bottom-left corner of the page to the upper-right part of the area where a navbar would be.
Also, how can I let people search for more than one word without just bringing up a list of keywords as the result?

Thanks so much! This place is AMAZING :thumb
Welcome to Dgrin.:wave

The simplist way is move the code in your footer to just below your banner
in your header code.

<div id="my_banner"> </div>

<div id="mysearch" align="right">
<!-- Site Keyword Search -->
<form name="suggest" action="/keyword/jump.mg">
search
<input autocomplete="off" maxlength="256" size="25" name="Keyword" value="" onfocus="InstallAC(document.suggest,document.sugge st.Keyword,document.suggest.submitButton,'suggestR PC.mg','en')">
<input value="keyword search" name="submitButton" class="buttons" type="submit">
</form>
<!-- End Site Keyword Search -->
</div>
Then add this to your CSS.

#mysearch {
margin-left: 460px;
}