I have some text on the left, and an image on the right, now when device is mobile, a needs to be added between this some text and the image. When the device is a PC, the should be disabled.
I tried using : <span style="text-align: center;" class="hidden-lg ellipsis"> but when the user is on mobile, the some text is present, then the on the next like, and the image on another line. I want the image to look like up
But it is coming like :
My code is as below:
<div class="divStyle" ng-click="showShipTo()" style=" margin-bottom: 3px; margin-top: 5px;" >
<a class="placeOrder" style="margin-left: 15px;">
Ship To
</a>
<span style="text-align: center;" class="hidden-lg userDetails ellipsisOverflow">
{{product.address.first_name+" "+product.address.last_name+", "}}
{{product.address.street+", "}}
{{product.address.city+" "+product.address.state+" "+product.address.zip_code}}
</span>
<img align="right" style="margin-top: 14px; margin-right: 14px; "
ng-src="modules/checkoutProcess/arrow.png" alt="Arrow Image" height="20" width="20">
Please can any one suggest any help...
Thanks
Related
I am trying to add rounded corners to an image, but it does not seem to take effect when I do. I am not sure if I am putting the border-radius in the right location. Would someone be able to offer any advice by chance?
<p style="margin-bottom:0px">
<a href="Unpublisthed Website" target="_blank"><img border="0" src="Unpublished Photo" alt="Photo" width="124" style="max-width:124px; height:auto; border:0 border-radius:20px">
<br><br></a>
<span style="FONT-SIZE: 7pt; line-height: .8"> Click picture to view<br></span>
<span style="FONT-SIZE: 7pt; line-height: 1.6"> introduction video.</span>
</p>
So I am facing a strange issue.
I made an email signature and I coded it in such a way that it doesn't display the text-decoration underline in the URL's of the signature.
I am not getting the text-decoration in any URL which means it is working.
However, my client is getting underlined URL's and also the underline is in different colour compared to the text...
What might be the issue? Is there any problem in the code?
I am attaching the code.
<table>
<tr>
<td>
<p style="color: #404040;"><strong>JOHN DO</strong></p>
<p style="color: #404040;font-size:10px">Business Manager</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/email-icon.png"
alt=""
width="20"
height="20" /> <a style="color: #808080;text-decoration:none;"
href="mailto:john#example.co.uk">john#example.co.uk</a> </p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/tel-icon.png"
alt=""
width="20"
height="20" /> 8319831938</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/address-icon.png"
alt=""
width="20"
height="20" /> 4 Demo Address</p>
<p style="text-align: left;"><img src="https://www.example.co.uk/wp-content/uploads/2019/07/website-icon.png"
alt=""
width="20"
height="20" /> <a style="color: #808080;text-decoration:none;"
href="https://www.example.co.uk">www.example.co.uk</a> </p>
</td>
</tr>
</table>
The signature shows fine in my side, but my client is getting underlined URLs and the underline is of a different colour.
Please note that the client is using an iPhone to view the signature using the native iOS email client.
Alright so I think your issue is that your client is viewing in an app (iOS email) that automatically underlines the links. There is a question on stack exchange that goes over this and how to turn it off:
https://apple.stackexchange.com/questions/124277/some-texts-automatically-underlined-in-iphone-5-with-ios-7-1
But as to your code, everything seems to be working as you intend, which can be viewed here:
https://www.w3schools.com/code/tryit.asp?filename=G6JDDU1ON9ED
Trying To Align date next to the hyper link .Even though added align="right" it still shows in left
<tr>
<td>
<img src="images/page_white_acrobat_small.png" style="margin-right: 0.3rem;" align="absbottom" />
<a style="font-size: 12px" href = "" onclick="Popup.open({url:'PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN <label tal:content="string: ${pertiDate}" style="margin-right: 0.3rem;" align="right" >
</label>
</a>
</td>
</tr>
Add a class to your CSS called pull-right..
.pull-right {
float: right;
}
...and then add that class to your element.
class="pull-right"
Try changing your style tag to style="margin-right: 0.3rem; display:block; float: right;"
I have a link with link icon on the left, and an arrow to the right. What I am having problem with is as the link text wraps, it doesn't justify very well. How can I achieve something like here http://jsfiddle.net/MrLister/3xbfyqkh/, but with my given markup?
<div class="linkitem" id="myTools" style=
"display:inline-block; padding:4px 0 4px 0; width:90%;">
<a href="{$ItemEditURL}" id="InlineEditLink" style=
"cursor: pointer; position:relative; top: 4px; margin-right:5px;"><img height="14"
src=
"https://maxcdn.icons8.com/Android_L/PNG/24/Programming/edit_property-24.png"
title="Edit" width="14"></a> <a href="{$SafeLinkUrl}" style=
"color: white !important!" target="_blank" title="{#LinkToolTip}">A
very long descriptive Link text goes here</a>
</div>
<div class="wrapperArrow" style="float:right; padding-top:5px;"><img alt=""
src=
"https://maxcdn.icons8.com/windows10/PNG/16/Arrows/double_right-16.png"></div><br>
<br><br><br><br><br><br><br>
<hr>
Free Icons provided by Icons8
My fiddle here...
https://jsfiddle.net/a2gruae6/
Update this code in your inline style as solve your problem
<div class="linkitem" id="myTools" style=
"display:inline-block; padding:4px 0 4px 0; width:90%;">
<a href="{$ItemEditURL}" id="InlineEditLink" style=
"cursor: pointer;position: absolute;float:left;width:20px;"><img height="14"
src=
"https://maxcdn.icons8.com/Android_L/PNG/24/Programming/edit_property-24.png"
title="Edit" width="14"></a> <a href="{$SafeLinkUrl}" style=
"color: white !important!;float:left;margin-left: 20px;" target="_blank" title="{#LinkToolTip}">A
very long descriptive Link text goes here</a>
</div>
<div class="wrapperArrow" style="float:right; padding-top:5px;"><img alt=""
src=
"https://maxcdn.icons8.com/windows10/PNG/16/Arrows/double_right-16.png"></div><br>
<br><br><br><br><br><br><br>
<hr>
Free Icons provided by Icons8
Problem
I have some inline images on a web page. When hovering over left images (but not the rightmost image) a white dash appears at the border between two or more inline images.
What I've tried
I replaced the image with another image but that doesn't solve the problem.
Placing a br tag between the images solves the problem but the images are then no longer inline.
Using a span tag to insert a hidden white space between the anchor tags doesn't work.
Here's the HTML:
<a href="https://www.plos.org/open-access/">
<img src="/images/Open.png" alt="Open Access" style="margin: 0px 20px" height="55px" width="70px">
</a>
<a href="https://opensource.org/">
<img src="/images/source.png" alt="Open Source" style="margin: 0px 40px 0px 40px" height="75px" width="75px">
</a>
just remove the spaces between your links and imgs JS Fiddle
<a href="https://www.plos.org/open-access/">
<img src="//placehold.it/75x75?text=4" alt="Open Access" style="margin: 0px 20px" height="55px" width="70px"></a>
<a href="https://opensource.org/"><img src="//placehold.it/75x75?text=5" alt="Open Source" style="margin: 0px 40px 0px 40px" height="75px" width="75px">
That’s a combination of the white space you have between the tags, and text-decoration:underline for the links.
So either remove the white space:
<img …>
or set text-decoration:none for those links.
Put this all in table or div like this:
<table class = "tableStyle" align = "center">
<td>
<a href="https://www.plos.org/open-access/">
<img src="/images/Open.png" alt="Open Access" style="margin: 0px 20px" height="55px" width="70px">
</a>
</td>
<td>
<a href="https://opensource.org/">
<img src="/images/source.png" alt="Open Source" style="margin: 0px 40px 0px 40px" height="75px" width="75px">
</a>
</td>
</table>
Also use this css:
.tableStyle {
background-color:transparent;
}