Show Radio buttons side by side - html

I am working on Siebel Smartscript. I want to show the radio button side by side, but by default they are coming after a line break as shown below:
The html is dynamically generated via swt. The part of the section where radio button is present is below:
<swe:control id="SSQuestion">
<table valign="top" width="100%" cellpadding="2" cellspacing="0" border="0" class="AppletBack">
<tr>
<td width=20%> </td>
<td width=75%>
<span class="questLabel" align="swe:this.TextAlignment">
<swe:this property="DisplayName"/>
<swe:this property="RequiredIndicator"/>
</span><br>
<span class="scField" align="swe:this.TextAlignment">
<swe:this property="FormattedHtml"/></span>
</td>
<td width="5%"> </td>
</tr>
</table>
</swe:control>
The below is what the above is looking like at runtime:
<SPAN id=SSQuestionList><TABLE class=AppletBack border=0 cellSpacing=0 cellPadding=2 width="100%" valign="top">
<TBODY>
<TR>
<TD width="20%"> </TD>
<TD width="75%"><SPAN class=questLabel><SPAN id=s_2_1_7_0_d><B>Date of Birth<B></B></B></SPAN><SPAN id=s_2_1_7_0_r> </SPAN></SPAN><BR><SPAN class=scField>
<DIV id=s_2_1_7_0_ss>
<OBJECT style="HEIGHT: 49px" id=s_2_1_7_0 tabIndex=2997 classid=CLSID:07903935-5554-4827-87bf-f195bef987f7 width=500 height=20></OBJECT></DIV></SPAN></TD>
<TD width="5%"> </TD></TR></TBODY></TABLE>
<SCRIPT defer>
SWEWriteInnerHTML(this.document.getElementById('s_2_1_7_0_ss'),'<object id=s_2_1_7_0 CLASSID="CLSID:07903935-5554-4827-87bf-f195bef987f7" HEIGHT=20 WIDTH=500></object>');
</SCRIPT>
</SPAN>
This is the line which is selecting the area of radio button:
SWEWriteInnerHTML(this.document.getElementById('s_2_1_7_0_ss'),'<object id=s_2_1_7_0 CLASSID="CLSID:07903935-5554-4827-87bf-f195bef987f7" HEIGHT=20 WIDTH=500></object>');
But i am not sure how to alter it. I have tried css property inline, but to no avail. Please suggest.

The HTML you see is generated inside the Siebel HI application. It uses Active X controls to show the UI objects such as the radio button. I know of no way to alter the positioning of the options while remaining within the confines of Siebel HI. The newer Open UI framework generates standard HI for smart scripts which would in turn allow you to achieve your requirement.

Related

Indenting Text in HTML Email Template

I am attempting to place HTML in an email template of an older vendor solution that doesn't support modern HTML5 techniques. In the code sample (JSFiddle url below) if I resize the template and make it smaller the text falls to the next line without an indent.
Is there a way to make the text indent without a hard line break and indenting?
<div>
<table style="background:#8B0000 ;color:#FFF;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30">Test Email</td>
<td align="right"></td>
<td width="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30">
<p style="font-size: 10.5pt;font-weight: 700;color:#555">  Test.</p>
<div style="font-size: 10pt;color:#555">
<p>  There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td></td>
<td height="30"> </td>
</tr>
</table>
</div>
Working code sample: https://jsfiddle.net/wa1z4nvr/4/
Remove the ensp entity and give your paragraph a margin you like.
<p style="text-indent: 0; margin: 1em;">There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
It looks like right now you're using en-spaces as your indent  
This would create a behavior where the first line appears to be indented and the rest does not.
If you want subsequent lines of text to be lined up with your first line, then you're probably not looking for an "indent".
You can remove the   from both your paragraph and your "Test." text, and adding a padding-left:1em to those elements, or to the table row containing them.
The table containing your test text might look like this:
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30" style="padding-left: 1em">
<p style="font-size: 10.5pt;font-weight: 700;color:#555">Test.</p>
<div style="font-size: 10pt;color:#555">
<p>There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>

Different width on Chrome and Firefox on same screen

