Journal Style customizations inconsistent in various browsers

[jlauren]

Hi there,

I just realized that the journal page I've customized with Safari on a Mac is causing me some problems when I access the page with IE or Firefox on a PC.

In Safari, the page allows me to click on either the gallery name or the image to take me to the corresponding page, but in IE & Firefox, clicking on the gallery name "Weddings" or "Portraits" leads to nowhere! I wind up with a notice that tells me there's nothing there. Just wondering what I need to add to my customization in order to remedy that problem.

Also, I'd like to make sure the font is Optima (for Safari) and Trebuchet MS for IE & Firefox users, but have tried without success to make this happen.

Hopefully it's a quick fix and then it's on to other issues...sigh.... :-)

Here's the page I'm struggling with:

http://www.jaimelaurenphotography.com/Other/New-Gallery/10981473_PJqtX

Thank you in advance!

Jlauren

[jfriend]

First, remove the h at the end of this line in your bottom javascript as it is causing a script error:

YE.onContentReady("breadCrumbTrail", AdjustBreadcrumb);h

Then, in the HTML for the page you linked, you have a different href for the image (/Weddings) vs. the text (Weddings). If you want them to go to the Weddings category, then they should both be /Weddings. Same issue for /Portraits.

If you remove the <font face=xxx"> and corresponding </font> tags from that page, you can configure the font more easily in your site-wide-customization CSS like this:

.gallery_10981473 #albumDescription {font-family: Optima, Trebuchet MS;}

That will pick Optima if it's available, otherwise Trebuchet MS.

[jlauren]

First, remove the h at the end of this line in your bottom javascript as it is causing a script error:

YE.onContentReady("breadCrumbTrail", AdjustBreadcrumb);h

Then, in the HTML for the page you linked, you have a different href for the image (/Weddings) vs. the text (Weddings). If you want them to go to the Weddings category, then they should both be /Weddings. Same issue for /Portraits.

If you remove the <font face=xxx"> and corresponding </font> tags from that page, you can configure the font more easily in your site-wide-customization CSS like this:

.gallery_10981473 #albumDescription {font-family: Optima, Trebuchet MS;}

That will pick Optima if it's available, otherwise Trebuchet MS.


Hi Jfriend,

Ta-Dah! Thank you, that just about worked! For some reason I can't see Optima though when using Safari (I could before, and most of my site features Optima). The font is consistent on this page using Firefox and IE though, and I can also access the necessary pages through the gallery titles. Thank you, I sometimes find it hard to spot those small details that need to be tweaked.

Two more quick things and then I'm done for the day! When I open that same page on Firefox and IE, the word 'Portrait' is underlined and I don't know how to get rid of that. And also in IE, the borders that surround the images are purple rather than the teal I've chosen (#006699). If I could tweak these things so that the components were consistent across all three browsers that'd be great!

Thank you!!!

Jlauren

http://www.jaimelaurenphotography.com/Other/New-Gallery/10981473_PJqtX

[jfriend]

Hi Jfriend,

Ta-Dah! Thank you, that just about worked! For some reason I can't see Optima though when using Safari (I could before, and most of my site features Optima). The font is consistent on this page using Firefox and IE though, and I can also access the necessary pages through the gallery titles. Thank you, I sometimes find it hard to spot those small details that need to be tweaked.

Two more quick things and then I'm done for the day! When I open that same page on Firefox and IE, the word 'Portrait' is underlined and I don't know how to get rid of that. And also in IE, the borders that surround the images are purple rather than the teal I've chosen (#006699). If I could tweak these things so that the components were consistent across all three browsers that'd be great!

Thank you!!!

Jlauren

http://www.jaimelaurenphotography.com/Other/New-Gallery/10981473_PJqtX Your HTML is a bit messed up now. Please change the HTML to this:

<table align="center" width="600">
<tbody>
<tr>
<td>
<a href="/Weddings">
<img src="http://jlauren.smugmug.com/photos/490081063_cCBGL-S-1.jpg" border="2" height="250" width="365">
</a>
</td>

<td>
<a href="/Portraits">
<img src="http://jlauren.smugmug.com/photos/490089068_hMkZW-S.jpg" border="2" height="250" width="365">
</a>
</td>
</tr>

