Background image in HTML table does not show in most browsers - html

The page at www.patbanks.com is supposed to have a pretty image for the background. It shows on Safari, but not on Chrome or Firefox. (Didn't try IE.)
This is a Google Sites so I am not allowed to use CSS; please forgive the awful table-based code. Also unable to put the background in the BODY tag. So the image is in a TABLE tag. This is the only known way to get a background image.
(Answers that I researched were either about subtly different situations where CSS can be used properly, or about malformed URLs. I already verified that the image itself is accessible from that bizarre upload URL.) I am probably doing something offensive to the TABLE tag, or the Google-injected wrapper is doing something to thwart me. Except, the page works just fine when viewed by of all things, Safari...)

I solved the problem by changing the location of the image.
The real URL for the site is https://sites.google.com/a/{user/internal site name}/home. The published ("mapped") URL is just http://www.patbanks.com.
Originally, I uploaded it in the Attachments menu, and used the corresponding image URL. That points to some upload server (the terminal subdomain in the URL is like my Google Sites site name). That URL does not work for some browsers; it is ignored. I don't quite understand why, but it is definitely the case that it is referencing something "off site". Perhaps it is an XSS-prevention feature in the browser (since it worked anyway in some browsers, and not others).
The solution was to edit the page and use the Upload Image command. This creates the image with a very different URL than the Attachments does. (Then I used the HTML editor to remove the resulting unwanted IMG tag, and copied the URL to the TABLE background attribute.)
The page now displays with the background, in all browsers.
Google Sites used to have an "Entire Page Background" command, which I imagine used a CSS style in a DIV or on the BODY element. That's how I wrote the page before I tried to port it to Google Sites, but Google removed this functionality. There is still lots of documentation and third-party help pages that refer to that feature. That no workie no more. And Google Sites doesn't support CSS generally, because it interferes with their CMS. It automatically rewrites/redacts whatever HTML you input on your page.
Someday I'll understand exactly what was going wrong, but hopefully the workaround I've described here will be useful for people.

Related

Unable to Copy Rendered HTML Signature Into Gmail

After a fair bit of looking around, the only way I've found to get a signature on gmail is to copy the rendered HTML signature. Two problems arose: 1) I couldn't actually select my entire signature, and I can't even see what I am selecting like how it works with regular text and other's tutorials for gmail signatures. 2) If I press Ctrl+A on Firefox (Chrome only copies half, even when I use Ctrl+A), I can manage to copy my signature, but if I try to paste in the signature box, it glitches out and appears static in the top left of that specific Chrome/Firefox tab, like this (edited for privacy reasons):
And if I try to just go for it and email (after saving changes), no signature will be rendered at all. Not too sure what to do at this point, so any suggestions are welcome.
Thanks.
EDIT: This is the HTML I use to render the signature. As a side note, I do replace those placeholder file names with links from an image hosting site. I also add 3 tags around a few of the ""s.
Ultimately I found the solution after playing with various HTML and image options. The problem lies in my use of the <div> tag for the layout of the signature. I should have been using <td>. Using the slice tool in Illustrator will render the HTML with <div> tags, while using ruler guides in Photoshop and saving for web (I used the legacy option) will render with <td> tags. I'm going to do a little more digging and see if using guides in Illustrator will still render with <div> tags, but I'm not sure if this site is the place to discuss this piece of the problem.
EDIT: By the way, Illustrator just really likes <div>s, so if anyone is looking to do this same thing, use Photoshop's legacy Save for Web mode. It will generate the <td> tags for you.

How to make an outlook signature that calls data from file(s) that are hosted on the internet

