Netsuite Advanced PDF footer centering issue - html

I am customizing forms in NetSuite and have gotten everything to work as I would want, except the footer. For some reason the text-align: center function is working based on the number of characters in the row of the footer, rather than the center of the page. Below are images of my code and print examples that show the error better. The only difference in the code between footer code images 1 and 2 is that I removed the word "number" in row 55 to depict the centering is based on characters.
Footer Code 1
Footer Print 1
Footer Code 2
Footer Print 2

If you were to show the borders on your tds you'd get a better sense of what's going on. Basically you are not providing hints for the td and table sizes so the normal table width processing is happening. ie. the tables will only be wide enough to hold the text so they appear to be text size based.
Also I suspect you have a lot more markup than you need. The following will give you what I think you are looking for. Note that you may want to play with padding to get the correct left and right alignments.
<macro id="nlfooter">
<hr />
<table class="footer" style="width: 100%;">
<tr>
<td align="left" colspan="4">email</td>
<td align="center" colspan="6">Phone</td>
<td align="right" colspan="4">Page info</td>
</tr>
<tr>
<td align="center" colspan="14">
<b>Thank you</b>
</td>
</tr>
</table>
</macro>

Related

Table construction: Very Simple Beginner's Question

I have just begun learning elementary 'coding' (HTML) and I'm stuck on a table my teacher presented us for the long weekend (note that I'm on vacation so this is not counting towards any degree and I'm not seeing him until Tuesday). I gather that it's probably a very straightforward solution but I've been wrestling with it since the afternoon.
The linked-to image file shows the table he wants us to construct using nothing but HTML (no CSS). I'm supposed that there are those who'll descry this as not being modern technique but I imagine it wouldn't be bad to know how to at least achieve this using straight-up HTML.
The top row is one long box (say it has one unit of height), the second row from the top comprises two boxes of three units in height, the third from the top row is another long, one-unit high box on top of the bottom-most, one-unit-high five boxes, each of equal size.
The boxes are all empty of data though he drew two large X's in the large boxes][1] to show that THOSE cells would have 'X' placeholders and not be blank. [1]: https://i.stack.imgur.com/LK7oJ.png
The fledgling HTML code I've managed to come up with is this:
<html>
<head>
<title>Under the Table</title>
</head>
<body>
<center> <h2>Table Example</h1></center>
<center>
<table border="3">
<tr>
<th colspan="5"> </th>
</tr>
<tr>
<td colspan="2.50" height="100"; width="100"><center> </center></td>
<td colspan="2.50" height="100"; width="100"><center> </center></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
</tr>
</table>
</body>
</html>
Run the code and you'll see that while everything seems fine the second row with the triple-height boxes are compressed, leaving a large space in the right-hand part of the row. Just run the code and you'll see my issue.
Okay, so to summarize and state it explicitly: I am unable to create a table with eight empty boxes and two large (triple-height) boxes with a single character within them using nothing but HTML (I probably couldn't manage by any other means either but still). Any advice based both on the desired output (picture) and my last failed attempt (whose two large boxes in the second row are too small horizontally and leave an empty non-cell space)?
NB: I'm on vacation and this is not a degree course. Because I'm on additional holiday for a long weekend I was hoping for some input from people who know about markup language (and programming in general). Thanks for any help.
So the colspan argument does not accept a decimal. What you can do in this case is to simple multiply your columns by 2 so you get 10 for the first and third row which means the second row would be 2 instead of 2.50. You'll however probably not achieve a very good end result with that either since your 4:th will only be 50% (10% * 5) in the code you have.
I really don't want to give you all the anwers here if this is for school but you can play around with it if you want to see what happens.

is there a work-around to make rowspan work in MS browsers?

I have a webpage at http://bikepaths.com/Armstead/GBA1.html , and I have set up an HTML table to arrange text and pictures using rowspan such that the first column has a small amount of text above a tall picture, while the second column has a tall picture above a small amount of text.
<table>
<tr>
<td>George's first memory of note was ... </td>
<td rowspan="2"><img src="image/IM-GBA1885.jpg" height="440" width="280"></td>
</tr>
<tr>
<td rowspan="2"><img src="image/IM-JBA4-GBA.jpg" height="400" width="280"> </td>
</tr>
<tr>
<td>Also he recalled watching his half brother, James Benson Armstead IV <i>[on left]</i>, go through .... </td>
</tr>
</table><br>
So 3 rows, with rowspan=2 on each of the picture cells.
This displays as desired in both Firefox and Chrome, but the MS browsers I have tried (IE11 and Edge) both display it as a simple 2-row table, leaving massive amounts of space above and below each text cell.
I know MS should be banned from creating browsers until they learn what 'following standards' means, but until that happens, is there a workaround to make this display properly in IE and Edge?
<table style="table-layout:fixed">
<tr><td></td><td></td><td></td></tr>
<tr><td colspan="3">three colunms width</td></tr>
<tr><td colspan="2">two columns width</td><td>one column</td></tr>
<tr><td colspan="1">one column</td><td colspan="1">one column</td><td colspan="1">one column</td></tr>
</table>
note that the sum of the colspan attribute values or the sum of the number of td elements in each row equals the number of td elements established by the first (hidden, because the td cells are empty) row.
go to validator.w3.org/nu and copy and paste your markup into the direct input form and then press the validate button.... the w3 validators can detect where the number of td elements and the sum of colspan attributes does not match.

HTML Table with images

so i am currently re making the site for my university's drama department and i want to add 3 images side by side (with spacing between them). They also need to have captions. But the caption needs to have a header (that is styled differently than the caption itself) followed by the caption itself. having looked around here and other places i figured i would be able to do this using a table since formatting size would be easiest this way. I have been at this portion of the site for almost 1 month and have tried numerous other methods (divs, tables, etc.) I was wondering if someone else has done something like this and would be able to impart some advice. The site currently is located here: drama site. Any help would be appreciated (i hope this follows the guidelines, first time asker)
Edit: The following is the portion of the code i need help with:
function windowSize() {
var w = var w = document.getElementById('body').clientWidth;
document.getElementById('newsTable').style.width = w + 'px';
document.getElementById('newsItems').style.height = document.getElementById('newsItems').clientWidth + 'px';
}
<body id="body" onload="windowSize();getCurrentPage();" onresize="windowSize()">
<table id="newsTable" cellpadding="0" border="0">
<tr>
<td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">1</td>
<td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">2</td>
<td id="newsItems" align="center" background="http://i.imgbox.com/5GLGmmDE.gif">3</td>
</tr>
<tr>
<td id="newsItems" align="center">4</td>
<td id="newsItems" align="center">5</td>
<td id="newsItems" align="center">6</td>
</tr>
</table>
</body>
I don't want the pictures to be as big as they are in the link, i would like them to be a bit smaller. I would also like some room between them. Currently when the page gets bigger the image starts to repeat. If i took the repeat off then it would have blank space where it would normally repeat
Probably the nicest option would be to use bootstrap. It can do a lot of the columner work for you. But if that sounds a little complex, here is a simple fiddle with three images side by side.
http://jsfiddle.net/44uv9a2m/
I'm just wrapping the images and their captions in divs, then giving them a fixed width.
.oneThird{
width:30%;
float:left;
margin:.5%;
}
.oneThird img{
width:100%;
}
<div class="oneThird">
<img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
<p>Caption</p>
</div>
<div class="oneThird">
<img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
<p>Caption</p>
</div>
<div class="oneThird">
<img src="http://www.photosnewhd.com/media/images/picture-wallpaper.jpg"></img>
<p>Caption</p>
</div>
* Edit *
This is a basic bootstrap example.
http://www.bootply.com/n6AdJPYIe3

HTML/CSS table display problems

I'm messing around with the aesthetics of a site I'm building and have been left scratching my head on something that looks like it should be simple, or so I thought.
I am using a table to place the content of my the site into, and when I run it through my local host (Using XAMP) the scale of table <td> tags is how I want it, but when I host it through my godaddy account the <td>s in my main content <tr> are scaled differently (seems to be influenced by the header row).
Here's the link to my current page and you'll see the problem. (BTW the site is not finished so any spelling mistakes and stuff like that feel free to ignore :))
http://www.sittingducksfc.co.uk/
So how would I go about creating evenly sized <td>'s within that row? as you can see the furthest right <td> is squashed to the same scale as the loginbox at the top. I have been fiddling with it for a while but I'm probably missing some simple css but I haven't found any previous question with the same problem.
Regards
Mike
So the problem appears to by your stylesheet... You have the three <td> which all have the width of 33%
I am using Google Chrome 31.0.1650.63m and it shows up fine but other browsers may not, i would suggest to do the following change
<td colspan="1" style="background-color:white;text-align:center;width: 30%;height:30%;">
I would also suggest using a stylesheet as opposed to editing the style in-line
Hi all thanks for your responses.
From trail and error i have gone for a different approach and stacked multiple tables into my main div and that allows me to specify the particular widths of each td within that particular table.
From further investigation it can also be seen
here and i apologize for a repeat question.
Here is my example code.
<div>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="80%"></td>
<td width="20%"></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="33%"></td>
<td width="34%"></td>
<td width="33%"></td>
</tr>
</table>
</div>
This can be stacked many times without each table affecting the other.