recently I find that new version of firefox is show width, significantly different from chrome
this is my table which show completely different in fire fox and chrome . Is there any idea for this case?
<table id="headtable" class=" tahoma">
<tr>
<td width="84">نام سرور</td>
<td width="62">CPU</td>
<td width="46">RAM</td>
<td width="34" class="tool-tip">نوع هارد دیسک </td>
<td width="79">فضا</td>
<td width="43" class="tool-tip">پهنای باند </td>
<td width="46" class="tool-tip">ترافیک ماهیانه </td>
<td width="59">دیتا سنتر</td>
<td width="69" class="tool-tip">کنترل پنل </td>
<td width="47" class="tool-tip">هزینه‌ی راه اندازی </td>
<td width="54">هزینه‌ی ماهیانه</td>
</tr>
</table>
<div class="hole" id="hole">
<table id="panels-compare" class="tahoma compare panels">
<tr>
<td width="66">ایران۷</td>
<td width="62">Xeon 3430</td>
<td width="46">۸ گیگابایت</td>
<td width="58">SATA</td>
<td width="81">2x500GB</td>
<td width="43">۱۰۰ مگابیت</td>
<td width="46">۱۰۰ گیگابایت</td>
<td width="59">پارس‌آنلاین / افرانت</td>
<td width="69">DirectAdmin</td>
<td width="46">۵۰,۰۰۰</td>
<td width="54">۳۵۰,۰۰۰</td>
<td width="">سفارش</td>
</tr>
</table>
</div>
Weird. That can't be the code for the image as displayed, so I'm going to take a guess... Maybe you missed a column, it looks like some are the same size and others are not. Or, maybe the sum of the td widths is greater than one if its containing elements, and the browsers are responding to the invalid state differently. Similarly, it may be that invalid html elsewhere on the page is behind this - if all else fails, ensure your markup is valid.
It all depends on the "clutter" a browser has.
Google chrome has "clean" UI, it doesn't take up too much space for its address bar, bookmark bar etc..
Whereas Mozilla too has its own way of displaying things.
So there is no standard that defines how much screen a browser should use for address bar, bookmarks bar, home button, back-front buttons, tabs etc..
So just leave it as there is not much you can do other than what you've already done to have a uniform size.

onClick in HTML, Looking for a way to make the link menu display on right click

So I'm putting together a website, and for some reason I decided to use a table for the header. The only issue with this, is that I wanted the whole section of the to be selectable on click. To remedy this issue, I used the simple onClick thing in HTML. Here's my code for the table:
<table cols="8" height="60px" width="600" class="tableheader">
<tr>
<td onClick="document.location.href='index.html';" class="tdlink">
<strong>HOME</strong>
</td>
<td class="tddot">
|
</td>
<td onClick="document.location.href='aboutus.html';" class="tdlink">
<strong>ABOUT US</strong>
</td>
<td class="tddot">
|
</td>
<td onClick="document.location.href='services.html';" class="tdlink">
<strong>SERVICES</strong>
</td>
<td class="tddot">
|
</td>
<td onClick="document.location.href='contact.php';" class="tdlink">
<strong>CONTACT</strong>
</td>
<td class="tddot">
|
</td>
<td onClick="document.location.href='scheduledeposition.php';" class="tdlink">
<strong>SCHEDULE<br>DEPOSITION</strong>
</td>
</tr>
</table>
The issue I'm running into is that whenever I right click on these items, they don't open up a link menu, but instead the standard blank-space browser right click menu. Is there any way to solve this?
I'm open to the idea of using jQuery or JavaScript, but in briefly looking I haven't found anything that would remedy this issue that I can even understand.
You have to use the oncontextmenu event to catch the right click. I think you'll also have to prevent the browsers default right click context menu.

How do I make this layout?

