alignment using CSS - html

I need to align a set of rows using style property
This is the HTML code that is being transformed using XSL
<span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier "><40 : item1</span><br>
<span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">40-80 : item2 </span><br>
What is needed is how to align items like
<40 : item1
40-80 : item2
currently it appears like
<40 : item1
40-80 : item2
is this possible using style property?
using Internet explorer version 6 & above

There is a char attribute for HTML td tags, however, it is not at all supported as far as I know.
This is valid HTML:
<table>
<tr char=".">
<td>11.10</td>
</tr>
<tr char=".">
<td>111.20</td>
</tr>
<tr char=".">
<td>15552.52</td>
</tr>
</table>
I have used this workaround in the past:
http://krijnhoetmer.nl/stuff/javascript/table-align-char/

use instead of spaces

sure it is possible. u can use
<div style="float: left; width: 50px">< 40</div><div style="float: left; ">:</div><div style="float: left; ">item 1</div>
<span style='clear: left'></span>
<div style="float: left; width: 50px"> 40</div><div style="float: left; ">:</div><div style="float: left; ">item 2</div>
or else you could try
display: table-cell;
it can be put in the styling.

white-space: pre; should do the trick and work in all browsers..
do you get this error in every browser or just in IE?
are there any other stylesheeds affecting these <span>-elements?
is it possible to change the xsl to get another markup?

many options:
If you can wrap range (ex 40-80) and item name (ex item1) in separate element, then define width for each.
Otherwise, specify white-space: pre so that whitespace preserved by the browser.
Don't forget to use Monospaced font so that each character each occupy the same amount of horizontal space.
example: Consolas, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace

Related

Font size not changing in HTML

So, after I tried all the answers in the forums over here, the font size of my webpage won't change. Here's what I currently have:
<font size="40px" face="Didot">Hello</font>
Okay, it will set to 40px, but if I try to make another one using 20px it won't change the font size:
<font size="20px" face="Didot">World</font>
Whole code for those who want to check for themselves
<html>
<font size="40px" face="Didot">Hello</font>
<font size="20px" face="Didot">World</font>
</html>
<font> tag is deprecated. ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font )
Use CSS styling instead. See the example below.
.size40 {
font: 40px/1.5 Didot, serif;
}
.size20 {
font: 20px/1.5 Didot, serif;
}
<span class="size40">Hello</span>
<span class="size20">World</span>
If you are looking for ways to do inline styling you can follow this approach
<html>
<div style="font-size:40px; font-family:Didot">Hello</div>
<div style="font-size:20px; font-family:Didot">World</div>
</html>
But I would recommend to create a separate css file and define styles there. And import those styles in your html using script tags
As said in the previous answer the source is deprecated but if you insists on wanting to try you can use the following:
<font face="Verdana, Geneva, sans-serif" size="+7">Hello</font>
<font face="Verdana, Geneva, sans-serif" size="+4">World</font>
If it still doesn't work, use CSS:
<p>Hello</p>
<p>World</p>
⠀
p:nth-child(1){
font-family: Didot;
font-size: 40px;
}
p:nth-child(2){
font-family: Didot;
font-size: 20px;
}

How to format Date to print in Capital letters

I have the below JSP code, which prints on page like
USE BY:APR/04/2017
Now I want it to be printed as
Use By:APR/04/2017
Though the value of label.global.useBy is "Use By" it is getting capitalized because of the style I have defined in CSS. I have done that to render the month in all CAPS. Else it was getting printed as
Use By : Apr/04/2017
Could you please suggest as to how can I Keep "Use By" as is and juts make month in caps, as:
Use By: APR/04/2017
<td class="contentArea"><bean:message key="label.global.useBy"/>: <bean:write name="details"property="expirationDate" formatKey="format.date.certificate" /></td>
Associated CSS
.contentArea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-transform: uppercase;
}
Thanks #Rahul Kapuriya,
I use SPAN tag inside TD like so,
<td class="contentArea"><bean:message key="label.global.useBy"/>: <span style="font-weight:bold; text-transform: uppercase;"><bean:write name="details"
property="expirationDate" formatKey="format.date.certificate" /><span></td>
Thanks!
"You are welcome" -Rahul Kapuriya
You can use <strong> tag so you don't have to add style font-weight:bold
Like this:
<td class="contentArea"><bean:message key="label.global.useBy"/>: <strong style="text-transform: uppercase;"><bean:write name="details"
property="expirationDate" formatKey="format.date.certificate" /><strong></td>

Why Text is not Colored when added a style element

Trying to add a color and Font family within a H1 tag together using style still it not works.Color property does not have any effect on my current line
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif"color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
Why Text is not colored?
Because you separate between css properties using " and it is wrong the style attribute written as follow style="" and inside the double quotes you should write you css properties and separate between them using ; like this
style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF"
Got a little typo there..
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>

