I am making a html mail template and I cant figure out how to remove text-decoration completely. I works very well in Thunderbird, but not in Outlook and Gmail. In Outlook, the visited links get a different color and i Gmail all the links become blue. I want the to be black all the time.
Here is my code:
<span style="font-weight: bold; font-size: 16px; text-align: left;">
<a style="text-decoration: none; color: black;" href="[% doc.url %]">
This is a link
</a>
</span>
I also have a problem in Gmail, with a transaprent 1x1px spacer image ("spacer.gif") which shows with ca. 5px in height.
I have based my layout on tables, but I don't know if it is relevant information.
In answer to your comment, style the href like this:
click here
Gmail doesn't like pure black (#000000) or white (#FFFFFF) codes for some reason.
Don't use html-reserved words, for black color use #000000 (and not #000).
For spacer image add display:block;.
I have based my layout on tables
that's right.
Related
The blog: takekey.tumblr
I'd like the text beneath the 'Rick Hanson' image to run down it's right-hand side with a margin of about 8px.
I found another answer on here, but the solutions are not working for me.
Other answer
Solved. I didn't realise I could get to the html of the post itself.
I just needed to add: img style="float: left; padding: 0px 14px 0px 0px;" before the src
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
I use NewsRepublic to access feeds. My feed http://www.ukcorporategifts.co.uk/blog/feed is there and the text displays correctly, however I can't get it to show images and inks. Do you know where the issue might lie?
I will be very grateful for your advice.
Some of your image links are relative urls (the src part)
<img style="display: block; margin-left: auto; margin-right: auto;" src="/assets/images/promotional-prime-tv-towels.jpg" alt="Promotional Beach Towels" />
You should use absolute urls, like http://example.com/assets/images/promotional-prime-tv-towels.jpg
I haven't been able to figure out why this is happening. I'm using MailChimp to send out a newsletter and in Outlook 2003 am getting a line (similar to a hyphen) to the right of any image, that is a link. (see attached image)
http://clickstream.ie/img/line.png
Here is the code for the logo at the top:
<a href="#">
<img alt="clickstream logo" title="clickstream logo" src="http://gallery.mailchimp.com/0f36ab4eb559a3dd979199c25/images/clickstream_logo.jpg" style="max-width: 250px;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;vertical-align: bottom;" class="mcnImage" width="176">
</a>
Does anyone know why this would be happening, or has had any experience with this issue.
In Gmail and Hotmail (Outlook) it seems to be fine.
That line might not be from the image, but from an <hr> code you might have included in the page somewhere. Now all you do is, try to change the position of each div around that area, to position: absolute; you might see other divs moving and leaving out that line. but if it does not then you have to check in your code and make sure you have the following correctly.
line-height: ;
outline:;
ertical-align:;
You might also undo any borders you have added to the div. but if not works, then it might be from your external stylesheet.
I'm trying to edit a wordpress theme and I'm getting some problems with some images that just don't want to appear on IE8. Other versions of IE render the website as it should, but IE8 gives me this headache that I don't know how to cure.
Please take a look.
I really don't have any clues why this is happening.
Help!
The problem is caused by the images having this CSS rule:
max-width: 100%;
To fix it, you can remove that rule altogether if you don't actually need it, remove it just for Internet Explorer 8 (see this question), or add these two CSS rules to the parent a tag:
display: block;
width: 300px;
You have issue with your CSS on IE8. Try adding "width:30%;" on the div that holds the image something like this:
<div class="hentry post publish post-1 odd author-admin category-oferte-pelerinaje" id="post-32">
<div style="float: left; width: 30%;">
<A title="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" href="http://pelerinaje.tapet-online.ro/pelerinaj-la-schitul-sfantului-ierarh-modest-judetul-arges/"><IMG class="archive-thumbnail featured" alt="Pelerinaj la Schitul Sfantului Ierarh Modest – Judetul Arges" src="http://pelerinaje.tapet-online.ro/wp-content/uploads/2012/12/117491_ierah-modest-220x150.jpg" width=300 height=225></A>