I am using Adobe Contribute (HTML editor) to edit a website. I have two links on my page that both link to the same PDF file type. However, when the links are clicked they are displaying the PDF differently in IE (the issues does not occur in Chrome): One with the PDF tools and thumbnail sidebar, and the other just as a plain PDF file by itself.
One looks like this:
The other looks like this:
Here is the HTML code:
<p style="margin-top: 0; margin-bottom: 0;"><strong>DATE 1 HERE</strong></p>
<p style="margin-top: 0; margin-bottom: 0;">FILE NAME LINK</p>
<p style="margin-top: 0; margin-bottom: 0;"><strong>DATE 2 HERE</strong></p>
<p style="margin-top: 0; margin-bottom: 0;">FILE NAME LINK 2</p>
What I need is for them both to look like the second one. Any ideas as to what might be causing them to come up differently?
I'm pretty sure that Chrome and IE will display PDF's differently. It's just how they were designed. I'm not to sure about how to make them look the same, I'm not even sure that you can. But, I think it's just the browsers themselves.
Turns out that it was a setting within the PDF itself that I needed to change. The following settings fixed my issue.
Go to File>Properties
In the Document Properties window, select the Initial View tab
In the Document Properties window, choose "page only" for Page layout, and check the "hide toolbars" box.
In the Document Properties window, click the OK button
Go to File>Save
Reopen the document
Related
First, let's set up a code for full-xpath:
(focus) for /html/body/div[2]/div/div[1]/div[3]/div/div
(sub-focus) for /html/body/div[2]/div/div[1]/div[3]/div/div[2]
Tool to use:
Online Inspector: Chrome or Firefox (any of them will gives the same result)
Offline Inspector: any code-editor, I personally use Sublime-text
HTML prettifier to visually tidy up the downloaded html (optional)
Cases
piece of structure from non-downloaded html on the chrome browser web-inspecting tool
▼<div class="BrandPageWrapper-liveAlertAd BrandPageWrapper-contentWrapper" role="main" id="MainContent Container"> = $0
<p id="MainContent" tabindex="-1"></p>
▼<div class="QuotePageBuilder-container">
►<div class="BadgeGroup-badgeGroup">...</div> (focus)
►<div class="QuotePageBuilder-row">...</div> (sub-focus)
</div>
</div>
►<div id="MobileAdhesion-Homepage" class="MobileAdhesion-container" data-module="mps-slot">.</div>
piece of stucture from downloaded html on code-editor (cannot use chrome inspector, something prevent it to show the full content, preventing the user from scraping the data)
▼<div class="BrandPageWrapper-liveAlertAd BrandPageWrapper-contentWrapper" role="main" id="MainContentContainer">
<p id="MainContent" tabindex="-1"></p>
▼<div class="QuotePageBuilder-container">
▼<div class="QuotePageBuilder-row">...</div> (sub-focus)
As you can see, the (focus) is missing from the html, If I tried to search the BadgeGroup-badgeGroup class in the html document, I gone zero result
questions:
Why is it gone?
Where is it gone to?
bonus-question:
In chrome browser Inspector search element plugin both /html/body/div[2]/div/div[1]/div[3]/div/div[2]/div[1]/div[2]/div[3]/div/div[2]/span[1] and /html/body/div[2]/div/div[1]/div[3]/div/div/div[1]/div[2]/div[3]/div/div[2]/span[1] pointing at the same element inside the (sub-focus), why?
source
Almost certainly the HTML source of the web page does not contain the HTML concerned (the piece you describe as "gone" in the downloaded file), and it's actually generated in the browser by JavaScript.
So I'm having an odd issue while setting up my RSS driven campaign in Mailchimp.
In an area in my template, I'm pulling in an excerpt from my post that could possibly have a link in it.
Let's say for example this is what a snippet of the code looks like in my template:
<div class="post-excerpt">
*|RSSITEM:DESCRIPTION|*
</div>
Which for example lets say when the email is generated and sent the source looks like this:
<div class="post-excerpt">
Lorem ipsum dolor sit amet.
</div>
Obviously I cannot add any inline css to that link, because it's getting generated by Mailchimp. But I'm adding CSS in my template like this:
.post-excerpt a { color:pink; text-decoration:none; }
And I also have Mailchimp's "Automatic CSS Inliner" setting turned on. This however doesn't seem to be moving my CSS to the links that get generated by *|RSSITEM:DESCRIPTION|*.
For some reason, in gmail on desktop, links appearing within .post-excerpt are still appearing default blue and underlined. On my iPhone, they are pink without any text decoration, as they should be.
Any idea on how to get the links in this area to appear the way I need them to?
Thank you.
Gmail strips out all of the style information in the header (anything in the <head> part of the document including <style>).
Gmail app also does this. This is the main reason you can't create responsive emails for Gmail.
Obviously as you correctly state, you cannot put an inline link due to the link being imported through your RSS feed.
However, have you considered making the whole description a link? I don't know if it will work but it's worth a try. It might even improve click through rates.
<a href="*|RSSITEM:URL|*" style="text-decoration:none;
color:#000000;">*|RSSITEM:DESCRIPTION|*</a>
As a further thought you could also consider putting <style> CSS goes here </style> in your body at the bottom of your email.
I've got an un-complicated .aspx page and I've added some bookmark anchors at that re-direct to a different page with bookmarks.
The anchors look like this:
From http://www.davincispainting.com/painting-solutions
<a class="questionLink" href="painting-answers#Answer7">Paint Chalking</a>
When you click on this Hyperlink in Firefox, the URL does indicate the bookmark:
http://www.davincispainting.com/painting-answers#Answer7
However, this do not navigate to the actual bookmark in the 2nd page
<h2 id="answer7">Paint Chalking</h2>
The problem occurs in Firefox but not IE8.
I originally thought that the Routing was causing the issue, as I do not inlcude the .aspx page extension in the link. So I added the extension, which still doesn't work.
<a class="questionLink" href="painting-answers.aspx#Answer7">Paint Chalking</a>
How can I debug this problem?
Does the page file end in an extension? If so, make sure your link includes the extension. Also, check your capitalization. Also, the standard practice for the bookmark syntax is to not navigate based on ID of a random control, but rather the anchor tag. See W3 Schools Example.
You should have...
<a id="answer7" />
<h2>Paint Chalking</h2>
and the link should look like this:
<a class="questionLink" href="PATHTOPAGE#answer7">Paint Chalking</a>
Where PATHTOPAGE is replaced with the absolute or relative path to the other page. Make sure that resolves.
The problem was the name itself:
<h2 id="Answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>
is different than:
<h2 id="answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>
I'm using Inspect Element in Google Chrome to figure out what is controlling the size of the slideshow controller buttons underneath the slideshow of this template website:
http://themefuse.com/demo/html/Medica/index-slider-2.html
When I click Inspect Element over the button "Cardiology" I see a line in the HTML code saying:
<li style="width: 192px; overflow: hidden;">Cardiology</li>
However, when I view source code of the page, no such line exists! This is a problem for me because I would like to edit the size of the button and the text inside it.
Please help! Thanks!
"Source code" is what the browser received from the server. It can be changed by JavaScript; the "Inspect Element" always shows the current shape of the document.
EDIT: Then again, sometimes things are not complicated. Look what I found in the source code:
<li>
<div class="textHolder">
<h3>Cardiology</h3>
<p><span><strong>Cardiac Rehabilitation Center</strong> We helped Glade Inc. design their latest fragrance for household perfumes </span></p>
</div>
<img src="images/temp/slider_img_01.jpg" alt="" />
</li>
It is then further modified by JS.
This list generated by JS. Check js/playSlider.js starting from line #335.
Are there ways to resize an image to fit thew window the image is being viewed in WITHOUT javascript and limited CSS?
I ask because I have an email campaign that I send out that features a main image that I want as large as possible without scrolling. I have read ways to do this with javascript and jQuery but I do not see a way to do this that the majority of email clients will read and react to properly. Is this possible? And if so - How?
This is the correct way to do it for a html email:
<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
It will auto resize to match the width of the container element (which should always be a <td>).
Note that on some clients (Outlook '07, '10 & '13 in particular), the image will not exceed it's maximum dimensions. If you are working with a max-width fluid template this will not be an issue providing your image width matches the max width.
This is how you should be able to do it
/****this is the Css****/
.full {
width:100%;
height:auto;
}
/***end Css***/
<!--Now the html--!>
<section>
<img src="image/main.png" class="full">
</section>
Or you can go the simple way
*update
you can do it like this
<img src="image/main.png" style="width:100%; height:auto; border:none;" />
and if they have an option to put it as html to do it like that as it should render correctly like that
You need to be as archaic as possible to make HTML emails work across all clients.
Inline styles and HTML 4 code should do the trick. Be warned though - max-width and max-height works in most clients, but this does NOT include Outlook 2007/2010/2013/365 which could well be over half of your target audience. Width works in all clients - but NOT on div and p tags in Outlook 2007/2010/2013/365! Always use tables not divs to be certain it will work.
Basically, always assume something isn't going to work and design for the smallest possible margin for error - and ALWAYS use inline styling or it might well get stripped.
If in doubt consult the oracle, I always do :)
Source: https://www.campaignmonitor.com/css/b/
HOW TO MAKE AN IMAGE RESIZE ITSELF IN A GMAIL
First, here is the HTML code we will be working with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Resizer</title>
</head>
<body>
<!-- Point to your image by placing the path in the source (src) attribute. -->
<img src="http://yourImagePathHere.jpg" style="width:100%; background-repeat:no-repeat; background-size:100%;" />
</body>
</html>
NOTE: Notice the part that reads "http://yourImagePathHere.jpg". This is the path that points to the image you want resized in the GMail. Put the URL for your image here. In order to run this code
in a browser, you’ll need to have it saved as an HTML document. You can
accomplish this by copying and pasting the code above into a code editor or text
editor (such as Notepad on a PC or TextEdit on a MAC) and save it with the
extension “.html”.
If you are using TextEdit on a MAC, you will need to switch to plain text editing
before pasting the code. To do this, choose “Make Plain Text” from the “Format”
menu.
For this example, we will assume your file name is “image_resizer.html”. If you
need to change the image, you will need to edit the HTML document with a code
or text editor. To do this, right click the HTML document and choose “Open With”
and select a code editor or text editor. Then, swap out the image source path
(bolded in the example above), replacing it with the path that points to the
updated image. Then save, and your HTML file should ready to go and updated
to point to the new image.
If you are using TextEdit on a MAC, you will need to start a new document,
switch to plain text editing, paste the code again, and then change the path to the
image.
Step 1: Open image_resizer.html in a browser. To do this, double click it OR
right click it and select a browser from the “Open With” menu.
Step 2: Click anywhere on the webpage. You can click on the image itself or the
white space on the webpage. The idea here is to make sure that we will have
the pointer’s focus on the window to verify that the page is ready to be selected.
Step 3: Select All. Do this by using “Ctrl + A” on a PC … OR … “Command + A”
on a MAC. The page contents will be highlighted.
Step 4: Copy. Do this by using “Ctrl + C” on a PC … OR … “Command + C” on
a MAC. The page contents will be copied to the clipboard. (That just means that
the computer memorizes it).
Step 5: Now that the contents are copied to the clipboard (memorized by the
computer), open your Gmail and click the compose button. Place your curser in
the content area (click in the area where you type a message).
Step 6: Paste. Do this by using “Ctrl + V” on a PC … OR … “Command + V” on
a MAC.
Step 7. Finish typing your email message and send it.
I was dealing with really big images without any kind of a container. I fixed it by using max-width to ensure the image wouldn't be too big.
<img
src=""
width="100%"
style="max-width: 80vw; margin: 0; border: 0; padding: 0; display: block;"
/>
Using both width and max-width ensures the image will take the full available space, but not too much. I used 80vw and not 100 because people rarely read your emails in a fullscreen mode, usually more often using a viewer (Gmail), which usually uses a bit of the available space.