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.
Related
On my site I have images in the travel report, some of which you can click on and are therefore between the a tag of a link. This works well on the site. But if a PDF is made of it, the images with links will be placed behind the text.
We received the code, Robin immediately walked over to it and came back with the house key.<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left"> After dinner to the apartment.
On the website: example HTML/PHP - result in html (pic)
On PDF via dompdf: example PDF - result in pdf (pic)
Does anyone know how this can be solved so that the image also appears between the text and not after the text?
Maybe you can set a z-index value for your image's CSS like this:
img {
z-index: 1;
position: relative;
}
Or try putting the
<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left">
in a block-level element. Wrap a <div></div> around it.
Hope it helps!
I am trying to get the whole div clickable and this works but only with a straight link to another site. Is there a way to make it work with this text in it also:
<div class='reddit' title='Share Us On Reddit' onclick="window.open('http://www.reddit.com/submit?url=httpsFwww.example.com&title=XXX is Cape Breton's Homepage. Start Your Web Search With Beautiful Cape Breton Island')">
Thanks
From CSS Tricks
This probably isn't a thing you need to rely on JavaScript for
anymore. Since HTML5, this is perfectly valid:
<a href="http://example.com">
<div>
anything
</div>
</a>
And remember you can make links display: block; so sometimes you
don't even need the div.
<div style="cursor:pointer" onclick="document.location='evenidontknow-page.html'">
<h2>Full Div Clickable</h2>
</div
The above code helped me very well, and this will not require any extra code.
Using a tag may solve the problem but we need to add extra code to it.
please check this link for more info w3schools
Bootstrap has a feature called "Stretched Link". From the documentation:
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
You can read more by visiting the following link:
https://getbootstrap.com/docs/4.4/utilities/stretched-link/
I have added a picture to my webpage here http://www.backpacks4aussiekids.com.au/Home.html and it works just fine, but when I tried the same thing in an article here http://www.backpacks4aussiekids.com.au/Articles/what-is-needed.html the pix won't load, even though I followed the same proceedure.
I even tried changing the pix from .jpg to .png and back again. The only way the changes can be viewed is if I clear my site and browser cache before I attempt to view the site.
All the text is able to be viewed but there are either empty boxes where the pix should be or nothing at all.
thanks in advance, des
The image definitely exists as I have checked.
The reason why it's not showing is because the picture on the homepage is within an <img> tag where as the picture on the second link you provided is for some reason within an <input> tag as shown below:
<input type="image" style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="">
Open the article in the article manager, click on the little html button which will open a window, find the code above and change to the following:
<img style="width: 511px; height: 684px; float: left;" src="http://backpacks4aussiekids.com.au/images/what we need now/clipboard 1.png" alt="" />
Hope this helps
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.
I am trying to mask an element that has some images inside of it, using only css.
i have done this and it works fine in webkit using -webkit-mask-box-image and its doing just what i want, but im having trouble using other browsers.
gecko is supposed to work using mask, and that tag does show up in firebug, but it doesnt actually use the mask.. i've also tried converting the png im using to base64 data uri, but to no avail.
example: http://jsfiddle.net/nNLta/
does anyone know the correct way for doing this?
HTML
<div id='wrap'>
<div class='masked flashing-anim'>
<div class='the-mask' >
<ul>
<li class='blink_1'></li>
<li class='blink_2'></li>
</ul>
</div>
</div>
<div class='the-outline'>
<img src='img/real-stuff.png' height=500 />
</div>
</div>
CSS
#wrap {
position: relative;
}
.the-outline, the-mask {
position: absolute;
top: 0;
}
.the-mask {
height: 500px;
width: 360px;
-webkit-mask-box-image: url(../img/the-mask.png);
-moz-mask-box-image: url(../img/the-mask.png);
-o-mask-box-image: url(../img/the-mask.png);
mask-box-image: url(../img/the-mask.png);
mask: url(data:lotsofchars);
}
example: http://jsfiddle.net/nNLta/
Part 1
mask is not the same as mask-box-image unfortunately. If you read the (rather sparse) docs you will see it is applicable to SVG only. More on this later.
Currently Gecko doesn't support 'mask-box-image' - if you search the MDN you'll see it applies to -webkit- only.
Additionally I don't think this is actually spec. Webkit has had this capability/concept for ages (in various forms like -webkit-box-reflect) and I think that it's just a hangover from those days. I'm not sure whether this will even be adopted by all browser vendors (although I hope, and it makes sense that, it will).
Part 2
To use the svg dependant mask: css property you need to create an SVG element and reference that. Here is a guide. I've not used this technique before so I'm afraid that's all the detail I'm going to go into right now.
An alternate option
If you don't need a clever repeating/growing mask why not create a large png and overlay the text/image you wish to hide. I'm not sure I understand what you are ultimately trying to do but this seems pretty simple to me. The obvious issue is when you need the stuff behind the mask to be selectable/interactable (err..interactive that is...); for instance when you wish to apply masking to text or links. A way around this is to use pointer-events:none which is supported in Gecko and Webkit (but nothing else...). Here's more from the MDN
Sorry I don't have better news - if none of the above is helpful please feel free to leave a comment with your specific requirement and we'll see if we can't work around the browser limitations.
Hope this is helpful!