HTML table column width problem

<table width="825" border="0" cellspacing="1" class="tableLines1" cellpadding="0">
<tr>
<td align="left" valign="middle">Account / BIC</td>
<td align="left" valign="middle">Name</td>
<td align="left" valign="middle">Email Address</td
</tr>
<tr>
<td ><%=Data.getAccount())%></td>
<td ><%=Data.getName())%></td>
<td width="250px"><%=Data.getEmailAddress())%></td>
</tr>
</table>
I have the following table. This data object get populated from database. The problem is when email address gets bigger the width of table also increases. For example
emailAddress = lolol#ghgg.fdg, jjjjjjoj#hiuh.com, jojo#hsc.comddddddddddddddddddddddddddddddddd
then html intelligently breaks it from spaces and make three two rows like this.
lolol#ghgg.fdg, jjjjjjoj#hiuh.com,
jojo#hsc.comddddddddddddddddddddddddddddddddd
but what i want is that if emailAddress size increases a certain value table size i.e column width should remain constant.
lolol#ghgg.fdg, jjjjjjoj#hiuh.com,
jojo#hsc.comdddddddddddddddddddddd
ddddddddddd
To be more specific i want the data to be displayed as shown above!
Can anyone please guide me. Thanks !
Edited : I want html to intelligently decide the column widths itself. Just not itself increase the table width from the specified value !
Use this CSS rule: word-wrap: break-word;
break-word means the text will wrap to next line.
word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
you can try wrapping your email address in a div with overflow set to hidden or scroll
<td width="250px"><div style="overflow:hidden; width:100%"><%=Data.getEmailAddress())%></div></td>