I have a page where I am trying to display full name (firstName lastName) on the browser.
In my JSP, I have
<span>
<c:if test="${someCondition1}">
<c:out value="${firstName}">
</c:if>
<c:if test="${someCondition2}">
<c:out value="${lastName}">
</c:if>
</span>
Now there are some code indentation spaces inside the span element.
The issue is that in Firefox, the code spaces are not collapsed, while IE collapses them.
Also I tried using the various CSS white-space properties ;normal, wrap, -moz-pre-wrap, etc
But this does not seem to be working for some reason.
Also I might not be able to use the white-space property to fix this, since I can have multiple spaces within the firstName/lastName as well which should be displayed as it is e.g. first Name can be
"my First Name"
Thus using CSS white-space on the span element to collapse multiple spaces would be wrong.
You can replace your spaces with
firstName = firstName.replace(" ", " ");
With this you don't need your CSS white-space anymore.
Firefox should be collapsing the spaces but if not try white-space-collapse: collapse;. This is a CSS3 property that explicitly gives the behaviour you want.
EDIT: Wait, I'm confused. In what scenario would it ever be reasonable to use more than 1 space between parts of a name? I'm not aware of any human language where that is acceptable. Is this some kind of alien language?
Try this,
<span><c:out value="${someCondition1?firstName:''} ${someCondition2?lastName:''}"/></span>
have everything in single line.
Do you see the rec tangled red text box which is under "Acil Durumda Aranacak Kişi",
I want that text box just near "212" since they are both for telephone number...
How can I do that?
alt text http://img529.imageshack.us/img529/1058/rrrrzh.jpg
PS: All the html text boxes, and inputs are created by c# code...
Use the nowrap on the TD tag, eg
<td class="TaskForField" valign="top" nowrap="nowrap"> ... </td>
you can use the css property float:left; for both of them even if I suggest you first to give us some code.
The easiest way would be to add a text value of " " (i.e. an empty space) to the label immediately before the 2nd telephone control.
This should add a non-breakable space into the span element (the .net label) before the input element (the 2nd telephone textbox control) which would cause it to display in the browser and occupy the same space as the other labels - thus aligning the textbox control with the others.
Failing that you could define a class in your stylesheet with a margin-left property and then apply this to your textbox using the cssClass property.
In a table of mine I have the table header, th which have two separate links in each cell. Each of them wrap to a new line which I don't want. If I remove all the style sheets it doesn't fix it. If i disable style sheets in the browser it fixes it but there are no inline styles that would cause the wrapping. If they are non-hyperlinked words they don't wrap. If I use the td tag it doesn't fix it either. There is too much code all over the shop to post but all I want is in a th cell a word with an image next to it with a different hyperlink.
Here is a quick bit of code. Although doing nowrap does work in this quick look it doesn't work in the actual code for some reason.
<table>
<tr>
<th>Time:</th>
<th style="width: 8%">
V505(2)
<img src = "images/information.png" width = "25" height = "25" border = "0"/>
</th>
<th>Time:</th>
</tr>
</table>
Any reason why you can't do a white-space: nowrap;?
Have you tried setting the width to a measure instead of a %? With no width specified on the Table, the browser might not be sure what 8% means (unless of course, these are specified in some styles).
I want to practive, and even best-practice, with Html+JS+CSS.
I use a one page client-only Sudoku page.
My Sudoku markup is basically a <table>, with <td>.
(I'm open to suggestions to improve this).
My requirements :
Have a cell under focus (the keyboard notion of focus) (highlighed with css to a yellow background)
Navigate through cells with arrow keys (plus Home etc).
type-in an integer value sets that value to the currently focused cell
I use an input button inside each cell.
The Javascript works fine.
My only problem is with the display.
When a cell has the focus, it's highlighted display doesn't cover the whole TD, rather only the visual space included in the input button. I have some space around the button that isn't 'yellow'.
I don't think I could go up in the CSS selection, to select the parent of the input, could I ? Such as :
input:focus '?? how to go up ??' td { background-color:yellow;
I tried a few tricks, like having always 5 characters in each button display (5 spaces when empty, changing the middle character when set), but nothing is visually satisfying.
Even worse, it is clearly against best-practices to alter the content for the sake of visualizing. That's what the MVC distinction between Html/Css/Js is for !
I already searched this site for answer, I found close but distinct questions and answer.
I'm hoping someone could help improve my page ... and my markup skill :-)
It is not possible to construct a css selector which matches a parent node dependent on a (pseudo-)class of child node.
Basically you have two options to choose from:
Try to fill the td with the input completely using height and width rules in your css.
Set 'focused' and 'unfocused' class on your tds with javascript using the onfocus and onblur events of the inputs.
Could you not use a dash of jQuery to set a .focused class and then apply some style to it?
I have the following textarea in a table:
<table width="300"><tr><td>
<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>
</td></tr></table>
With a long string in the textarea, the textarea stretches out to accommodate it in one line in IE7, but retains its 300px width in other browsers.
Any ideas as to how to fix this in IE?
Apply the width to the td, not the table.
EDIT: #Emmett - the width could just as easily be applied via CSS.
td {
width: 300px;
}
produces the desired result. Or, if you're using jQuery, you could add the width through script:
$('textarea[width=100%]').parent('td').css('width', '300px');
Point being, there's more than one way to apply a width to a table cell, if development constraints prevent you from applying it directly.
#Peter Meyer, Jim Robert
I tried different overflow values, to no avail.
Experimenting with different values for the wrap attribute and the word-wrap style also wasn't fruitful.
EDIT:
#dansays, seanb
Due to some awkward application-specific constraints, the width can only be applied to the table.
#travis
Setting style="word-break:break-all;" sort of worked! It still wraps differently in IE7 and FF. I'll accept this answer if nothing better comes up.
Another hacky option, but the only option that works for me - none of the other suggestions on this page do - is to wrap the textarea in a single cell table with a fixed table layout.
<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>
Another very hacky option, if you are stuck with a lot of constraints, but know what the surrounding dom will look like:
style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"
not pretty, but does work in IE7.
Using jquery or similar would be a much neater solution, but it depends on the other constraints you have.
did you try...
overflow: hidden;
??
I'm not sure if it should be in the table of the textarea... experiment a bit
IE also supports the word-break CSS 3 property.
The overflow property is the way to go. In particular, if you want the extra text to be ignored, you can use "overflow:hidden" as a css property on the text.
In general, when a browser has an unbreakable object, such as a long string without spaces, it can have a conflict between various size constraints - those of the string (long) vs its container (short). If you see different behavior in different browsers, they are just resolving this conflict differently.
By the way, there is a nice trick available for long strings - the <wbr> tag. If your browser sees longstringlongstring, then it will try to fit it in the container as a single, unbroken string -- but if it can't fit, it will break that string in half at the wbr. It's basically a break point with a implicit request to not break there, if possible (sort of like a hyphen in printed texts). By the way, it's a little buggy in some versions of Safari and Opera - check out this quirksmode page for more.
I've run into this problem before. It's related to how HTML parses table and cell widths.
You're fine setting 300 as a width as long as the contents of the element can never exceed that (setting a div with a definite width inside and an overflow rule is my favorite way).
But absent a solution like the above, the minute ANY element pushes you past that width, all bets are off. The element becomes as wide as it has to to accommodate the contents.
Additional tip - encase your width values in whatever set of quotes will nest the value properly (<table width='300'). If someone comes along and changes it to a %, it will ignore the %, otherwise.
Unfortunately, you're always going to have trouble breaking strings that do not have 'natural' breaks in IE, unless you can do something to break them up via code.
For solve this issue you use space in your text,and you too use this code
overflow:hidden
Give the width in pixels.this should work properly
or, how about:
overflow: scroll;
Edit:
I actually tested this. I think the behavior is such because the width is on the table, which I believe (I have nothing to back this up) I read long ago that the table width is a suggested width, but can be expanded to accommodate its content. Not sure. I know if you use a <DIV> rather than a table, it works. Additionally, if you apply the 300 pixel width to the containing <TD> element as opposed to the <TABLE> element, it works as well. Also, the overflow: scroll does nothing! :P
Nice, funky IE behavior, for sure!
Best thing I could find to make it work, a little hacky:
wrap textarea with <div style="width:300px; overflow:auto;">
might want to play around with the overflow value