So my current layout is:
<div style="width:900px;height:500px;border:6px double #00c7ff;"><table cellspacing="1" cellpadding="0" border="0"
bgcolor="white" id="shell" height="500" width="900">
<tr height="50">
<td colspan="2" bgcolor="#cab0cb">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td>
</tr>
<tr height="50">
<td bgcolor="#cab0cb">
<table id="navigation" title="Navigation" border="0">
<tr><td><center><b><font face="arial" color="0094bd"><font size="5">Records</font></b></center><br><br><font size="2.5">No records set yet.</font></font></td></tr>
</table>
</td><td bgcolor="#cab0cb">
<table title="Content" id="content" border="0">
<tr><td><font face="arial" color="#0094bd"><b><font size="5"><center>Welcome to Ivory Forest Kennel</center></font></b><br><br><font size="2.5">We are a fairly new kennel on K9, specialising in the great Siberian Husky. Initially, we will be breeding and selling Huskies, bred from simple gamebred dogs. Our huskies currently specialise in Obedience, but we will seek further training later. Soon, we will also be breeding Yorkshire Terriers, also gamebred, so look forward to those!</font></font></td></tr>
</table>
</td>
</tr>
</table>
</div>
And Im trying to make it sort of like these:
http://i18.photobucket.com/albums/b135/silverfox13425/Decorated%20images/Dexterity_zps04ada334.png
http://i18.photobucket.com/albums/b135/silverfox13425/Decorated%20images/Siberians_zpsbe70e931.png
Which I could be going about it all wrong, to be honest, but it's working thus far.. My issue at the moment is my "records" section is too thin. And I cant figure out for the life of me how to make it wider. I have tried editing everything that says "width", and making my own width=x sort of command, but nothing seems to be working. No clue what I'm doing wrong here.
Here is your JsBin code
Well, I was not supposed to give you some suggestions on your layout.
But I must say
Your layout is really complicated.
You should not use too much tables, tables are just used to render some tabular data.
Try to use only <div> tags.
Please use some jsbin or jsfiddle like online tools to show us your problems.
Nesting of tables really creates complexities in your html code thus reduces its readability.
If you feel problems in designing your web page layout then I'll recommend these links to you. Please take a look.
http://www.learnlayout.com
http://www.tizag.com/htmlT/htmldiv.php
http://www.youtube.com/watch?v=68kiDajh1lg
http://gostats.com/resources/css-div-tutorial.html
Your code
<div style="width:90%; margin:auto;height:500px;border:6px double #00c7ff; vertical-align:top;"><table cellspacing="10" cellpadding="10" border="0"
bgcolor="#cab0cb" id="shell" height="500" >
<tr height="50">
<td colspan="2" bgcolor="#cab0cb">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td>
</tr>
<tr height="50">
<td bgcolor="#cab0cb" style="width:20%;">
<table id="navigation" title="Navigation" border="0">
<tr><td><center><b><font face="arial" color="0094bd"><font size="5">Records</font></b></center><br><br><font size="2.5">No records set yet.</font></font></td></tr>
</table>
</td><td bgcolor="#cab0cb">
<table title="Content" id="content" border="0">
<tr><td><font face="arial" color="#0094bd"><b><font size="5"><center>Welcome to Ivory Forest Kennel</center></font></b><br><br><font size="2.5">We are a fairly new kennel on K9, specialising in the great Siberian Husky. Initially, we will be breeding and selling Huskies, bred from simple gamebred dogs. Our huskies currently specialise in Obedience, but we will seek further training later. Soon, we will also be breeding Yorkshire Terriers, also gamebred, so look forward to those!</font></font></td></tr>
</table>
</td>
</tr>
</table>
</div>
Try this and change your Record field size needed.
<td width="20%">
DEMO

Gmail ignoring height in empty <td> cell (HTML Email)

I've just started using a new HTML email software (was using Campaign Monitor but now having to use a plugin within our CMS).
Our template uses some empty cells at the top with different background colors for aesthetic purposes.
When using Campaign Monitor these showed fine in Gmail but in the new software (eCampaign) Gmail is totally ignoring the height of the cells, making them all 1 pixel high.
I tried adding height="x" and style="height: x;" but neither seem to work.
I want to avoid using spacer gifs if I can.
Further down the email I've put in a tag but this makes the height too large then.
I've seen some suggestions of wrapping the in a tag but not sure if that will work.
Any suggestions?? Need an answer asap!
My code is as follows:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#edede9" style="font-size:1px; line-height:6; height:6;"></td>
</tr>
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#c4c3b6"><!-- --></td>
</tr>
<tr>
<td valign="top" height="1" colspan="2" bgcolor="#ffffff"><!-- --></td>
</tr>
</table>
The only way is to use a trans_dot.gif or other spacer image within the empty cells. It cant be done in any otherway.
So find or make a 1px * 1px transparent image and insert.
If a cell is without text or images it will collapse in 9 out of 10 email clients