align text

[Dennis_Gull]

hey, Im currently have a td and inside that td I got two text fields that I want on each side (right and left) but I cant get the text to align with a normal p tag
this is what it looks like now:

<td width="400"><p align="left">text 1</p><p align="right">text 2</p></td>

this is bugging me a lot because I cant use td's at this place so I would appreciate if someone could help me out here :)

[Twey]

Ugh, presentational markup! This can't be done in HTML anyway, you need CSS and float:
td.bothsides {
width: 400px; // but, pixel measurements are bad!
}

td.bothsides p {
width: 46&#37;;
margin: 1%;
}

td.bothsides p.left {
float: left;
text-align: left;
}

td.bothsides p.right {
float: right;
text-align: right;
}
<td class="bothsides">
<p class="left">
text 1
</p>
<p class="right">
text 2
</p>
</td>

[alexjewell]

this is bugging me a lot because I cant use td's at this place

Thank God. Would you like how to do this in div's instead?

[Dennis_Gull]

Thanks for the reply, the code you provided works when I use a td tag but after i made this post I changed everything to a div tag =/


Thank God. Would you like how to do this in div's instead?

actually I was just going to write that :P
Im working with ajax at the moment and Im making a suggest box under the search field but I want some of the info to be on the right side (like google suggest) and all I have is a div tag and then I use innerHTML to place the data like this: (ignore class="none" its because the box is inactive)


<div id="search_bar" class="none"></div>

and in the innerHTML it looks like this (cleaned from scripts):


looping...
<div>text 1 , text 2 (should be align right), text 3 (should be align right)</div>
looping...

The reason I didnt place text 2 and 3 in div tags is because div tags take up a new row but then I remembered that I could use display: inline; but heres the funny part, if i use that option the align right somehow doesnt work... :mad:

[Twey]

Use float like I did. Inline elements can't have text-align; you need a floated block-level element.
then I use innerHTMLinnerHTML is non-standard, destroys event handlers, leads to ugly, markup-dependent code, and doesn't work in XHTML. Avoid it.

[Dennis_Gull]

isnt innerHTML the only way to update parts of the page with help from with ajax?

[Twey]

Of course not. Use the DOM methods instead.

[jscheuer1]

Twey is a bit extreme on innerHTML. He is so good at most other things, we forgive him. One must be careful with it though, just as one must correctly use any other object in javascript, with awareness of its side effects and limitations.

[Twey]

There are times and places where innerHTML is necessary. However, this is not one of them, and its limitations are such that it should be avoided wherever possible.

[Dennis_Gull]

Thanks for all the replys I got everything to work now with float, it looks like this:
http://img238.imageshack.us/img238/9131/untitled1na2.gif

I will also take a look at the link about DOM you gave me jscheuer1, I followed some tutorials on sitepoint before I read the book about ajax and they said that DOM often were slower then innerHTML so I never really took much of an interest in DOM.
But isn't it almost the same thing just that you create tags with createElement?

edit:
found a link with the benchmark on the different methods but maybe it doesn't matter when its such a small functions we're talking about.
http://www.quirksmode.org/dom/innerhtml.html

[jscheuer1]

There are times and places where innerHTML is necessary. However, this is not one of them, and its limitations are such that it should be avoided wherever possible.

The time and place part is a matter of opinion, innerHTML need not be necessary, to be used well. I see nothing inherent in this particular phase of this particular project that makes it suitable in any specific way either to DOM or to innerHTML methods.

[Twey]

And thus the DOM methods win by virtue of being standardised.

[Trinithis]

I like the DOM way more than innerHTML. This is a prime example where (generally) more code executes faster.

[Dennis_Gull]

I read the mozilla article about DOM and I understand how it works now, its quite impressive stuff you can do with. But would it make any difference on my question about the align? I still cant use td's because I want each line to come directly below each other without any space (Like I currently have with the innerHTML) so wont my outcome be the same in this situation?

