Looking for help with couple of odd things & the drop down nav bar

[lisap]

I've been working on my site for quite a while now and have been able to pretty much find everything I needed here either in the tutorials or the various threads in this forum. The information here is pretty awesome and I'm actually shocked I got as far as I did before needing help as I'm truly a cutter and paster when it comes to this stuff, not a programmer. Thanks to you all!! :lust

Here is my site: www.pictureyourlifephotography.com (http://www.pictureyourlifephotography.com)

First Question:

On my home page, after it loads in I get that 'Done but with errors' message on the bottom left of the browser. Is that something I need to concern myself about?

Second Question:

Somehow, I'm guessing when I added the e-mail link in my footer, I managed to add an e-mail link to the 'Powered by' words in the SmugMug footer. :scratch

Third Question:

I've been playing with the drop down nav bar from this thread http://www.dgrin.com/showthread.php?t=42747

I set everything up outside of my site and then copied and pasted everything in and then used the preview button to see if it worked (because I was too scared to save it in case I really messed things up). What happened was it just took the main (top level) links and lined them up underneath one another on the left hand side.

What is the best way to show you what I did? Should I just paste my code here or should I bite the bullet and save it into my customization?

Thanks!

[jfriend]

I've been working on my site for quite a while now and have been able to pretty much find everything I needed here either in the tutorials or the various threads in this forum. The information here is pretty awesome and I'm actually shocked I got as far as I did before needing help as I'm truly a cutter and paster when it comes to this stuff, not a programmer. Thanks to you all!! :lust

Here is my site: www.pictureyourlifephotography.com (http://www.pictureyourlifephotography.com)

First Question:

On my home page, after it loads in I get that 'Done but with errors' message on the bottom left of the browser. Is that something I need to concern myself about?

Second Question:

Somehow, I'm guessing when I added the e-mail link in my footer, I managed to add an e-mail link to the 'Powered by' words in the SmugMug footer. :scratch

Third Question:

I've been playing with the drop down nav bar from this thread http://www.dgrin.com/showthread.php?t=42747

I set everything up outside of my site and then copied and pasted everything in and then used the preview button to see if it worked (because I was too scared to save it in case I really messed things up). What happened was it just took the main (top level) links and lined them up underneath one another on the left hand side.

What is the best way to show you what I did? Should I just paste my code here or should I bite the bullet and save it into my customization?

Thanks!
Remove this from your bio to get the "Done with errors" to go away:

<script>Rest of slideshow code.
</script>

You have several HTML errors in your footer. Change this:

<div id="myTagline">All Images On This Site © Picture Your Life Photography</div>
<div id="myTagline">Images May NOT Be Used Without Written Permission</div>
<div id="myTagline"><a href="mailto: info@pictureyourlifephotography.com"title="Click to Email">Contact Lisa Piellusch For Usage Information</div>

to this:

<div id="myTagline">All Images On This Site © Picture Your Life Photography<br>
Images May NOT Be Used Without Written Permission<br>
Contact <a href="mailto:info@pictureyourlifephotography.com" title="Click to Email">Lisa Piellusch</a> For Usage Information</div>


The issues that needed to be corrected were:

Missing </a> tag at the end of the line
%20 in the email address
Can't have multiple <div id="myTagline"> in the same document - ids must be one and only one per document

[lisap]

Thanks John!! Worked like a charm :)

So I got brave and saved the code for my drop down nav bar and it was working better than I thought it would based on the initial preview I had done. I've been trying to mess around with different parts of it to get it 'right', and I actually made some headway just guessing my way around, and I 'fixed' up a few things, but I think I'd better stop messing around and get some help again from those who actually know! :)

Here's what I'm still trying to do:

1) Is there a way so that the longer headings don't have to wrap or are at least there isn't such a large gap between the words 'Services and' and 'Products', as well as 'General' and 'Information'?? I don't want the font so tiny that it's not easily readable.

2) With some of the headings being so short (i.e.: Blog) and some being so long (i.e.: Services and Products), there ends up being such large space between items. Is there a way to make it so maybe they are not so evenly spaced? Or is there something else I could try?

3) Sometimes the pop out links disappear before you get a chance to click on them. Is that a normal occurrence for this sort of thing or maybe just more of a user error on my part and I'm just not aiming correctly with the mouse?

4) With the 'Portfolio' drop down, when you're actually in a gallery (i.e.: click on 'Portfolio' and then click on 'Your Self'), the last item in the drop down ('Your Life')seems to be behind the 'Page 1 of 1' words and I can't click it.

