I'm not sure on the non-horizontal menu issue. What I would do is copy your code to notepad and copy the code from the original post (assuming that's where you code came from) to another notepad doc... print the two and compare... something is missing, but I'm not sure... maybe others can find it...

Hi Brad,

thanks a lot for your help.

Any help on horizontal/vertical issue for the menu on IE?

Thanks,

Originally Posted by beeplove Hi Brad, thanks a lot for your help. Any help on horizontal/vertical issue for the menu on IE? Thanks,

problems in the css, I took the original code and modified it for you.
worked well on my test gallery
just replace your old navbar css with this one, make a backup of your old code in case you don't like it.

/*Navbar CSS*/
/* style the outer div to give it width */
.menu {
width:750px; 
font-size:0.85em;
padding-bottom:30px;
margin: 0 auto;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
text-align:center;
}
.menu ul ul {
width:125px;
}
/* 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:125px;
_width:123px;
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:125px;
_width:123px; 
height:30px; 
background-color:#000; 
line-height:30px;
}

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

/* 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:30px;
left:0; 
width:125px;
_width:123px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:125px; 
top:0;
width:125px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-125px;
}

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

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#000; 
color:#DDD; 
height:auto; 
line-height:1em; 
padding:5px; 
width:115px;
_width:113px;
}



/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#000;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#000;
}

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

Can any of you Nav Bar gurus please help me out here. I have the basic layout of what I want, but can't figure out which codes change the formatting that I want. I have been playing by trial and error for hours now, and just can't figure it out.

1. I want the buttons to line-up across, evenly spaced with the width of my header.
2. I want the text in the buttons to be centered.
3. I want the text color to be white for the main buttons.
4. I want the text color for the hover be some sort of silver to match my silver in my header

Please help. Thanks.

Site is mvpmoments.smugmug.com

Originally Posted by MVPMoments ... 3. I want the text color to be white for the main buttons. 4. I want the text color for the hover be some sort of silver to match my silver in my header...

Things tweaked in green

.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#e3cfb5; text-align:center;
width:104px;
height:20px;
color:#e3cfb5;
border:1px solid gray;
border-width:2px 2px 2px 2px;
background:transparent; color:white;
padding-left:0px;
line-height:20px;}

Al

Dropdown text color
.menu ul li:hover ul li a {display:block; background:#000000; color:white; height:auto; line-height:20px; padding:0px 0px; width:132px}

Dropdown hover text color
.menu ul li:hover ul li a:hover {background:#000000; color:red;}

Change to any color you like.
Al

Originally Posted by Allen Dropdown text color .menu ul li:hover ul li a {display:block; background:#000000; color:white; height:auto; line-height:20px; padding:0px 0px; width:132px} Dropdown hover text color .menu ul li:hover ul li a:hover {background:#000000; color:red;} Change to any color you like. Al

Thanks so much Al. How do I make the buttons wider to spread out further across the top? Also, there is too much space between my Nav Bar and my slideshow. Is that from the coding in my Nav Bar? If so, how can I reduce that spacing.

Originally Posted by MVPMoments Thanks so much Al. How do I make the buttons wider to spread out further across the top? Also, there is too much space between my Nav Bar and my slideshow. Is that from the coding in my Nav Bar? If so, how can I reduce that spacing.

Hey Steve,

The space between your nav bar and your slideshow can be controlled with:

.menu {
  font-family:verdana;
  width:738px;
  position:relative;
  z-index:99;
  font-size:12px;
  padding-bottom:30px; _padding-bottom:18px;
  margin: 0 auto;}

And the mainbar button widths with:

.menu ul li a, .menu ul li a:visited {
  display:block;
  text-decoration:none;
  color:blue;
  width:104px;
  height:20px;
  color:blue; text-align:center;
  border:1px solid gray;
  border-width:2px 2px 2px 2px;
  background:transparent; color: white;
  padding-left:0px;
  line-height:20px;}

Don't be afraid to tinker in FF w/Web Developer.

Hope this helps!

Originally Posted by SteveM Hey Steve, The space between your nav bar and your slideshow can be controlled with: .menu { font-family:verdana; width:738px; position:relative; z-index:99; font-size:12px; padding-bottom:30px; _padding-bottom:18px; margin: 0 auto;} And the mainbar button widths with: .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:blue; width:104px; height:20px; color:blue; text-align:center; border:1px solid gray; border-width:2px 2px 2px 2px; background:transparent; color: white; padding-left:0px; line-height:20px;} Don't be afraid to tinker in FF w/Web Developer. Hope this helps!

Helps a lot. Can you tell me how you set up the boxes under your "Photographer" box. I can't find the info on DGrin. Thanks Steve.

Originally Posted by MVPMoments Helps a lot. Can you tell me how you set up the boxes under your "Photographer" box. I can't find the info on DGrin. Thanks Steve.

The photos with the text ya mean? That's just a journal style photo page, with the text in the photo description box and most of the other junk removed through CSS. I also used some kinda hack to disable clicking of the photos. Check out my CSS through FF/DevTool. My "Photographer" gallery is labeled as "Bio page".

Originally Posted by SteveM The photos with the text ya mean? That's just a journal style photo page, with the text in the photo description box and most of the other junk removed through CSS. I also used some kinda hack to disable clicking of the photos. Check out my CSS through FF/DevTool. My "Photographer" gallery is labeled as "Bio page".

I have never used a journal style photo page before. How/Where do I create one? Also, I know how to use FF/DevTool to see CSS code, but is there a way to also see what HTML is in someone's header and footer? I really appreciate your assistance here.

SO I'm getting things started with my nav buttons on my homepage. But when I go to a gallery or such, the buttons are not mine anymore... they are the original code I copied. DO I have to write this for every page? How do I do this? I know pretty much nothing about code.

Originally Posted by mmrphoto SO I'm getting things started with my nav buttons on my homepage. But when I go to a gallery or such, the buttons are not mine anymore... they are the original code I copied. DO I have to write this for every page? How do I do this? I know pretty much nothing about code.

For some reason the buttons started working on all the pages.... Now, how do i center it. I don't know where in all the mumble-jumble to put the code (I have no idea what I'm looking at, this is all new to me!)

i am excited that i am actually making this work. but, i don't understand
why the navbar is positioned where it is.
can you take a look??? i would lilke for it to be below my header
thanks
http://soar.smugmug.com

Originally Posted by SteveM Hey guys, I recently recieved this email, so I figured I'd post it here for everyone's benefit in case there are people still in the dark. My reply: Hey Deitrich, My menu is based off of the code from http://www.cssplay.co.uk/menus/final_drop2.html I personalized it and changed some things, most specifically the code format so I could better read and understand it. It's best viewed and edited in full screen Notepad, then copy and paste to the appropriate sections of your customization page. There are two parts. The CSS goes in the CSS section of your customization page and the HTML goes in your header section. It seems to work great in all browsers. There may be some erroneous code in there, cuz I'm a nub, but it seems to work. If there are any issues I'm sure the Smuggers on Dgrin can help to sort it out. I do ask that if anyone uses this, please leave in the code comments referring back to http://www.cssplay.co.uk and if you do find this code useful, please help support them. The CSS code: /* 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 */ /* CSS Section */ /* style the outer div to give it width */ .menu { margin: auto; padding:10px 0px 15px 0px; position:relative; /*Make the container moveable*/ width:750px; /*Main bar total width*/ font-size:0.85em; padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */ } /* 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:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */ } /* 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:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */ 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:100; /* Defines the main box dimensions. */ height:30px; /*How tall your cells are*/ border:1px solid #fff; border-width:1px 1px 0 0; background:#758279; padding-left:10px; line-height:29px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */ } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited { width:125px; w\idth:139px; } /* style the second level background */ .menu ul ul a.drop, .menu ul ul a.drop:visited { background:#949e7c; } /* style the second level hover */ .menu ul ul a.drop:hover{ background:#c9ba65; } .menu ul ul :hover > a.drop { background:#c9ba65; } /* 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; } .menu ul ul ul :hover > a { 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:125px; /* Size of the daughter cells */ } /* another hack for IE5.5 */ * html .menu ul ul { top:30px; t\op:31px; /* IE gap between main bar and the dropdown items */ } /* position the third level flyout menu */ .menu ul ul ul{ left:125px; top:0; width:125px; } /* position the third level flyout menu for a left flyout */ .menu ul ul ul.left { left:-125px; } /* style the table so that it takes no ppart in the layout - required for IE to work */ 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:125px; 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 :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 Code */ The HTML/Header section code: <!-- 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 align="center"> <div class="menu"> <ul> <!-- First Main Menu Item --> <li><a class="drop" href="http://www.downriverphotography.com" title="Downriver Photography">Home<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.formassembly.com/forms/25333" title="Contact Us!">Contact Us</a></li> <li><a href="mailto:contact@downriverphotography.com" title="Leave Steve Email">Email Us</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <!-- Next Main Menu Item --> <li><a class="drop" href="http://www.downriverphotography.com/galleries" title="Galleries">Galleries<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.downriverphotography.com/gallery/1800338" title="New Products!">New Products</a></li> <li><a href="http://www.downriverphotography.com/gallery/1284588" title="My Portfolio">Portfolio</a></li> <li><a class="drop" href="http://www.downriverphotography.com/Sports" title="Sports Category">Sports&#187<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a class="drop" href="http://www.downriverphotography.com/Sports/226655" title="Martial Arts">Martial Arts »<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.downriverphotography.com/gallery/1819267">2006 Renaissance Open</a></li> <li><a href="http://www.downriverphotography.com/gallery/1724789">2006 Jabari Classic IV</a></li> <li><a href="http://www.downriverphotography.com/gallery/1596629">2006 Oakland Explosion</a></li> <li><a href="http://www.downriverphotography.com/gallery/1532599">2006 Detroit Classic</a></li> <li><a href="http://www.downriverphotography.com/gallery/1471156">2006 Metro Detroit Open</a></li> <li><a href="http://www.downriverphotography.com/gallery/1288104">2006 Teamforce Martial Arts</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="http://www.downriverphotography.com/Events" title="Events Category">Events»<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.downriverphotography.com/gallery/1621237">2006 Wyandotte Fireworks</a></li> <li><a href="http://www.downriverphotography.com/gallery/1747422">2006 Thunder Over Michigan Airshow</a></li> <li><a href="http://www.downriverphotography.com/gallery/1460085">2006 Schoolcraft College Commencement</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="drop" href="http://www.downriverphotography.com/Nature" title="Nature Category">Nature»<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.downriverphotography.com/gallery/1555029">Matthaei Botanical Gardens</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <!-- Next Main Menu Item --> <li><a href="http://www.downriverphotography.com/popshots" title="Our most popular photos!">Popular<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.downriverphotography.com/popshots" title="The 24 top photos">Top 24 Photos</a></li> <li><a href="http://www.downriverphotography.com/popular" title="The 1000 top photos">Top 1000 Photos</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <!-- Next Main Menu Item --> <li><a href="http://www.downriverphotography.com/gallery/1598265" title="Extra! Extra!">News<!--[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.downriverphotography.com/gallery/1571893" title="Please sign our guestbook!">Guestbook<!--[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.downriverphotography.com/gallery/1575917" title="About the photographer">The Photographer<!--[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.downriverphotography.com/gallery/1596672" title="Our privacy policy"><font color=red>Privacy</font><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </div> <!-- End Navbar Code --> Hope this is of use and not fulla bugs. Steve http://www.downriverphotography.com EDIT: Edited to include opening <div align=center;> and closing </div> statements in the HTML code! Navbars should all center properly now.

