header problem

[spencephotographics]

hey all!

I seem to be having a problem with my header on smugmug.

my gallery is http://gallery.spencephotographics.com and the gallery is messed up. the code is exactly the same as on my home site, http://www.spencephotographics.com, but seems to be messed up on the smugmug servers.

here is the code as well that i input into the header portion of the customization in the control panel.

<table align="center" width="760" border="0" cellspacing="0" cellpadding="0" background="http://spencephotographics.com/img/nav_05.jpg">
<tr>
<td><a href="http://spencephotographics.com/"><img src="http://spencephotographics.com/img/nav_03.jpg" width="299" height="115" border="0"></td>
<td></td>
<td align="right">

<table cellpadding="0" cellspacing="0" border="0">
<tr><td><img src="http://spencephotographics.com/img/nav_06.jpg"></td></tr>
<tr><td><a href="http://spencephotographics.com/about.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','http://spencephotographics.com/img/navon_08.jpg',1)"><img src="http://spencephotographics.com/img/nav_08.jpg" name="about" border="0"></a></td></tr>
<tr><td><a href="http://spencephotographics.com/portfolio.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('portfolio','','http://spencephotographics.com/img/navon_09.jpg',1)"><img src="http://spencephotographics.com/img/nav_09.jpg" name="portfolio" border="0"></a></td></tr>
<tr><td><a href="http://spencephotographics.com/services.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('services','','http://spencephotographics.com/img/navon_10.jpg',1)"><img src="http://spencephotographics.com/img/nav_10.jpg" name="services" border="0"></a></td></tr>
<tr><td><a href="http://spencephotographics.com/contact.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','http://spencephotographics.com/img/navon_11.jpg',1)"><img src="http://spencephotographics.com/img/nav_11.jpg" name="contact" border="0"></a></td></tr>
<tr><td><a href="http://spencephotographics.com/index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','http://spencephotographics.com/img/navon_12.jpg',1)"><img src="http://spencephotographics.com/img/nav_12.jpg" name="home" border="0"></a></td></tr>
<tr><td><img src="http://spencephotographics.com/img/nav_13.jpg"></td></tr>
</table>

</td>
</tr>
</table>

[oxy8384]

...seems smugmug doesn't like tables, particularly in headers. And unless you copy over all the javascript Macromedia created for those mouse events, it won't work, even if it displays correctly. You're in for an uphill slog to clean it up, unless you can convert it to CSS. I've worked with a couple of other 'victims', helping them convert their table layouts to CSS. Let me know how you'd like to proceed. I'm checking out tonight, but will be back tomorrow morning, Pacific time.

G'night.

Bill

[spencephotographics]

...seems smugmug doesn't like tables, particularly in headers. And unless you copy over all the javascript Macromedia created for those mouse events, it won't work, even if it displays correctly. You're in for an uphill slog to clean it up, unless you can convert it to CSS. I've worked with a couple of other 'victims', helping them convert their table layouts to CSS. Let me know how you'd like to proceed. I'm checking out tonight, but will be back tomorrow morning, Pacific time.

G'night.

Bill

ok, but it worked three months ago when I first put it all on my smugmug page and my footer still works.

here is that code:

<table width="760" border="0" cellspacing="0" cellpadding="0" background="img/nav_21.jpg">
<tr>
<td align="left"><img src="img/nav_20.jpg"></td>
<td class="footer" valign=center><b>Quick Navigation</b><br>
<a href="policy.php" class="footer"> Privacy Policy </a> |
<a href="imageinfo.php" class="footer"> Ordering Info </a> |
<a href="index.php" class="footer">Homepage </a> |
<a href="about.php" class="footer"> About Us </a> |
<a href="portfolio.php?img=1" class="footer"> Portfolio </a> |
<a href="services.php" class="footer"> Services </a> |
<a href="contact.php" class="footer"> Contact Us </a> |
<a href="http://gallery.spencephotographics.com" class="footer"> Galleries</a>
</td>
<td align="right"><img src="img/nav_24.jpg"></td>
</tr>
</table>

got any suggestions?

[oxy8384]

I have seen some (sometimes heated) discussions, here, about how pages get messed up when Smugmug makes upgrades/updates to their system. You may have fallen victim to that.

Regarding your header vs. your footer: if I remember correctly, the problems you're having are related to the fact that some of the images in your header are within anchor (i.e., <a></a>) tags. That seems to screw up table alignments. In your footer, all your links are just text, not images.

You can try removing all the <a></a> tags from your header (temporarily) to see if you can get it all to line up, and then work on adding the links back in, one at a time to see how they affect your layout...?

The only other thing I can think of is to recreate your header without tables (using pure CSS). When I get some time, I can help with that.

Bill

[oxy8384]

teach a man to fish (and possibly have him starve to death) or give him a fish

Here's a CSS version of your header. I have attached an htm file and css file. Place tehe contents of the htm file into the header section where your header used to be and add the content of the css file to your CSS section.

Now that you're no longer starving, feel free to ask questions and I can explain how it was done...

Well, I can only attach one file at a time. See my next post for part II...

