Images in header causing Checkout Error

[Jaz]

I have placed some images in my header, but they give me security warnings then I go to checkout.

Here is the code I added to my standard header:

Code: Select all

<table width="100%" border="0" cellpadding="0" cellspacing="0" background="http://trickconcepts.com/App_Themes/TrickConcepts/images/tabs.gif">
  <tr>
    
    <td>
    
    
    <img src="http://www.trickconcepts.com/App_Themes/TrickConcepts/images/storetab.gif" width="67" height="41" border="0" />
    </td>
    
    <td><a href="http://firebytrickconcepts.com" class="tab"><img src="http://www.trickconcepts.com/App_Themes/TrickConcepts/images/info_inactive.gif" width="67" height="41" border="0" /></a></td>


    <td width="5%"><a href="http://firebytrickconcepts.com/forum" class="tab"><img src="http://www.trickconcepts.com/App_Themes/TrickConcepts/images/forum_inactive.gif" width="67" height="41" border="0" /></a></td>
    <td width="8%"><a href="http://firebytrickconcepts.com/gallery2" class="tab"><img src="http://www.trickconcepts.com/App_Themes/TrickConcepts/images/photo_inactive.gif" width="114" height="41" border="0" /></a></td>
    <td width="87%">&nbsp;</td>
  </tr>
</table>

It works fine on all pages except for the secure pages. When I am logged in it uses a different header without this code and is fine, but when I am not logged in I get an error. Also the error is on with IE, not Firefox.

[jmestep]

Take out the first part of your link and use ~/App_Themes/TrickConcepts/images/tabs.gif">
It will pick up the domain name and switch from http to https automatically.

[Jaz]

Originally I had the images pulling from a remote server, but when I changed them to the store server to try to solve the problem, I forgot to make them relative.

I am having one problem though. For some reason when I make the background image URL relative, it does not show up:

Code: Select all

<table width="100%" border="0" cellpadding="0" cellspacing="0" background="~/App_Themes/TrickConcepts/images/tabs.gif">  <tr>
    
    <td>
    
    
    <img src="~/App_Themes/TrickConcepts/images/storetab.gif" width="67" height="41" border="0" />
    </td>
    
    <td><a href="http://firebytrickconcepts.com" class="tab"><img src="~/App_Themes/TrickConcepts/images/info_inactive.gif" width="67" height="41" border="0" /></a></td>


    <td width="5%"><a href="http://firebytrickconcepts.com/forum" class="tab"><img src="~/App_Themes/TrickConcepts/images/forum_inactive.gif" width="67" height="41" border="0" /></a></td>
    <td width="8%"><a href="http://firebytrickconcepts.com/gallery2" class="tab"><img src="~/App_Themes/TrickConcepts/images/photo_inactive.gif" width="114" height="41" border="0" /></a></td>
    <td width="87%">&nbsp;</td>
  </tr>
</table>

[AbleMods]

="~/App_Themes/TrickConcepts/images/tabs.gif

Traditional HTML tags won't always work with using this "~/" style of relative pathing. The "~/" is mostly an ASP.Net relative path.

Since you're using straight HTML tags, prefix your paths with "/" and specify the full path i.e. "/app_themes/trickconcepts/images/tabs.gif". This will ensure the relative path is always correct when using standard HTML tags.

[Jaz]

I am not totally sure I understand why taking out "~" solves it, but hey it worked. Thanks Joe and Judy!

[Mike718NY]

This image path thing has been driving me nuts for a while now.

I have the same problem in the sidebar: ConLib\Custom\SimpleCategoryList.ascx

<img src="~/images/Seal3.gif" won't work, have to use : <img src="images/Seal3.gif"


In the Standard Header.htm, either one of these will work while in the Store front:
<img src="~/images/tab_help.gif"
<img src="images/tab_help.gif"

but the src="images/ one won't display for the Checking Out pages (Checkout/EditBillAddress.aspx, etc.).


For this page : ConLib\Custom\CategoryGridPage2.ascx

src="~/images/spacer.gif" doesn't work in FireFox, have to use src="images/spacer.gif"

[AbleMods]

I am not totally sure I understand why taking out "~" solves it, but hey it worked.

Imaging "pathing" can be done two ways, depending on the HTML tag being used.

Using the "~/" in an ASP.Net is valid and necessary. It tells the server-side code to substitute the current sites root URL for the "~/". That way, you can write code that isn't dependent on specific store URLs or specific domain names.

In tranditional HTML, the "~" tilde is not used. It's ignored. Pathing is handled via two different methods in the HTML tags.

In HTML, image paths can be "absolute" or "relative" to the current path. In other words, you can reference the image by specifying the complete (absolute) path to the URL or by specifying a shorter (and sometimes more confusing) path, relative, to the current path.

Add into the mix the difference between server-side and client-side controls and things get confusing.

An easy shortcut to remember is simple: If the HTML tag DOESN'T start with <asp:...>, don't use the "~" tilde.

Secondly, keep in mind how HTML pathing works:

1. Absolute path would be http://www.trickconcepts.com/images/category.gif. This path only works for your website and only in HTTP.

2. Relative path could be done in two ways. Starting the path with a "/" slash assumes from the root folder of the site. That's generally the best way to specific all your image paths.

So you could use "/images/category.gif" and never have to worry about either the HTTP/HTTPS context or a hard-coded domain name. Ideal.

You could also use full relative pathing which makes URLs dependent on the path of the page you're currently browsing. Say you are browsing /Members/MyAccount.aspx. The current path is "/Members/" . If you added an image "/images/category.gif", it will work because you started it with a "/" slash - that told the browser to look for the images folder starting from the root of the site.

But let's say the /Members/MyAccount.aspx page didn't use the slash on the image path. You just add an image with a path of "images/category.gif" but it refuses to work. The reason is without the slash, the browser will assume "based on the current path". So in that example, you would need to have a sub-folder underneath Members called images. The actual full path would then become /Members/images/category.gif.

Notice in that 2nd example, nowhere did I use the "~" tilde. Standard HTML is just going to ignore it, but it still seems to work because you used "~/". Without the tilde, the "/" slash was still there so the path is going to be relative from the root of the site.

The whole thing gets worse - you've probably seen paths 'like "../" or "../../../" or some such nonsense. The "../" means "Go back up 1 level in the directory tree and start looking from there". So in our /Members/MyAccount.aspx page, we could have actually used an image path of "../images/category.gif" and it would have still worked. But, you'd be hosed if you ever moved the MyAccount page to a different folder since the image path was relative based on the assumption of being in the /Members/ folder.

Clear as mud? Welcome to HTML