<tr align="center" height="50" valign="top">
<td><a href="/Weddings">Weddings</a></td>
<td><a href="/Portraits">Portraits</a></td>
</tr>
</tbody>
</table>
I've removed ALL the <font> tags. Now you can replace the previous line of CSS with this which should take care of all browsers:

.gallery_10981473 #albumDescription {font-family: Optima, Trebuchet MS; font-size: 18px; color: #006699;}
.gallery_10981473 #albumDescription a {text-decoration: none;}
.gallery_10981473 #albumDescription img {border-color: #006699;}

[jlauren]

Your HTML is a bit messed up now. Please change the HTML to this:

<table align="center" width="600">
<tbody>
<tr>
<td>
<a href="/Weddings">
<img src="http://jlauren.smugmug.com/photos/490081063_cCBGL-S-1.jpg" border="2" height="250" width="365">
</a>
</td>

<td>
<a href="/Portraits">
<img src="http://jlauren.smugmug.com/photos/490089068_hMkZW-S.jpg" border="2" height="250" width="365">
</a>
</td>
</tr>

<tr align="center" height="50" valign="top">
<td><a href="/Weddings">Weddings</a></td>
<td><a href="/Portraits">Portraits</a></td>
</tr>
</tbody>
</table>
I've removed ALL the <font> tags. Now you can replace the previous line of CSS with this which should take care of all browsers:

.gallery_10981473 #albumDescription {font-family: Optima, Trebuchet MS; font-size: 18px; color: #006699;}
.gallery_10981473 #albumDescription a {text-decoration: none;}
.gallery_10981473 #albumDescription img {border-color: #006699;}


Thanks a million! The only hiccup left is that the font won't show up as Optima within Safari. Not sure why, but I know you're helping lots of people and don't want to monopolize your time! I appreciate all the help getting these glitches straightened out!

Have a fantastic night!

JLauren

[jfriend]

Thanks a million! The only hiccup left is that the font won't show up as Optima within Safari. Not sure why, but I know you're helping lots of people and don't want to monopolize your time! I appreciate all the help getting these glitches straightened out!

Have a fantastic night!

JLauren

Change the CSS to this I previously gave you to this:


.gallery_10981473 #albumDescription,
.gallery_10981473 #albumDescription a {font-family: Optima, Trebuchet MS !important; font-size: 18px; color: #006699;}
.gallery_10981473 #albumDescription a {text-decoration: none;}
.gallery_10981473 #albumDescription img {border-color: #006699;}

[jlauren]

Change the CSS to this I previously gave you to this:


.gallery_10981473 #albumDescription,
.gallery_10981473 #albumDescription a {font-family: Optima, Trebuchet MS !important; font-size: 18px; color: #006699;}
.gallery_10981473 #albumDescription a {text-decoration: none;}
.gallery_10981473 #albumDescription img {border-color: #006699;}


Worked like a charm! Thanks again!

[SCRed]

Hello. Was trying to find a existing thread to answer my question but this was the closest I found.

I was trying to change my fonts for my Bio, Guest Book and possibly my Contact page (not as important as the other two) to the Trebuchet MS and I can't seem to find the right recipe.

Thank you in advance!

http://ciccarels.smugmug.com/

[jfriend]

Hello. Was trying to find a existing thread to answer my question but this was the closest I found.

I was trying to change my fonts for my Bio, Guest Book and possibly my Contact page (not as important as the other two) to the Trebuchet MS and I can't seem to find the right recipe.

Thank you in advance!

http://ciccarels.smugmug.com/ For your bio page, add this CSS:

/* set font in bio page */
.gallery_11935564 .caption, .gallery_11935564 .caption p, .gallery_11935564 .caption a {font-family: Optima, Trebuchet MS !important;}

/* let text start even with top of photo and make text so it doesn't wrap */
/* under the photo (margin has to be a little more than photo width) */
.gallery_11935564 #journal .caption {padding-top: 0; margin-left: 420px;}


Note that in the CSS, you use only the gallery number 11935564, not the gallery number and key 11935564_hrdUr.

You should be able to copy this CSS and use different gallery numbers for your other journal pages.

[SCRed]

Thank you, thank you, thank you!!!