Bill

[oxy8384]

Here's the css...

[spencephotographics]

THANKS SO MUCH!!

How is it done? It looks like you used <div></div> code, but what is that? Sorry, kind of a novice with this coding thing.

Just one other thing, if you go to my page, http://gallery.spencephotographics.com , you see a small little bump in the header near the top right. Any way to fix that? Is it a matter of the spacing?

Again, thanks so much.

-Dave

[Allen]

THANKS SO MUCH!!

How is it done? It looks like you used <div></div> code, but what is that? Sorry, kind of a novice with this coding thing.

Just one other thing, if you go to my page, http://gallery.spencephotographics.com , you see a small little bump in the header near the top right. Any way to fix that? Is it a matter of the spacing?

Again, thanks so much.

-Dave Change the top from -1 to 0 and it lines up in Firefox. And the IE top
is the same now so you could remove the -top:0;.

#spence_hdr_right {
position: relative;
top: 0;
-top: 0;
right: -2px;
float:left;
text-align: right;
width: 198px;
}

[spencephotographics]

Change the top from -1 to 0 and it lines up in Firefox. And the IE top
is the same now so you could remove the -top:0;.

#spence_hdr_right {
position: relative;
top: 0;
-top: 0;
right: -2px;
float:left;
text-align: right;
width: 198px;
}

Tried that, but now there is a bump on the bottom. Seems to never end, the tweaking huh?

How about that fix? Anybody?

-Dave

[Allen]

Tried that, but now there is a bump on the bottom. Seems to never end, the tweaking huh?

How about that fix? Anybody?

-Dave
What browser and OS are you using?

Need to move 1/2px :D Think your graphic is 1/2px too tall.

[Allen]

Tried that, but now there is a bump on the bottom. Seems to never end, the tweaking huh?

How about that fix? Anybody?

-Dave
See if this pulls up the bottom bump. Check in all browsers.

#hdr_nav_bottom {
top: -1px;
-top: 0;
}

[spencephotographics]

See if this pulls up the bottom bump. Check in all browsers.

#hdr_nav_bottom {
top: -1px;
-top: 0;
}

Al-


I am using OS X and Firefox and Safari to do the pages. I did your last fix and it seems to work. Thanks.

What does that last code do? (Just so I can learn what I am writing)

-Dave

[Allen]

Al-


I am using OS X and Firefox and Safari to do the pages. I did your last fix and it seems to work. Thanks.

What does that last code do? (Just so I can learn what I am writing)

-Dave

#hdr_nav_bottom is the image at the bottom.

If different browses need different numbers.

top: -1px; << most browsers other then IE6
-top: 0; << the - makes it IE6 exclusive.
~top: 0; << the ~ makes it IE7 exclusive.

[oxy8384]

Dave,
I am working on a tutorial that I hope will help explain everything I did so you can use it again (the 'teaching you how to fish' part).
For now, I'm glad you're moving forward.


Allen,
Thanks so much for the backup! These forums are THE BEST!

Dave and Allen,
Yeah, those 'bumps' are weird. They didn't appear until after I finalized the design. Which is why I added the top and -top CSS. Now, it seems like my 'fixes' were unneeded. Which is good, but confusing. Did I say I hate IE? Oh yeah, about a million times. Sorry.:rolleyes
The 'best' fix, IMHO, would be to recreate the pieces of the nav menu and make the top and bottom pieces exactly 15 pixels high (30 total) and each link segment (About, Portfolio, Services, Contact, Home - 5) exactly 17 pixels high. (2 x 15) + (5 x 17) = 115 pixels, which is exacly the height of your logo and background images (you could also do (2x10 + 5x19). I had to fudge a little to get things to line up because their heights differed from 12 to 19. Anyway, if you want to go that way, let us know and we can tweak the CSS to make it all purty once you have the new image files ready.

Anyway, I hope to have my tutorial done tomorrow or Monday. Until then, I'll keep monitoring this thread to make sure Dave stays on track...

Bill

[oxy8384]

I just realized where those bumps came from! My 'clearer' div (to turn off the floating attribute) is 1px by 1px. I was moving it around and must have put it inside the header and then maybe moved it back out? Anyway, if you move it outside the header div, all the 'top' and '-top' CSS junk can probably be deleted.
Or you could just add display:none; to the CSS....

What a knucklehead I am! If it ain't broke, don't fix it!!!!:rolleyes:thumb

Bill

[oxy8384]

Well, that wasn't quite it. Removed the clearer element and the bumps persist.:scratch:dunno

Anyway, your page is fixed, so I'm shutting up, now...:rolleyes

Bill

[spencephotographics]

Well, that wasn't quite it. Removed the clearer element and the bumps persist.:scratch:dunno

Anyway, your page is fixed, so I'm shutting up, now...:rolleyes

Bill

Bill-

Thanks for all the tweaking. I agree about these forums, they offer so much help and knowledge to the average user.

As for my page, since it is working, I think I am going to leave it be at the moment.

Again thanks for the help. Greatly appreciated.

-Dave