i just took out the header for now, so i could work on the navbar.
thought everything was going fine. then went to check it out on
other computers and it is all messed up. i really do not know how
to fix the css.
please, i need BIG help

http://soar.smugmug.com

Originally Posted by suz i am excited that i am actually making this work. but, i don't understand why the navbar is positioned where it is. can you take a look??? i would lilke for it to be below my header thanks http://soar.smugmug.com

thought everything was working fine, but when i checked on another
computer, there are BIG problems with the layout. i don't know how
to fix the css.

Please help

http://soar.smugmug.com

i have discovered that the navbar works great in netscape and firefox, but
crashes the rest of the home page in other browsers. can i fix this.
i will probably need alot of help!
thanks
http://soar.smugmug.com

Originally Posted by suz i am excited that i am actually making this work. but, i don't understand why the navbar is positioned where it is. can you take a look??? i would lilke for it to be below my header thanks http://soar.smugmug.com

Originally Posted by suz i have discovered that the navbar works great in netscape and firefox, but crashes the rest of the home page in other browsers. can i fix this. i will probably need alot of help! thanks http://soar.smugmug.com

Looks to me like there is at least one html mistake in your navbar. At the very end of it you have <ul> when you need </ul>. Fix that and see what it does and we'll go from there.

Originally Posted by Mike Lane Looks to me like there is at least one html mistake in your navbar. At the very end of it you have <ul> when you need </ul>. Fix that and see what it does and we'll go from there.

Also there is no reason that you need to use <div align="center"> and if you do you MUST use </div> to close it off. If you want you can remove it and we can get your elements centered with CSS.

EDIT: Okay sort of. Read more.

Originally Posted by Mike Lane Also there is no reason that you need to use <div align="center"> and if you do you MUST use </div> to close it off. If you want you can remove it and we can get your elements centered with CSS.

Can you take a look at mine? www.mmrphoto.smugmug.com

I'm having the same problem as Suz. It displays fine in Mozzilla or firefox or Safari, but I can't get it to display right on IE which is what most people will probably be using. I started to rebuild one section last night but it didn't get me anywhere, if fact I may have made it worse!