Creating a scrollable block without using div overflow:auto or JS - html

I'm trying to create an element inside my html page that will contain a table but I want it to have a fixed height and a scrollbar. Since I will be sending this via email and some email clients don't support text-overflow, I want to be able to do it without using any overflows or javascript. Is this possible? Thanks.

No. Email HTML has to be EXTREMELY old school. Think HTML4.01. Outlook uses MS Word 2007 as it's HTML parser. 99% of your fancy CSS won't work and zero JS will work. Let the content fill the email body and let the user scroll the client window.
One option that is common is to have "leader text", like the first 120 or so characters of whatever article you want the user to read, accompanied by a "read more" link that takes the user to the full article on the website. The purpose of your email should be to get the user to your website asap so you can utilize a browser and sell your content or service.

Related

Send a HTML site by email?

It is possible to send an entire site (that has only 1 image, a logo) via mail?, the workflow would be:
user opens the mail
user sees the attachment "html" file
user clicks the attachment, the browser opens.
I have no idea if this is possible.
Another thing, this has to work on mobile, iOS more precisely.
Until now we were sending interactive pdfs to the users, but now we want to include iOS users as well, so this strategy could work, if it works of course.
And unfortunately, no, I can't send a link to a website, it has to work this way, for reasons that are beyond my decision.
You have three options:
Send a link to your website.
Send the mail with an attachment of the HTML of your website. (since it is simple, you said just 1 image and logo it can fit in one HTML file).
Send an HTML formatted email, where you display the image and the logo.
If you want it to work on mobile, just use media querys for it to change styles depending on widht and height of the device.

Plain text converts to link on mobile

I have a name like this Domain.com, in my normal e-mail account it will be displayed as plain text but at my mobile it's a link.
Is it possible to disabble it by a tag?
This is the email client adding the link afterwards. Trick is to make it unrecognizable so that it isn't triggered.
This article addresses the issue.
If you are not building a full html email (no style tag), you might be able to get away with adding a zero width space  in the domain to help break it up. Something like this might work:
http://domain.com

Avoiding bad HTML to distort page

I am working on a web application where I read emails of an e-mail address (using pop) and store the html content of e-mail body in MS SQL Server 2012 varchar(max) field.
A functionality of website require me to display these stored emails inside a tag held for that purpose.
The problem I am facing is that if an e-mail body contains bad HTML, it end up distorting the whole page. For e.g. if the e-mail body contains an additional </div>, it closes my main <div> tag (the one which is supposed to hold entire e-mail body) and the remaining HTML of e-mail body flows out of the holding area, becoming part of main page.
This application is coded in VB.NET and running on IIS 7.5.
PS: I tried searching for similar questions but couldn't find one. Please link me if this has been asked before.
You should load external code in an iframe to limit its effect only to its context - not your application page.
Display the actual body of the email inside a separate iframe. Use the new HTML5 attributes like sandbox to harden security.

<div> blocker for iframe content

I am building a page to bring attention to available parts and accessories for a product line that is otherwise burried in my web site. The parts diagrams and check-out feature is always in the same spot on the main portion of my web site, so I have put the part I need to display in an iFrame, limiting what is viewable. However, there is a single part that continues to display, as it is designed to float to the right side of the display window. Since iFrame is now the display window, this floating button is in the way. The web site I am working on is at the following address.
http://www.snoscoot.com/fcaccessories/hondapowerequipment/test.html
Here's a link to a screenshot pointing out what I need to be able to make disappear: http://i1193.photobucket.com/albums/aa354/pbucket10/buttontohide.jpg
The pages that are going to be displayed in that iFrame always have the "div" class of "newsletter". Is there is a way to block certain a certain div "id" or "class" from being displayed within an iFrame? No worries about me stealing content or copyright enfringement, this is my web site (actually owned by the company I work for; I'm their web/code monkey). Any help would be greatly appreciated; I've been wrestling with this one for a couple days now.
Using javascript, you could use:
function hideID(){
document.getElementById("WhateverIdYouWantToGetRidOf").style.display="none";
}

HTML Form Input and Help Text

We have a many HTML forms in our application. Corresponding link to help documentation which is prepared by the content team for each page is given at the top of the page. But this does not make sense for blind people and even much for regular users as each time they need to go to the link which opens a separate page.
How can I display help text for the input boxes with content present in different page which is relevant to the current input ?
For visually challenged users I can use "aria-required" and "aria-describedby" flags if there is a way to link to that documentation.
The help text really should be on the same page as the form. You can always use an accordion or some other method to collapse or show/hide the docs.
If the content really does have to live at a separate URL, I suppose you could make an AJAX request to the corresponding HTML page to pull the content in upon user request for it, but make sure to use ARIA Live Regions so users of assistive technology will know that the new content has been loaded.
Also, this may be helpful: WCAG 2,G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input