That's all I think I'm having troubles with for now.

Thanks so much.

[jfriend]

Thanks John!! Worked like a charm :)

So I got brave and saved the code for my drop down nav bar and it was working better than I thought it would based on the initial preview I had done. I've been trying to mess around with different parts of it to get it 'right', and I actually made some headway just guessing my way around, and I 'fixed' up a few things, but I think I'd better stop messing around and get some help again from those who actually know! :)

Here's what I'm still trying to do:

1) Is there a way so that the longer headings don't have to wrap or are at least there isn't such a large gap between the words 'Services and' and 'Products', as well as 'General' and 'Information'?? I don't want the font so tiny that it's not easily readable.

2) With some of the headings being so short (i.e.: Blog) and some being so long (i.e.: Services and Products), there ends up being such large space between items. Is there a way to make it so maybe they are not so evenly spaced? Or is there something else I could try?

3) Sometimes the pop out links disappear before you get a chance to click on them. Is that a normal occurrence for this sort of thing or maybe just more of a user error on my part and I'm just not aiming correctly with the mouse?

4) With the 'Portfolio' drop down, when you're actually in a gallery (i.e.: click on 'Portfolio' and then click on 'Your Self'), the last item in the drop down ('Your Life')seems to be behind the 'Page 1 of 1' words and I can't click it.

That's all I think I'm having troubles with for now.

Thanks so much.

Replace all of your CSS with this and it should fix all the items you asked about:

/* BANNER */
#my_banner {
width: 750px;
height: 175px;
margin: 0 auto;
background: url(http://pictureyourlife.smugmug.com/photos/460758024_zaAtr-O.png) no-repeat;
}

/* 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: 0 auto;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
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;
height:30px;
list-style-type:none;
width:900px;
}
.menu ul ul {
width:200px; /* 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;
position:relative;
padding: 0 10px;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:9pt;
text-decoration:none;
color:#fff;
height:30px; /*How tall your cells are*/
border-width:0px 0px 0 0;
background:#000000;
padding: 0 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:#CC9966;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#CC9966;
}
.menu ul ul :hover > a.drop {
background:#CC9966;
}
/* 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:#CC9966;
}

/* 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;
z-index:99;
}
/* 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 */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#FFDEAD;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:150px;
/* 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 */


/* DISPLAY SLIDESHOW IN BIO BOX */
#bioBox .photo {
display: none;
}

/* CENTRE SLIDE SHOW IN BIO BOX */

#userBio {
text-align: center !important;
}

/* REMOVE BACKGROUND BEHIND SLIDE SHOW */
#bioBox,
.homepage .boxBottom
{
background: none !important;
}

/* HIDE BIO TEXT */

#bioText {
display: none;
}

/* HIDE GALLERY CATEGORY TEXT ON HOME PAGE */
.homepage #galleryTitle {display: none ;
}

/* HIDE SUB-CATEGORY TEXT ON SUB-CATEGORY PAGES */
#subcategoriesBox .title { display: none; }

/* HIDE CATEGORIES AND GALLERIES ON THE HOME PAGE */
#categoriesBox {display:none;}
.loggedIn #categoriesBox {display:block;
}
//'removed this line because I think it was causing the portfolio page to not show up for visitors #galleriesBox {display:none;
}
.loggedIn #galleriesBox {display:block;
}

/* HIDE BREADCRUMBS */
#breadcrumb {visibility: hidden;
}
#altViews {visibility: visible;
}
.loggedIn #breadcrumb {visibility: visible;
}

/* DISPLAY TAGLINE IN FOOTER */
#myTagline {
text-align: center;
font-family: Verdana, Arial;
font-size: 100%;
font-weight: bold;
color: #FFFFFF;
}

/* HIDE FULL SCREEN SLIDE SHOW BUTTONS */
.play_slideshow {
display: none;
}

/* HIDE KEYWORDS UNDER EACH PHOTO */
#photoKeywords {
display: none !important;
}

/* HIDE 'THIS IS A BRAND NEW GALLERY WITH NO PHOTOS' TEXT ON CALENDAR GALLERY */
/* html only page for gallery XXXXXX */
.gallery_7486903 .nophotos h3{
display: none;
}
.gallery_7486903 .nophotos h3{display: none;
}
.gallery_7634713 .nophotos h3{display: none;
}
.gallery_7635315 .nophotos h3{display: none;
}
.gallery_7486903_MRuULa .pageNav h3{
display: none;
}

