it took me decades to solve this problem only to know how simple it should have been.

in a jsp web application i've been working on, i needed to show a lesson's attachments with image and it's complete file name on three browsers - ie, firefox and safari. i thought everything is working fine until our qa tester sent me the bug.

unlike in firefox and safari, the attachments in ie were not in place. here are screenshots of what i am blabbering about:

firefox:

safari:

ie:

incompatibility of ie browser is not new to me but i guess it is the hardest & most tidious job in front-end web development - that is, to develop an application to appear exactly the same as on all browsers! the screenshots above has the following code:

<% int i=0; %>
<c:forEach var="data" items="${attachmentList}" varStatus="sequence">
<input type="hidden" id="attachListSize" value="${attachListSize}">
<div id="singleAttachment">
<img src="/${data.thumbnail}" />
<a>
<span id="attachmentLabel"><c:out value='${data.label}'/></span>
</a>
<c:set var="temp" value="<%=i %>" />
<c:if test="${temp!=attachListSize-1}"> | </c:if>
</div>
<% i++; %>
</c:forEach>

if you're wondering what the <c:out> tag does in the #attachmentLabel div, it formats the data.label (queried from the database) to replace certain special characters that browsers will likely read as scripts. it will then output a browser readable content in this case.

my first move was asking google "how a span works". google and i have been friends for so long now and i say that he is a genius and is the smartest friend i ever have. ehehe. i mistakenly believed that span element prevents a group of text from breaking up and a lot of google's recommendations believed it too. however, this is not always the case. take my bug for example - a span inside a div with less width.

my search did not make sense and so i have to think of other ways to identify what was going wrong. so, instead of asking google what a span does, i figured asking "how will i prevent a line to break". asking google again, he took me to the www.w3.org. there it was - the answer to my question!

w3 html 4.01 specification section 9.3.2:

Prohibiting a Line Break

Sometimes authors may want to prevent a line break from occurring between two words. The &nbsp; entity (&#160; or &#xA0;) acts as a space where user agents should not cause a line break.

being able to find this statement, i was able to make the ff. workaround:

<% int i=0; %>
<c:forEach var="data" items="${attachmentList}" varStatus="sequence">
<input type="hidden" id="attachListSize" value="${attachListSize}">
<div id="singleAttachment">
<img src="/${data.thumbnail}" />
<a>
<span id="attachmentLabel<%=i %>"><c:out value='${data.label}'/></span>
</a>
<c:set var="temp" value="<%=i %>" />
<c:if test="${temp!=attachListSize-1}"> | </c:if>
</div>
<% i++; %>
</c:forEach>

$(window).load(function () {
for(var i=0; i<Number($("#attachListSize").val()); i++) {
var dataLabel = $("#attachmentLabel"+i).html();
dataLabel = dataLabel.replace(/ /g, "&nbsp;");
$("#attachmentLabel"+i).html(dataLabel);
}
});

this workaround fairly worked! but, i had another problem - the hyphenation also causes lines to break. furthermore with www.w3.org,

w3 html 4.01 specification section 9.3.3:

Hyphenation

In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. The plain hyphen is represented by the "-" character (&#45; or &#x2D;). The soft hyphen is represented by the character entity reference &shy; (&#173; or &#xAD;).

and so to continue with my workaround, i added the ff. code to replace soft hyphenation:

dataLabel = dataLabel.replace(/-/g, "&#45;");

unfortunately, i had no luck! after replacing soft hyphens to plain hyphens, ie still causes a line to break. i've googled and read through more than 20 pages already and i haven't found the answer until finally i changed my keyword to "hyphenation causes line breaks". alas! i found it!

in his page "line breaks and the hyphen", jonathan snook solved my problem. i just had to add a style attribute on my span tag, as follows:

<span id="attachmentLabel" style="white-space: nowrap;">
<c:out value='${data.label}'/>
</span>

well, what do you know? a short, simple code took my lifetime to figure it out! The white-space property set to nowrap will prevent the browser from wrapping at that particular point.

• Add New

Comments (0)

WRITE YOUR COMMENT HERE

Your Contact Details:

Name:

Email: do not notifynotify

Comment:

Title:

Message:

Security

Please input the anti-spam code that you can read in the image.

Joomla components by Compojoom