PS:
The article (http://developer.mozilla.org/en/docs/index.php?title=Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces&printable=yes)

[Twey]

Except that your code will actually be valid (i.e. will work, barring browser bugs).

You can use tables here, actually: the list you've detailed is tabular data of a sort, so there's no problem semantically, and the space can be removed using CSS.

[jscheuer1]

My intent is that you will take the below information, and that provided by others, and make you own choice in any given situation about innerHTML vs. the DOM.

It really doesn't matter which you use unless, as Twey says, a browser bug prevents the DOM method from working out for you. The tutorial I cited is geared toward tables (I chose it because you were dealing primarily with tables in the thread where I mentioned it), but any HTML element may be created and inserted, as well as text nodes. Once one is familiar with DOM methods, it is fairly easy to code with them. However, it runs the risk of not working out in some browsers, and for involved insertions, is almost always a bit more complicated than innerHTML. The DOM has the advantage in being about guaranteed of being forward compatible (will work for a long time to come in future web formats like XHTML), but may not be backward compatible. Additionally, it is my opinion and that of many others that innerHTML will continue to be supported in HTML based pages virtually forever, even though it isn't a part of any standard. The innerHTML method may not work in true XHTML, but only because it is not required to. That means that browser developers may exclude it from true XHTML, not that they have to, and that it will work on a page with an XHTML DOCTYPE as long as that page is served as HTML, as the majority currently are.

[Twey]

[DOM methods run] the risk of not working out in some browsersOn the contrary, the DOM methods are standardised and thus should work in any browser. innerHTML, on the other hand, is not.
and for involved insertions, is almost always a bit more complicated than innerHTML.Not necessarily, especially with a simple builder function. innerHTML can be much more complicated, even if the code is shorter: it's necessary to consider all the appropriate escapings, then what markup language one is using (the code has to change for each, although of course only HTML is currently thoroughly supported [there are a few browsers that support innerHTML for XHTML though]), then one must consider all the other code affected by an assignment... for example,
<form onsubmit="this.innerHTML += '<div></div>';">... will actually clear the values of all the form elements when onsubmit is called, because it will inadvertantly destroy and recreate every element inside the <form> -- a practice that's obviously theoretically considerably more costly than just performing the intended operation, which is to append a div element to the form. As things stand, innerHTML has been tuned so much that it actually ends up being more efficient, but don't expect that to last.
The innerHTML method may not work in true XHTML, but only because it is not required to.No, innerHTML is unsupported in XHTML because XHTML has no former versions to keep compatibility with, so browser developers can finally drop ugly, non-standard features like innerHTML that cause bad coding practices :p In my opinion, though, there should be an XHTML-parsing function to replace it that takes a string of XHTML and returns a tree of nodes or a document fragment, because innerHTML does have its uses, and this would replace them whilst eliminating all the potential problems I can think of (except for producing ugly code, but that's less of an issue).

[Dennis_Gull]

I dont want to drag this thread out but Im just curious how to remove the space between the rows in a td?
I already tried:

table{margin:0;padding:0;}
td{margin:0;padding:0;}
tr{margin:0;padding:0;}
none of them worked.

[Twey]

I think you need cellspacing="0" cellpadding="0" on the table as well.

[Dennis_Gull]

thanks, it worked.. although IE 6 still give a 1 px cellpadding, maybe because its a input field on the upper row and a text field on the below.

[jscheuer1]

Except that your code will actually be valid (i.e. will work, barring browser bugs).


On the contrary, the DOM methods are standardised and thus should work in any browser.

Arguing with yourself now, eh? :rolleyes:

[Twey]

Huh? How did you come to that conclusion?

The code will be standards-compliant, thus should work -- barring browser bugs. innerHTML is not standards-compliant and thus not only is there no guarantee that it will work, it actually shouldn't work in a strict browser.

Of course browsers that strict are few and far between, but that's the theory, and even the less-strict browsers with which we work need have no qualms about dropping support altogether if they feel like it (which is what's happened with XHTML).

[Dennis_Gull]

Okay, I've actually started using some DOM. I found out yesterday that you could get the offsetTop / left and I had to use it to place the bar under the input field. I also took the time to learn how to create the div field with DOM and then give it a style.

The only problem now is that IE give me the wrong offsetLeft (works perfect in FF and opera)

[Twey]

Read this page (http://www.quirksmode.org/js/findpos.html) on quirksmode.org.

[Dennis_Gull]

thanks, that code is perfect... and finally my ajax application is done :)

[jscheuer1]

I dont want to drag this thread out but Im just curious how to remove the space between the rows in a td?
I already tried:

table{margin:0;padding:0;}
td{margin:0;padding:0;}
tr{margin:0;padding:0;}
none of them worked.


I think you need cellspacing="0" cellpadding="0" on the table as well.


thanks, it worked.. although IE 6 still give a 1 px cellpadding, maybe because its a input field on the upper row and a text field on the below.

Instead of messing with cellpadding and cellspacing, try:


table {
border-collapse:collapse;
}
td {
margin:0;
padding:0;
}

The margin and padding on the table and on the tr shouldn't have any effect upon the appearance of the cells.

[Dennis_Gull]

thanks, haven't tried it because I use an absolute position now (will always be correct now) but hehe I actually want to ask one more thing :D
is it possible to remove the previous input box thats appear below the text input field because It will come over the ajax suggest application i made