I have been searching and searching and fear there is no way to do this. All answers on this and every other site have pointed me to Java, PHP, and iFrames - none of which will work in outlook.
The goal is to have a central location to update a footer and other information without having to go to each user's PC every time we need to update it. Also, the footer has a bit of formatting to it, so HTML is best, but txt/css may work, too.
Best results came from iFrame. It did what I wanted in the browser, but it doesn't work with Outlook and many other email clients.
Second best was a Java based include function I got from w3 schools, but it doesn't work on the local machine. It works fine from web when all is copied to the site, but the same folder structure on the local PC displays an empty page.
And I wish I could use PHP, but this is not going to work with Outlook.
One option is to design the email signature or footer in HTML & CSS.
There are lots of resources on how to do this properly, with support for all reveiving email clients.
You can call to a resource image from css or html, so every time you want to change content you just change the image on the server.
This is limited to images tough, but maybe an adapted solution?

Firefox: images not appearing, url's modified with "pagespeed" + jargon

OSX 10.8.5
I have images on my site hosted on my own server (not hotlinked) that aren't appearing in Firefox (26.0). It's just empty space where the image should be.
Troubleshooting with Firebug, I found that the image urls are different than what they're supposed to be. Instead of just src="img/Pic1.gif" it's something like src="http://website.net/img/xPic1.gif.pagespeed.ic.A2br4BiDEK.png". This has to be the reason the images aren't appearing, no?
I looked up what PageSpeed is, but I've never used it before. I guess I should disable it, but as you can see on the page I linked that it requires knowledge of apache? I have zero knowledge of that and would like to avoid it for the time being if possible.
Does PageSpeed just come as a part of Firebug? I disabled Firebug and refreshed which did not bring the images back. Will other visitors to my site not see the images on Firefox as well? If so, how can I possibly solve this?
edit
I'm also using Google Analytics, in case that is relevant..
Pagespeed is not the reason for the disappearance of my images, so although I didn't solve my problem, I'm closing this question as the title is no longer relevant.

Is it possible to apply an image map over a embedded image in an email?

I am sending a normal html email message to people using PHP of which the sending is irrelevant to this question. I allow for people to embed images when they send so I got this weird behavior this morning.
When I embed an image, but the image and the HTML contains an image map to link certain parts of the image to actual http links. The image map fails. If the image is not embedded, the image works fine. This also happens just for desktop email clients.
Now, my question is, is that normal behavior or am I doing something wrong?
Regards
As far as I know, you can. However, if they do not accept HTML emails then they will just see plain-text. I'm sure you've seen an email where the html doesn't get displayed properly.
As I say though, I'm pretty sure you can but I'm not sure how well javascript works in an email client just FYI.

CSS of iFramed page not being applied properly

My company has purchased a third-party package with a built-in customer facing web portal, and I'm being tasked with integrating it into our site. Unfortunately, the web portal does not look great, and we have absolutely no control over how it looks (other than asking the vendor for changes - $$). In order to make it look somewhat like the rest of our site, I've stuck it in an iFrame (I'm not thrilled about this either) to put our logo and top navigation on it.
Please note, I am not attempting to manipulate the iframed page in any way.
Firefox handles this just fine, but in IE7 and IE8, not all of the CSS is being applied properly when the application's pages are displayed in the iFrame. Specifically, it should be applying a font-family of Arial to all TDs, but some text inside TDs are not being displayed as Arial.
Any ideas as to what is going on? This only happens when the pages are viewed inside the iFrame. Outside the iFrame, the CSS is applied as it should be. I'm guessing we're going to have to get our vendor to make some changes, but I'd love to know why the iFrame is impacting the page like this.
Thanks!
Have you opened the site you want to integrate as standalone in IE? Maybe it has nothing to do with the iframe, but with the ie itself. That would mean, that the system your company bought, doesn't provide browser-compability because of lack of CSS-IE-Fixes.
These are some debugging steps you can try:
Install the Firebug extension for Firefox. Right-click on an item that looks different and select "Inspect Element". The "Style" tab on the right will show you where styles are coming from.
Save the main document into disk (File->Save as->Web page (complete). Start stripping stuff from it until you get a small test-case you can post here. (Alternativelly, you can spider the site into disk with WinHTTrack.)