Win a copy of Spring Boot in Practice this week in the Spring forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Liutauras Vilda
  • Henry Wong
  • Devaka Cooray
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Al Hobbs
  • Carey Brown
Bartenders:
  • Piet Souris
  • Mikalai Zaikin
  • Himai Minh

Hyphen Short-Circuiting my Checkbox Label

 
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi all,

I have run into a situation where a checkbox is being properly displayed, but its label is not. The String is "FTE-OVT". I have other checkboxes with hyphens where both checkbox and label display correctly, but not for this one. The data is read in via SQL. I am using IE 7. This is a JSP app with Tomcat 6.



Please note, if I do a replaceAll in java to replace the hyphen with a ampersand pound 8722 ; the label displays correctly unless you go and highlight the label in which case the label suddenly disappears and I am back where I started
 
author & internet detective
Posts: 41185
848
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Greg,
Spaces are not allowed in the id attribute. I'm guessing the space is enough to confuse your browser and mess up the label.
 
Greg Werner
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Jeanne Boyarsky wrote:Greg,
Spaces are not allowed in the id attribute. I'm guessing the space is enough to confuse your browser and mess up the label.



Thanks for the heads up on that, I will make the adjustment on the ids as it seems to be happening multiple times on the page (we are looping over a particular query's result set).

This did not solve the disappearing label problem though. Let me try to give you more of the puzzle, as much as I am able, because I suspect CSS + IE7 is the lethal combination in this choice.



Class medium is defined as

 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I made a jsFiddle snippet for this:

http://jsfiddle.net/5rSZt/

Easier for folks to test things. I don't have IE7 though, so I can't test it. Works fine in Chrome though.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
what is up with the { and } in the style tags?



dump them.

Eric
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You also should learn about a label tag

Eric
 
Greg Werner
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Gregg Bolinger wrote:I made a jsFiddle snippet for this:

http://jsfiddle.net/5rSZt/

Easier for folks to test things. I don't have IE7 though, so I can't test it. Works fine in Chrome though.



Thanks, that is so helpful to play with. However, I am still seeing the same thing using jsFiddle. That code I posted does not work on IE 7. If I remove the hyphen, the line displays correctly.

Just one more word, I am stuck with IE7 and I did not write this code which I find very appalling as well for a number of reasons. I have to edit this much longer jsp file and do not have the time to rewrite it (at least not yet ....)

So that being said, how on earth can IE7 (mis)interpret a hyphen?
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Have you tried wrapping everything in a LABEL element?



I don't know if that will make a difference or not, but it is the correct approach regardless, as Eric eluded to.
 
Greg Werner
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Gregg Bolinger wrote:Have you tried wrapping everything in a LABEL element?



I don't know if that will make a difference or not, but it is the correct approach regardless, as Eric eluded to.



Yes I did and I agree on its correctness, but it is a no go with IE7.

I think I have pieced together enough of the answer, let me try to offer an explanation and see if this makes sense.

With IE7, any hyphen anywhere can potentially be treated as a word-break. The original author tried to use white-space:nowrap on the span tag to prevent this break behavior because that is the suggested compensation within a span tag. However, this does not work consistently within span elements and there are cases where word break behavior can still arise in span elements.

What I did was remove my span tags and I got the output I was expecting. So lesson to me ... do not use hyphens in span tags because they do not always work. Sorry to bother those of you who use decent browsers and are not burdened with IE7.

Also, another way to fix it I discovered was to do a <td nowrap> but then again, you should not use tables for layout as was done in this code. There was absolutely no reason to use a single table on that .jsp page.
 
Gregg Bolinger
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for explaining it. Would the original code work if you use – instead of - ? I realize the data is probably dynamic so you can't make this change. I'm jusr curious if it makes a difference.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Did you remove the { and } from the styles?

Eric
 
Greg Werner
Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Gregg Bolinger wrote:Thanks for explaining it. Would the original code work if you use – instead of - ? I realize the data is probably dynamic so you can't make this change. I'm jusr curious if it makes a difference.



I did try a number of substitutions as you refer to using the replaceAll method of Java. The only one that even partially worked for me was the 8722 character code I referred to earlier on. But that had the strange behavior of rendering properly initially but if you went and highlighted the text with your mouse or other favorite pointing device then the text disappeared instantly from sight. As far as the DB side, yes I do control what is sent to me so I can not change it from that end.
 
reply
    Bookmark Topic Watch Topic
  • New Topic