I'm coding a transactional email template and it's intended to have a header with a bottom-border with an inverted border radius (see attached image).
Originally I've attempted this with a background image which works fine as long as: (1) The user allows for images to be downloaded, of course, and (2) Most importantly, the email is viewed in desktop because when fiddling with responsiveness (bellow 600px width) things get really messy.
With using an image I was trying to avoid using complex CSS code given the varied levels of support in email clients. However, I'm thinking that it may be a better option to avoid the issue with responsiveness.
I've seen different methods to achieve this curve. For example, over-imposing an absolute element at the bottom of the div with the overflow hidden and adjusting the border radius values there. Not sure, however, if it would worth the effort.
Could you help me find the best way to approach this problem having in mind the limitation of emails.
PS. I'd be OK with a non-curved bottom-border as a fall-back in cases where the client can't render border-radius appropriately.
Related
I've attached two images showing the effect I'm trying to achieve, and what's wrong with the way I'm currently doing it. The first is displayed on page load, the second when you click on the down arrow.
The second partially obscures the first, currently using a negative margin. My current version has an invisible element underneath the leftmost box containing the icon, which has the same class as it that handles indentation. But At certain screen widths you get the effect below, where you can see the expanded section's border running halfway up the original element.
I've tried a few things to get rid of the glitch, but it's feeling a lot like pressing down bubbles - either they create worse problems, or the same problem at different widths.
I have the strong suspicion that I'm doing this all wrong, but I haven't thought of a better way to generate the same effects - border around the whole thing, text from the expanded element getting pulled up to approx where the original summary text was.
I can afford to use fairly modern CSS for this - our audience tends to be pretty high tech. In case relevant, I'm using a transition animation for the height increase, so it needs to be something consistent with that.
Before:
After:
The simplest fix for your problem is to make the left icon area overlap the rest (using z-index and position:relative) and extending it by 1px (so it covers the border in all cases).
Update your question with a code example and I'll update my answer with the fix, if the principle outlined above is not enough.
The alternative is to empirically determine the widths at which the border is misplaced and adjust the width of your dropdown, using #media queries.
Another rather important aspect which you don't seem to have determined is if the bug is specific to any particular browsers/devices.
As a side-note, I find quite a few questions similar to yours have one (rather silly) common cause: the developer has unknowingly changed the zoom level of their browser, pressing either Ctrl++ or Ctrl+-, viewing the page at 90% or 110%. Make sure you're developing at a zoom level of 100%, by pressing Ctrl+0.
I'd also like to suggest you take a look at How to ask to get tips on improving your question(s), to increase your chances of getting better answers.
I'm working on a newsletter for my photo community website. In the newsletter, I want to have a grid of images. Here's an unfinished rendering in an email client. As you can see it has problems, this is only to illustrate what I'm trying to build.
The image files in reality are about twice the resolution as shown in the email. Furthermore, they can be in any aspect ratio and orientation. What I would like to achieve:
Force all images into 200 x 200px cells
Do not distort the image, the aspect ratio must be maintained
The cell must always be filled, both horizontally and vertically
Background sizing should be centered
Elements must be clickable, leading to that particular photo
Should be robust and work in most popular email clients
In normal web technology (as opposed to HTML in email), this would be a matter of setting the image container to the fixed dimensions and using background-size: cover. I've learned about many HTML email limitations yet am trying to persist in finding one way or another.
Am I really on an impossible mission here?
What I've tried so far:
Setting the image as a background on the a that wraps around the img tag. With some tweaks it can come to a reasonable result, yet centering is a problem and outlook.com does not show the images at all.
Using normal img tags with "a" around it and trying to control max width and height on the image and its wrapper. Here too centering is the main problem
I really hope this can be done, one way or another (not that server-side resizing is not an option in my case).
Since this is on an email client, you can't use any scripting language. This mean that manipulating the image is impossible on the client side of thing.
You will have to manually create thumbnails for your pictures or make some code that creates thumbnail server side before creating the email.
This is as much as I can tell you without knowing how you are creating your emails.
I am working on a web page and I am trying to figure out the best way to put a border around the edge that is a image. So, is it best to use 8 divs as in one for each corner and side, or wrap the entire page in a div and use multiple backgrounds with css?
I now it can be done both ways, but which way is better. This would obviously be simpler if I was just using a simple border that is already available through just css, but frankly this is a image border.
basically using multiple backgrounds is good but the point is some users still stuck with browsers which doesn't support multiple backgrounds, so it depends on your visitors, so it's your call.
I am currently working on recreating Apple's iOS 5 Toggle Switch in HTML5 and CSS3. The key is that due to requirements, the composition cannot be made up of any images whatsoever. I have been able to achieve almost everything that I wanted, however there seems to be an issue with cropping the container box so that it only displays half of the toggle at a time.
Here's a screenshot to help explain what I mean:
Notice that the pink border (added only for development purposes) is rounded, but the content which extends past it seems to break out of the border-rounding. Can anyone suggest a suitable method by which I can prevent the content from expanding past the border-radius - effectively cropping the content of that div to fit inside the rounding?
I am currently thinking that this could be achieved using the -webkit-mask-box-image property, and image data URLs (for example somethin like: data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7). Is there a better solution, or can anyone offer help on creating these data URLs?
I hope that makes sense, and any help gratefully received.
Unfortunately I believe this is a design flaw with webkit. The content is never clipped to the border radius. As for base64 encoding, I've found this tool helpful
Right now, we are trying to achieve consistent formatting of textarea elements, across Safari/Chrome/Firefox/IE on Mac and Windows. I believe this may be a rabbit hole, since any combination thereof could produce formatting in a slightly different way -- maybe one combination adds a bit of padding to a div here differently than the others, another one breaks multi-line text there differently than the others, and so on.
Instead of using textarea (or div) elements, can we achieve pixel-perfect positioning using HTML5's canvas? Or using the Raphael JavaScript library? Or maybe some other JS library?
Mainly, by pixel-perfect, what I mean is any arbitrary text should get rendered in the exact same way (especially with respect to line breaks and padding) in any of the above-mentioned browsers.
(I'd prefer to avoid Flash-based solutions for the moment, unless that is the only solution...)
Send the text to the server, have the server render an image, display the image. Voilà.
I would say this is nearly impossible.
I would also say that there is no reason to have pixel perfect across all browsers because the overwhelming majority of visitors only view your site with one browser. And those who do visit your site in more than one browser (say at work and at home) are unlikely to notice elements that are off a few pixels or have slightly different border colors.
What we should be concerned about is that the content looks good in each browser.
That said, here's a great list of textarea tricks: http://css-tricks.com/6841-textarea-tricks/
One main reason that PDF exists is that browsers are not about pixel-identical layout but PDF is. Among other things, not even typefaces are guaranteed to be the same from one OS/browser to the next.
Even, if you don't let the browser position anything and you do all your own pixel level positioning, you still won't necessarily have the same fonts to work with. If you let the browser position anything, then you can have variations.
Would one solution be to begin your css with a clean slate? Give everything a known default?
For example, I start my css files like this so I always know what to expect:
*{
margin:0;
padding:0;
}
Is that what you're looking for? Similarly, you could change '*' to 'textarea'.
I'm not sure if it is possible, however one thing you may want to look into is using the web developer toolbar for firefox or the web developer add-on for chrome. There is an option to disable browser default styles. Check this and then style everything. The borders, border type, all margins, paddings, background colors, etc. Then reenable browser default styles and make sure it looks the same. If not, wash, rinse and repeat.
Also, if fonts play a part, you will have to embed them into the page since some operating systems may not have a particular font installed.