In the following URl, the bottom right corner text is not aligned to the right property in iphone safari browser.
link
But it is aligned properly in safari browsers in pc, even in other browsers (e.g. ie, firefox) are also ok.
The code is listed below:
<div id="footer">
<br />
<div style="float: left; letter-spacing: 3px; font-family: PMingLiU; font-size:18px;">
請親臨本店選購 香港德輔道西94號
</div>
<div style="float: right; letter-spacing: 3px; font-family: PMingLiU; font-size:18px;">現購物滿港幣3800元可享專人送貨服務 查詢電話:25483136</div>
<br /><br />
<div style="float: right; letter-spacing: 2px; font-family: PMingLiU; font-size:16px;">只限於香港九龍港鑯沿線</div>
<br /><br /><br /><br /><br /><br />
Do you have any idea on it?
Thanks.
I think this might be a font issue with Mobile Safari. The numbers on Mobile Safari come out looking Times-ish whereas on normal Safari they look Helvetica-ish and the spacing is a little different in the numbers. A bit of experimentation yields a somewhat odd workaround, wrapping the numbers in a <span> moves them to the right side (but moves the extra space to the right of the colon):
<div style="float: right; letter-spacing: 3px; font-family: PMingLiU; font-size:18px;">現購物滿港幣3800元可享專人送貨服務 查詢電話:<span>25483136</span></div>
And an example: http://jsfiddle.net/ambiguous/AydWp/4/embedded/result/
Not really a solution but possibly an improvement.
Related
I have an animated .gif that is 1200px wide in total, but I'd like to scale it down to 600px wide for a clearer image in 120dpi. Below is the code that's in the message; it's displaying in the right width but the wrong height (as you can see there's no height defined, and it's not auto-scaling the way I'd like it to).
Outlook 2019 is the only email client in which it's displaying wrong. It looks fine in all other email clients. Also, the other images (.jpgs) in my message are displaying exactly the way I want them to, and they contain the same inline CSS.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0; text-align: center"><a href="https://www.lookoptic.com/collections/screen-products" target="_blank"> <img alt="FRAMES FOR THE FAMILY | Make protecting your eyes from harmful blue light a family choice. With matching frames for adults and kids, we keep it easy for the whole family to keep their eyes healthy even while spending more time in front of screens than ever." border="0" src="https://d3k81ch9hvuctc.cloudfront.net/company/HQd5zH/images/57fbdbba-e232-441f-abc2-098444d1525f.gif" width="600" style="display: block; border: 0px; outline: none;
width: 100%; height: auto; max-width: 600px;background: #fff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" /></a> </td>
</tr>
</tbody>
</table>
Any ideas? Thanks in advance.
Outlook will ignore the style sheet for your image. So you can use the height and width tags to direct the behavior of Outlook and allow modern email clients to operate the way they need.
If your animated image on Outlook is supposed to be 600px x 600px, do this:
<img src="#" width="600" height="600">
Then for the other clients, add in an inline style sheet (like you did in your example.
<img src="#" style="width: 100%; height: auto; max-width: 600px;" width="600" height="600">
This will work for any image format supported in Outlook.
Good luck.
I'm creating an email signature template for our team. The email signature has a profile image of a team member above a table row with a dark background; however, Gmail is creating a space between bottom of the image and the section underneath. I've tried virtually everything that I could find on stackoverflow, email monks, etc.
The table's cellspacing, cellpadding, and border have been set to 0. display:block hasn't worked, setting the font-size to less than 2px hasn't either.
Any help would be appreciated.
<tr>
<td width="202" rowspan="3" valign="bottom" style="vertical-align: bottom;">
<div valign="bottom">
<img
src="IMAGEURL.png"
align="absbottom"
width="202"
height="242"
border="0"
style="display: block; line-height: 0px; font-size: 0px; border: 0px; padding: 0px; vertical-align: bottom !important;"
/>
</div>
</td>
</tr>
Can't replicate unfortunately but what happens when you remove the div?
There really isn't any need for the div in there to be honest, you may as well remove it anyway and the align="bottom" should only be set on the table cell as the image will inherit that property by default.
To be honest, it would be good if you could post your entire code you're using as it'll give us context of what you're working with. Even if it's with placeholder content like you already have done with the image path.
I'm using ZKOSS 6.5.3 framework with Eclipse and Maven.
In my app, I've written a simple zul file as follows:
index.zul
<?page title="Test Exam" contentType="text/html;charset=UTF-8"?>
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<window id="test_exam" title="Test Exam"
apply="zkoss.controller.LoginComposer"
style="padding: 0px; margin: 0px; border:1px solid red; height:500px; width:900px; display:block">
<borderlayout id="main">
<north>
<vlayout style="padding:5px">
<label id="testExamTitle" style="display:block">Exam Title</label>
<label id="testExamDesc" style="display:block">Exam Description</label>
<textbox style="border: 1px solid blue; display: inline-block;" tabindex="1" type="text" width="100px" height="100px"></textbox>
</vlayout>
</north>
</borderlayout>
</window>
</zk>
I've deployed this app on Tomcat 7(Eclipse). When I run the app & try to access this zul file in Chrome, instead of being rendered as a page with 2 Labels and 1 Textbox, it is being loaded as the HTML file itself as if I'm just opening the zul file in browser without deploying on server. It works perfectly on Firefox.
I've visited this link whereas the similar problem is raised, but that also does not contain any solution.
Can anyone help me solve this issue?
Lately me and my QA buddies are trying to find a way to make Selenium IDE (v2.2 with FireFox v22) type a text into NicEdit's textarea, but without success.
We took a look on the internet for the past few days, and so far we discovered, among other things, that NiceEdit is not an iFrame (I think many here already know that).
We're not using code nor any other webdrive, just Selenium IDE, which makes things a bit harder, I guess.
We've tried xpath, class, id etc... no success.
But in these cases, the Find button in Selenium highlights the area.
So, is there a way to make Selenium IDE type in the NiceEdit's textarea without code?
Here's the html code of NicEdit's textarea provided by FireBug.
<div contenteditable="true" class="span12 " data-bind="html: Conteudo" id="conteudo" style="background-color: rgb(255, 255, 255);">
</div>
And the rest before it:
<div id="editorPanel" style="width: 100%;" unselectable="on">
<div class=" nicEdit-panelContain" style="overflow: hidden; width: 100%; border: 1px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239);" unselectable="on">
<div class=" nicEdit-panel" style="margin: 0px 2px 2px; overflow: hidden;" unselectable="on">
</div>
</div>
<div id="conteudo" class="span12" contenteditable="true" data-bind="html: Conteudo">
</div>
EDIT: I've found out that NicEdit turns the textarea into a div, so Selenium is not able to focus on the area.
Anyone has any sugestions about how can I make Selenium put some text on NicEdit?
Thanks!
<tr>
<td>storeEval</td>
<td>this.browserbot.findElement("id=someID").innerHTML='fillerText'</td>
<td></td>
</tr>
Does the above work for you?
I am creating an ordered list within a webview and I want to remove the indentation from the list, i.e. have the list aligned with the first paragraph. Here's HTML:
<body style="font-family: arial""font-size:18">
<p>First paragraph.</p>
<p>
<ol style="margin-left:0px">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
Notice that with the margin-left:0px, the webview still indents the list by about 17 points. If I say margin-left:-17px, I can make it work with a hack but would rather not as it seems more like I'm doing something wrong with the construction of my HTML.
Can anyone see any problems with it?
Updated HTML - Still doesn't work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
ol {
padding-left: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<p>
<ol>
<li>List item 1.</li>
<li>List item 2.</li>
<li>List item 3.</li>
</ol>
</p>
</body>
</html>
I'm using iOS 5.1 on iPhone 3GS
You can archive style like that with :
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Try This....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
.flush-left {
padding-left: 25px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>
<ol class="flush-left">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
</html>
A couple of other pointers. Test your stuff out in test files in html on your desktop and load them into Safari and the iOS Simulator (Drag html file onto safari open in simulator).
But then you can use Regular Safari Debug tools to examine the html and css. or Firebug in Firefox.
Also, when in doubt www.w3schools.com ... :)
Perhaps I'm a bit late for your needs – I just came across this.
I only noticed this on my iPhone, and not my iPad, nor Safari on the Mac. I found that a bit strange that this issue would only be in the one version of Safari, and not all. I wasn't happening in Chrome either.
When looking in the Chrome developer tools, I noticed that the user agent stylesheet had added a number of -webkit prefixed styles, all to do with margin and padding:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
When I first saw that, I was wondering if that was the issue, but, it was late, and I had to take a sleep break. Today, I tackled it again, but forgot about these styles. I looked around, and came across #Remover's question. But, setting a specific pixel-based margin or padding didn't sit well with me.
At some point, I decided to narrow my browser window in Chrome, and low and behold the issue was there as well, only when I narrowed it to be close to the width of an iPhone. So, this isn't just an iOS issue. It's webkit.
I looked again at the styles in the dev tools, and saw again the -webkit styles, and the 40px on -webkit-padding-start. I played around with my css, and that was indeed the culprit.
I then added the following to my stylesheet:
ol {
-webkit-padding-start: 2em;
-ms-padding-start: 2em;
-moz-padding-start: 2em;
-o-padding-start: 2em;
padding-start: 2em;
}
I did some quick research, and it looks like only -webkit and -moz are using padding-start, but I added the rest, just in case they pick it up – though, now that Opera has switched to webkit, -o probably isn't needed.
In my case, I used 2em, as that worked with my style. Not sure if 2em will work across the board or not.
Edit
I should have also mentioned that it probably only shows up on small screens because it's set at 40px. In my design, my base font-size at full screen is 23px, and at 480px and below is 10px, which is quite a bit of a difference.
If you merely assign a padding of zero, the bullets go off the screen. I found that the following worked perfectly for my webview
ul,ol {padding-left: 20px;}
li {padding-left:2px;}
isn't it
<ul><li></li></ul>
not <ol> ?
also it looks the you might have a syntax error on your style for your body tag
:)
~ Dan