IE adding extra HTML tags while rendering

I have following HTML markup as an input to be pasted onto IE browser in place of selected content on the browser:
<span id='fs_892_3006_0' class='ParaMarked' FactType='NonNumeric' onclick='OnSpanClick("fs_892_3006_0", event)' IsFactMarked='true'>
<fact id='892_3006_0' keyword=''>
<P style="margin: 0pt 0pt 10pt; line-height: 115%; font-size: 11pt;">
<SPAN style="font-family: Calibri; font-size: 11pt;">THIS IS A TEST CONTENT 1</SPAN>
</P>
</fact>
</span>
However, when the HTML is rendered, IE adds extra tags surrounding this HTML as shown below:
<p style="margin: 0pt 0pt 10pt; line-height: 115%; font-size: 11pt;">
<span style="font-family: Calibri; font-size: 11pt;">
<span id="fs_892_3006_0" class="ParaMarked" onclick='OnSpanClick("fs_892_3006_0", event)' IsFactMarked="true" FactType="NonNumeric">
<fact id="892_3006_0" keyword="">
</p><p style="margin: 0pt 0pt 10pt; line-height: 115%; font-size: 11pt;"><span style="font-family: Calibri; font-size: 11pt;">THIS IS A TEST CONTENT 1</span></p></fact></span></span>
I have tried below techniques to paste HTML onto browser, but gives same result:
Note: "markedText" is the javascript variable which contains the HTML input as mentioned above
1. pasteHTML(markedText) : http://msdn.microsoft.com/en-us/library/ie/ms536656(v=vs.85).aspx
2. Rangy library :
var sel = rangy.getSelection();
var range = sel.getRangeAt(0);
range.deleteContents();
var node = range.createContextualFragment(markedText);
range.insertNode(node);
Any pointers on this would be appreciated.
Thanks.
A p inside a span will probably not work, as it's a block level element inside an inline element.
Some browsers will "fix" the issue by wrapping the inline elements in a block level element (default a 'p') and continue with the rest of the markup.

Doctype issues possibly messing up line-height and line-breaks in IE

I seem to be having problems with declaring doctypes (possibly) in IE and FireFox.
This is the code that I'm having the issues seen in the screenshots with:
<div id="contact" style="position:absolute; left:81px; top:2440px; width:639px; ">
<span class="contact_header">Getting in touch is easy
</div>
<div style="position:absolute; left:80px; top:2500px; width:320px; ">
<br><span class="contact_title">email me:</span></br>
<br><span class="contact_links"><a class="white" href="mailto:hello#superallan.com?subject=Hello superallan!&body= "> hello#superallan.com</a></span></br>
<br><span class="contact_title">tweet me:</span></br>
<br><span class="contact_links"><a class="white" target="_blank" href="http://twitter.com/#!/superallan"> #superallan</a></span></br>
<br><span class="contact_title">phone me:</span></br>
<br><span class="contact_links"> +44 (0) 7540 308 682</span></br>
</div>
<div style="position:absolute; left:400px; top:2500px; width:320px; ">
<br><span class="contact_title">write to me:</span></br>
<br><span class="contact_address"> 11 abbeyview</span></br>
<br><span class="contact_address"> crossford</span></br>
<br><span class="contact_address"> fife</span></br>
<br><span class="contact_address"> scotland</span></br>
<br><span class="contact_address"> united kingdom</span></br>
</div>
This is my current doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html lang=en-us>
This is the CSS for the section:
.contact_title {
font-family:"FairfieldLTStd55Medium", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
.contact_links {
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
.contact_address {
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif;
font-size: 18pt;
line-height: 22pt;
color: #FFF;
}
This is how it renders in Firefox and IE.
http://i.stack.imgur.com/l8h4q.jpg
When I change the doctype to strict it still looks fine in FF but IE makes the line-heights even greater.
Any ideas? Or possibly - how to fix it just for IE as it works fine in eveything else...
I note that you're using pt measurements for your font-size and line-height styles.
Note that pt is intended for use with printed pages, and is not rendered accurately on the screen. If you want a pixel-perfect accurate font size on the screen, use px instead. (You can also use em or % for relative measurements, but it looks like you're intending to use a fixed size measurement, so px is the one).
For more info, see this page: http://css-tricks.com/css-font-size/
To quote from the relevant section of the linked page:
Just like how pixels are dead-accurate on monitors for font-sizing, point sizes are dead-accurate on paper. For the best cross-browser and cross-platform results while printing pages, set up a print stylesheet and size all fonts with point sizes.
For good measure, the reason we don't use point sizes for screen display (other than it being absurd), is that the cross-browser results are drastically different.
...which does sound like exactly the symptoms you're seeing.
Hope that helps.