/* THIS IS FOR PRODUCT PAGE FROM BRANDOLINO IMAGING */
.bobe_cat {
font-size: 13px;
width: 920px !important;
}
.bobe_cat .yui-nav {
background: url(/img/tabs/cat-top.png) center bottom no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image src=/img/tabs/cat-top.png);
_background: none;
padding-left: 30px;
height: 45px;
padding-bottom: 10px;
}
.bobe_cat .yui-content {
background: url(/img/tabs/cat-middle.png) repeat-y;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale src=/img/tabs/cat-middle.png);
_background: none;
padding: 1px 2px;
}
.bobe_cat .yui-content a, .bobe_cat .yui-content input {
zoom: 1;
position: relative;
}
.bobe_cat .yui-nav li {
margin-right: 1px;
width: 120px;
height: 45px;
top: 3px;
text-align: center;
position: relative;
}
.bobe_cat .yui-nav li.selected {
margin: 0 -14px;
z-index: 999;
width: 148px;
color: #ccc;
}
#tab_cat_bprints {
background: url(/img/tabs/cat_prints_Bayinactive2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image src=/img/tabs/cat_prints_Bayinactive2.png);
_background: none;
}
#tab_cat_bprints.selected {
background: url(/img/tabs/cat_prints_Bayactive2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src=/img/tabs/cat_prints_Bayactive2.png);
_background: none;
}
#tab_cat_prints {
background: url(/img/tabs/cat_prints_EZinactive2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image src=/img/tabs/cat_prints_EZinactive2.png);
_background: none;
}
#tab_cat_prints.selected {
background: url(/img/tabs/cat_prints_EZactive2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src=/img/tabs/cat_prints_EZactive2.png);
_background: none;
}
#tab_cat_merchandise {
background: url(/img/tabs/cat_merchandise_inactive2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image src=/img/tabs/cat_merchandise_inactive2.png);
_background: none;
}
#tab_cat_merchandise.selected {
background: url(/img/tabs/cat_merchandise_active2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src=/img/tabs/cat_merchandise_active2.png);
_background: none;
}
#tab_cat_downloads {
background: url(/img/tabs/cat_downloads_inactive2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image src=/img/tabs/cat_downloads_inactive2.png);
_background: none;
}
#tab_cat_downloads.selected {
background: url(/img/tabs/cat_downloads_active2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src=/img/tabs/cat_downloads_active2.png);
_background: none;
}
#tab_cat_more {
background: url(/img/tabs/cat_more_inactive.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image src=/img/tabs/cat_more_inactive.png);
_background: none;
}
#tab_cat_more.selected {
background: url(/img/tabs/cat_more_active.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src=/img/tabs/cat_more_active.png);
_background: none;
}
#tab_cat_help {
background: url(/img/tabs/cat_help_inactive2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image src=/img/tabs/cat_help_inactive2.png);
_background: none;
}
#tab_cat_help.selected {
background: url(/img/tabs/cat_help_active2.png) no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src=/img/tabs/cat_help_active2.png);
_background: none;
}
#tab_footer {
background: url(/img/tabs/cat_bottom.png) center no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=image, src=/img/tabs/cat_bottom.png);
_background: none;
height: 23px;
}
.bobe_cat .boxTop {
border-bottom: solid 1px #444444;
}
.bobe_cat .boxBottom {
background: none !important;
border-right: 0;
border-left: 0;
border-bottom: 0;
}
.bobe_cat .miniBox {
width: 325px !important;
}
.bobe_cat h3.title, .bobe_cat h3.title a.nolink {
font-size: 17px;
font-weight: normal;
color: #fff;
}
.bobe_cat h3 .nav, .bobe_cat .boxNote, .bobe_cat .boxNote a {
font-size: 13px;
}
.bobe_cat .box {
margin: 5px 10px 20px;
}
.bobe_cat .boxTop, .bobe_cat .boxBottom {
padding: 5px 2px;
}
.bobe_cat .boxBottom p {
margin-top: 0;
margin-bottom: 8px;
}
.bobe_cat p span.title {
font-weight: normal;
}
.bobe_cat #popularPhotos .boxBottom .photo {
margin: 10px 5px 0pt;
width: 105px;
}
#price {color: #FFFFFF; padding-bottom: 15px; }
#divLine {border-bottom:1px solid #5E5E5E;}
tr#MerchNames td, tr#moreNames td {padding-top:8px; }
tr#merchDesc td {padding-top: 0px; padding-right: 54px; width: 152px;}
tr#moreDesc td {padding-top: 0px; padding-right: 54px; width: 350px;}
.printProduct th { border-bottom: 1px solid #5E5E5E; font-size: 13px; padding: 0px -1px 8px 8px; text-align: center;}
.pR td, .pRO td { color: #C5C5C5; padding: 3px 8px; }
p.pR { color: #C5C5C5; }
.pR #printSize, .pRO #printSize{ color: #CCC; font-weight: bold;}
#printSize a {color: #CCC;}
#Mounted {padding-right: 5px;}
#cat_prints {font-size: 14px; }
.aP {font-family:"Arial Unicode MS";}
.pRO {background-color: #363636;}
.gPC {border-left: 1px solid #5E5E5E;}
.wPC {border-left: 1px dashed #5E5E5E;}
.wcPC {border-left: 1px dashed #5E5E5E;}
table.MerchTable, table.moreTable{ border-bottom: 1px solid #090909; border-top: 1px solid #393939; padding-bottom:15px;}
table#topTable {border-top: 1px solid #222222;}
table#bottomTable {border-bottom: 1px solid #222222;}
#catTitle {
color:#FFFFFF;
font-family:"Trebuchet MS",Arial;
font-size:22pt;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin-top: 0px;
margin-bottom: 10px;
}
.tabbed_box h3 {
color:#FFFFFF;
font-family:"Trebuchet MS",Arial;
font-size:16pt;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin-top: 20px;
margin-bottom: 10px;
}
#catSmall {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
#merchDesc, #moreDesc { color: #C5C5C5; }
#MerchNames, #moreNames { font-size: 13pt; }
#MerchNames a, #moreNames a { text-decoration: none; color: #FFFFFF;}
a.selectedColor {
color: white;
text-decoration: none;
}
/*Change Gallery Number to match your site*/
#SMhelp {display:none;}
.gallery_7635315 #SMhelp {display:block;}

[lisap]

Wow! Thanks John, that's fantastic. :) I missed seeing your post last night because my eyes were going cross and had to go to bed!

I managed to change the colours without messing stuff up even.

I noticed that it still does the thing I mentioned in #4. It only seems to happen when the drop down drops at the 'Page 1 of 1' spot when you're actually viewing a gallery. Any drop over the '1 of 8' for example, seems to drop right over top just fine. It appears this only occurs in Internet Explorer as well. When I checked in Firefox it seems to be alright.

Also, with Firefox, the 'Guest Book' entry on the navbar seems to wrap to a second line. Is there anything I can do about that, or is that just the way it will have to look in the Firefox browser?

Thanks very much. (www.pictureyourlifephotography.com (http://www.pictureyourlifephotography.com))

[jfriend]

Wow! Thanks John, that's fantastic. :) I missed it last night because my eyes were going cross and had to go to bed!

I managed to change the colours without messing stuff up even.

I noticed that it still does the thing I mentioned in #4. It only seems to happen when the drop down drops at the 'Page 1 of 1' spot when you're actually viewing a gallery. Any drop over the '1 of 8' for example, seems to drop right over top just fine. It appears this only occurs in Internet Explorer as well. When I checked in Firefox it seems to be alright.

Also, with Firefox, the 'Guest Book' entry on the navbar seems to wrap to a second line. Is there anything I can do about that, or is that just the way it will have to look in the Firefox browser?

Thanks very much. (www.pictureyourlifephotography.com (http://www.pictureyourlifephotography.com)) I am unsure what is causing the overlap with the page numbers in IE. The solution ultimately involves setting z-index:99 on the sub-menu and making sure that it doesn't have any holes in it or any transparent parts. But since I can't really try things out on your site in IE, I'm not sure exactly where it needs to go.

As for the wrapping in Firefox, I am not seeing that so it must be because you have different fonts active. You can fix that by either making the navbar wider or by reducing the spacing between elements. In either case, you probably only need a minor change to fix the wrapping.

Here's where you would change the spacing between items (my recommendation):

.menu li {
float:left;
position:relative;
padding: 0 10px;
}

Here's where you would modify the overall width (if you don't want to reduce the spacing):
.menu ul {
padding:0;
margin:0;
height:30px;
list-style-type:none;
width:900px;
}

[Allen]

... It only seems to happen when the drop down drops at the 'Page 1 of 1' spot when you're actually viewing a gallery. Any drop over the '1 of 8' for example, seems to drop right over top just fine. It appears this only occurs in Internet Explorer as well. When I checked in Firefox it seems to be alright.
...
Add this to CSS and see if it's fixed.

/* IE page nav showing thru dropdown */

#pageNavigation_top {
z-index: 50 !important;
}

[jfriend]

I am unsure what is causing the overlap with the page numbers in IE. The solution ultimately involves setting z-index:99 on the sub-menu and making sure that it doesn't have any holes in it or any transparent parts. But since I can't really try things out on your site in IE, I'm not sure exactly where it needs to go.

As for the wrapping in Firefox, I am not seeing that so it must be because you have different fonts active. You can fix that by either making the navbar wider or by reducing the spacing between elements. In either case, you probably only need a minor change to fix the wrapping.

Here's where you would change the spacing between items (my recommendation):

.menu li {
float:left;
position:relative;
padding: 0 10px;
}

Here's where you would modify the overall width (if you don't want to reduce the spacing):
.menu ul {
padding:0;
margin:0;
height:30px;
list-style-type:none;
width:900px;
}

One issue that may be contributing to this problem is that you appear to be missing at least one </ul> tag at the end of your navbar.

Add the tag in red:

<li><a href="http://www.pictureyourlifephotography.com/gallery/7191025_nmbrY" title="Guest Book">Guest Book<!--[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>

[lisap]

I am unsure what is causing the overlap with the page numbers in IE. The solution ultimately involves setting z-index:99 on the sub-menu and making sure that it doesn't have any holes in it or any transparent parts. But since I can't really try things out on your site in IE, I'm not sure exactly where it needs to go.

As for the wrapping in Firefox, I am not seeing that so it must be because you have different fonts active. You can fix that by either making the navbar wider or by reducing the spacing between elements. In either case, you probably only need a minor change to fix the wrapping.

Here's where you would change the spacing between items (my recommendation):

.menu li {
float:left;
position:relative;
padding: 0 10px;
}

Here's where you would modify the overall width (if you don't want to reduce the spacing):
.menu ul {
padding:0;
margin:0;
height:30px;
list-style-type:none;
width:900px;
}

OK, so I liked the idea of changing the spacing between items best too, so I tried that and it did help. I changed it slowly down and ended up having to change it to 2px before I saw it 'unwrap'. But then the entire navbar shifted to the left and became uncentred under the banner. So I changed it back to 10px and it stayed 'unwrapped' (YAY), but also stayed pushed over to the left. It seems to be to the left in both Firefox and IE now. :scratch

Add this to CSS and see if it's fixed.

/* IE page nav showing thru dropdown */

#pageNavigation_top {
z-index: 50 !important;
}


I tried this as well as trying to add the missing </ul> and neither seemed to fix the drop down from going behind the 'Page 1 of 1' in IE.

I tell ya! You guys must have patience in abundance to sort this stuff out. (thankfully for people like me!!) :)

Is there a spot where I can tell the navbar to be centered under the banner? I tried to say 'center' in one spot, and it did center it, but not in the way I wanted (it lined everything up under each other centered under the navbar..haha), so I decided I'd better quit fooling around before I really broke something!

Thanks.

[Allen]

Wow! Thanks John, that's fantastic. :) I missed it last night because my eyes were going cross and had to go to bed!

I managed to change the colours without messing stuff up even.

I noticed that it still does the thing I mentioned in #4. It only seems to happen when the drop down drops at the 'Page 1 of 1' spot when you're actually viewing a gallery. Any drop over the '1 of 8' for example, seems to drop right over top just fine. It appears this only occurs in Internet Explorer as well. When I checked in Firefox it seems to be alright.

Also, with Firefox, the 'Guest Book' entry on the navbar seems to wrap to a second line. Is there anything I can do about that, or is that just the way it will have to look in the Firefox browser?

Thanks very much. (www.pictureyourlifephotography.com (http://www.pictureyourlifephotography.com))
Change your header nav html to this. Cleans it up and fixes a few errors.

<!-- 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 href="/" title="Home">Home</a></li>

<!-- Next Main Menu Item -->

<li><a href="/portfolio" title="Portfolio">Portfolio
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/7188029_QQWvn" title="Your Self">Your Self</a></li>
<li><a href="/gallery/7169771_fhVcJ" title="Your Family">Your Family</a></li>
<li><a href="/gallery/7181837_3m85v" title="Your Children">Your Children</a></li>
<li><a href="/gallery/7634636_peNWB" title="Your Life">Your Life</a></li>
<li><a href="/gallery/7188035_rkEHe" title="Your Pets">Your Pets</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Menu Item -->

<li><a href="/Services%20and%20Products" title="Services and Products">Services and Products
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/7169651_7VBqM" title="Portraits">Portraits</a></li>
<li><a href="/gallery/7594913_VWsCC" title="Photo Parties">Photo Parties</a></li>
<li><a href="/gallery/7594916_6wiVw" title="Photo Editing">Photo Editing</a></li>
<li><a href="/gallery/7595794_Gf7Lq" title="Photo Scanning">Photo Scanning</a></li>
<li><a href="/gallery/7597967_AnnsH" title="Customized Products">Customized Products</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Menu Item -->

<li><a href="/For%20Sale" title="For Sale">For Sale
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/For%20Sale/727459" title="Nature &amp; Wildlife">Nature &amp; Wildlife</a></li>
<li><a href="/For%20Sale%20/727458" title="Miscellaneous">Miscellaneous</a></li>
<li><a href="/For%20Sale%20/727460" title="Procyon Wildlife">Procyon Wildlife</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Menu Item -->

<li><a href="/General%20Information" title="General Information">General Information
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/7169654_SyPhs" title="The Photographer">The Photographer</a></li>
<li><a href="/gallery/7486903_MRuLa" title="Calendar">Calendar</a></li>
<li><a href="/gallery/7634713_sPgfZ" title="Contact Us">Contact Us</a></li>
<li><a href="/gallery/7635315_9HZiN" title="Product Catalog">Product Catalog</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<!-- Next Main Menu Item -->

<li><a href="/my%20clients" title="Client Area">Client Area</a></li>

<!-- Next Main Menu Item -->

<li><a href="http://www.pictureyourlifephotography.blogspot.com" title="Blog">Blog</a></li>

<!-- Next Main Menu Item -->

<li><a href="/gallery/7191025_nmbrY" title="Guest Book">Guest Book</a></li>

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

</div>
</div>
<!-- End Navbar Code -->

[Allen]

...
Remove the red gallery key from this, the key is not used in CSS.

.gallery_7486903_MRuULa .pageNav h3{
display: none;
}


Change this line, wrong comment type tags in CSS. Use /* comment */

//'removed this line because I think it was causing the portfolio page to
not show up for visitors #galleriesBox {display:none;

to this

/* 'removed this line because I think it was causing the portfolio page to
not show up for visitors #galleriesBox {display:none;} */


I don't see the #pageNavigation_top in your CSS. Add it to the top and if
works there, there is an error in your CSS. Fixing above might help.

[lisap]

Change your header nav html to this. Cleans it up and fixes a few errors.


Thanks Allen. I'm pretty sure that any errors I have that are lingering are going to bite me when I try and copy the nav bar information over to my blog later, so I really appreciate it. (Blogger seems to be more picky than smugmug when it comes to that sort of thing)

[Allen]

Thanks Allen. I'm pretty sure that any errors I have that are lingering are going to bite me when I try and copy the nav bar information over to my blog later, so I really appreciate it. (Blogger seems to be more picky than smugmug when it comes to that sort of thing)
btw, your navbar is totally b0rked in IE6. Looked but can't figure how to fix it.
Those long text nav buttons really mess up getting things formatted.

[lisap]

Remove the red gallery key from this, the key is not used in CSS.

.gallery_7486903_MRuULa .pageNav h3{
display: none;
}


Change this line, wrong comment type tags in CSS. Use /* comment */

//'removed this line because I think it was causing the portfolio page to
not show up for visitors #galleriesBox {display:none;

to this

/* 'removed this line because I think it was causing the portfolio page to
not show up for visitors #galleriesBox {display:none;} */


I don't see the #pageNavigation_top in your CSS. Add it to the top and if
works there, there is an error in your CSS. Fixing above might help.

I did these things, thanks.

For the #pageNavigation_top thing, I added it to the very top of my CSS and then my banner disappeared. So I moved it to below the banner code, just before the navbar code. Was that what you meant?

btw, your navbar is totally b0rked in IE6. Looked but can't figure how to fix it.
Those long text nav buttons really mess up getting things formatted.

:huh Can I totally break down and cry now?? haha I knew my wordiness would get me into trouble one day. *sigh*

The one thing that really puzzles me about that whole drop menu dropping being the 'page 1 of 1' thing in IE, is that it doesn't drop behind the '1 of 10' that is over top of the larger photo on the right when viewing a gallery. That makes no sense to me :(. And it's not just dropping down behind the words 'page 1 of 1', it's also dropping down behind the thumbnails as well. :scratch

[Allen]

...
Add first and change/add bold lines in 2nd. The _width is for IE6 and puts nav on rather long line but works.
Had to add a z-index to the nav so the one on the pageNavigation_top would work

#pageNavigation_top {
z-index: 50 !important;
}

/* style the outer div to give it width */
.menu {
z-index: 99;
margin: 0 auto;
width:900px;
_width:1280px;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

remove the width from this

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
height:30px;
list-style-type:none;
}

[lisap]

OMG! It's not dropping down behind the words and thumbnails anymore! woohoo!! :)

I think the only thing that seems a bit wonky still is the navbar not lining up centered under the banner in both IE and Firefox.

I'm not sure where the centering information is in my code. Is it something that is easily changed?

[Allen]

OMG! It's not dropping down behind the words and thumbnails anymore! woohoo!! :)

I think the only thing that seems a bit wonky still is the navbar not lining up centered under the banner in both IE and Firefox.

I'm not sure where the centering information is in my code. Is it something that is easily changed? All the centering is done with the widths in this.

/* style the outer div to give it width */
.menu {
z-index: 99;
margin: 0 auto;
width:900px; /* Firefox and most browsers */
_width:1280px; /* might be needed for IE 6 */
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

That width defines the box (menu div) the buttons are in and the box is
centered. Only problem is the buttons are left justified in the box. So
decreasing the box width moves to buttions towards center. The trick is to
minimize the width without causing them to wrap to two lines. Different
browsers might take a different width.


<-- width |ctr| -->
.................................................. ......................
. button button button button button .
.................................................. ......................

.................................................. .........
. button button button button button .
.................................................. .........

........................................
. button button button button button .
........................................

...................................
. button button button button .
...................................
button << button wrapped to next line, didn't fit in width

[lisap]

All the centering is done with the widths in this....


Thanks so much Allen for the explanation. I'll play around with it a bit and see if I can get it to even itself out. If not, I'll be back! :)

[lisap]

This whole I.E./Firefox thing must drive web developers CRAZY! Never mind the various versions of each there are.

So I got it looking half decent in Firefox, but can't get it centered (or at least close to center) in I.E. :cry I even renamed one of my longer labels to see if that would help. I guess it did and it didn't, depending on where you look.

From the fiddling around I've been doing, it doesn't appear that it's possible to get them even in both browsers. Is that true? That doesn't seem possible. There must be a way!

On a positive note, I didn't seem to have any troubles when I copied the code over to my blog, so that was a relief. :)

Maybe fresh eyes in the morning will help. :dunno

[Allen]

This whole I.E./Firefox thing must drive web developers CRAZY! Never mind the various versions of each there are.

So I got it looking half decent in Firefox, but can't get it centered (or at least close to center) in I.E. :cry I even renamed one of my longer labels to see if that would help. I guess it did and it didn't, depending on where you look.

From the fiddling around I've been doing, it doesn't appear that it's possible to get them even in both browsers. Is that true? That doesn't seem possible. There must be a way!

On a positive note, I didn't seem to have any troubles when I copied the code over to my blog, so that was a relief. :)

Maybe fresh eyes in the morning will help. :dunno
I just changed it to 680px and it centers in Firefox. The 1280px was for IE6 that worked other day.

/* style the outer div to give it width */
.menu {
z-index: 99;
margin: 0 auto;
width:680px;
_width:1280px; /* IE 6 */
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

Add the _padding for IE in this. IE6 is still very wide but this narrows it some.

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:9pt;
text-decoration:none;
color:#fff;
height:30px; /*How tall your cells are*/
border-width:0px 0px 0 0;
background:#000000;
padding: 0 10px;
_padding: 0; /* IE 6 */
line-height:29px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
}

You might also think of shortening "General Information" to "General Info".

[lisap]

I just changed it to 680px and it centers in Firefox. The 1280px was for IE6 that worked other day......

I made all of the suggested changes. Thanks so much. :)

It must be the laptop that I'm using to view with Firefox, as at the 680px it wraps that 'Guest Book' on it. But I'm going with it because I trust what you are telling me more than what I'm seeing!! :D

I remembered that my 'day job' laptop still has IE 6 on it so I fired that up this morning and I see what you mean by it being spread out. It's readable though and that's the main thing :)

The scarey thing is that I think I'm starting to understand how some of this stuff works! Although, it's probably just enough to be dangerous and totally mess up my site, so I'm sure I'll be back with more questions in the future.

Thanks again both to you and John for your assistance. I hope you realize how much it's appreciated!! :lust

[Allen]

I made all of the suggested changes. Thanks so much. :)

It must be the laptop that I'm using to view with Firefox, as at the 680px it wraps that 'Guest Book' on it. But I'm going with it because I trust what you are telling me more than what I'm seeing!! :D

I remembered that my 'day job' laptop still has IE 6 on it so I fired that up this morning and I see what you mean by it being spread out. It's readable though and that's the main thing :)

The scarey thing is that I think I'm starting to understand how some of this stuff works! Although, it's probably just enough to be dangerous and totally mess up my site, so I'm sure I'll be back with more questions in the future.

Thanks again both to you and John for your assistance. I hope you realize how much it's appreciated!! :lust
Now that you shortened another button I can now go down to 600 and it centers in Firefox.:D

width:600px;

[lisap]

Now that you shortened another button I can now go down to 600 and it centers in Firefox.:D

width:600px;

LOL REALLY?!?! :huh This just makes my head spin!! HAHA

[Allen]

I made all of the suggested changes. Thanks so much. :)

It must be the laptop that I'm using to view with Firefox, as at the 680px it wraps that 'Guest Book' on it. But I'm going with it because I trust what you are telling me more than what I'm seeing!! :D

I remembered that my 'day job' laptop still has IE 6 on it so I fired that up this morning and I see what you mean by it being spread out. It's readable though and that's the main thing :)

The scarey thing is that I think I'm starting to understand how some of this stuff works! Although, it's probably just enough to be dangerous and totally mess up my site, so I'm sure I'll be back with more questions in the future.

Thanks again both to you and John for your assistance. I hope you realize how much it's appreciated!! :lust
This is the latest for both Firefox and IE6. IE is now under control with the
shorter buttons and the widths below.

/* style the outer div to give it width */
.menu {
z-index: 99;
margin: 0 auto;
width:600px;
_width:760px;
padding:10px 0px 15px 0px;
position:relative; /*Make the container moveable*/
font-size:0.85em;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:125px;
w\idth:95px;
}

[jfriend]

Now that you shortened another button I can now go down to 600 and it centers in Firefox.:D

width:600px; Allen, do you know why the width of this navbar has to be hardcoded? Why can't it center itself no matter what width it is with "margin: 0 auto;"? Do you know what prevents that from working in this type of case?

I've always wondered why there isn't a better way to handle these kinds of things. I ask because when you let the individual cell widths vary as they are in this navbar, every one will be different and they will vary depending upon the font the browser picks - thus there's no way to pick a perfect hardcoded width and thus there's no way to really get it perfectly centered. It's width just isn't known ahead of time.

It would be so much better if the browser could just accumulate the actual width and then center that. Is there not some way to tell the browser to do that?

[Allen]

Allen, do you know why the width of this navbar has to be hardcoded? Why can't it center itself no matter what width it is with "margin: 0 auto;"? Do you know what prevents that from working in this type of case?

I've always wondered why there isn't a better way to handle these kinds of things. I ask because when you let the individual cell widths vary as they are in this navbar, every one will be different and they will vary depending upon the font the browser picks - thus there's no way to pick a perfect hardcoded width and thus there's no way to really get it perfectly centered. It's width just isn't known ahead of time.

It would be so much better if the browser could just accumulate the actual width and then center that. Is there not some way to tell the browser to do that?
That would be great if a way was found to do that.
IE6 doesn't understand the auto in the width and Firefox does making
it difficult to code for IE. She's using a CSS I'm not that familiar with so winging it.

You'd think that without button widths they could just auto size and center
in the main div. And use button R/L padding to spread. Most definitely the
CSS needs to be optimized to work in different browsers.

[lisap]

It would be so much better if the browser could just accumulate the actual width and then center that. Is there not some way to tell the browser to do that?

Oh, I SOOOOO agree with this!!!!! :D

I think it doesn't work that way because 'they' (the people who make it so we have to use CSS & HTML, etc.) do it on purpose so we're so busy hard coding and making changes, etc. etc. we don't notice them taking over the world. :wink

Plus if it worked that way, people like me who have no clue what we're doing, wouldn't have to ask people like you guys for help and then you'd have sooooooooo much free time on your hands you wouldn't know what to do with yourself!! :D

Oh..and PS: My 'Guest Book' still wraps in Firefox for me!! :rofl

[Allen]

Oh, I SOOOOO agree with this!!!!! :D

I think it doesn't work that way because 'they' (the people who make it so we have to use CSS & HTML, etc.) do it on purpose so we're so busy hard coding and making changes, etc. etc. we don't notice them taking over the world. :wink

Plus if it worked that way, people like me who have no clue what we're doing, wouldn't have to ask people like you guys for help and then you'd have sooooooooo much free time on your hands you wouldn't know what to do with yourself!! :D
btw, it looks great in both Firefox and IE6 now.:thumb