File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes CSS style not applicable to one particaular input tag Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Soft Skills this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "CSS style not applicable to one particaular input tag" Watch "CSS style not applicable to one particaular input tag" New topic
Author

CSS style not applicable to one particaular input tag

Mary Chellapa
Ranch Hand

Joined: Jul 26, 2011
Posts: 93
Its a jsp page, and one particular css style is not visible on an input tag.

its a user registration form, if first name is violating a validation rule , the field is highlighted.
But same will not happen for middle initial.

I applied the style even without error, it doesn not show for Middle Initial tag.
I cant figure out whats wrong.

I dont know JSTL and the page has lot of that code, unlikely but is there anything that could be hardcoded there.


the JS function that highlights the erroneous row as follows




piece of code where i am trying to change is





Mary
Matthew Brown
Bartender

Joined: Apr 06, 2010
Posts: 4490
    
    8

I'm not certain it's the problem, but it certainly won't help to have invalid HTML. Have a closer look at lines 9/10 and 20.
Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18986
    
    8

Your <tr> tag at line 19 doesn't have a matching </tr> tag. So is line 22 a child of that <tr> element or not? Your browser seems to have decided that it is not.

Edit: Or maybe it does have a matching end tag? If the HTML were systematically indented it would be easier to tell.
Mary Chellapa
Ranch Hand

Joined: Jul 26, 2011
Posts: 93
html is little screwed up cause i ommitted parts of it .. where its getting values from properties file etc ...

i could not find the CSS linked to this page ...
there are some jspf and other jsp's included, but no mention of css there either.

I dont know whats wrong... i even hardcoded class="error" for Middle initial row .. it doesnt change anythign but if i do same for other input tags ... its changes the bgground to yellow(must be in CSS)
but why wont it apply to Middle initial is perplexing
Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18986
    
    8

Mary Chellapa wrote:I dont know whats wrong... i even hardcoded class="error" for Middle initial .. it doesnt change anythign but if i do same for other input tags ... its changes the bgground to yellow(must be in CSS)


Yes, you're correct. You're going to have to look at the CSS to see why your assumptions about how the formatting works were wrong, for a start.

i could not find the CSS linked to this page ...


Looking through JSP and JSPF code is the hard way to do that. Just look at the source code of the actual resulting HTML in the browser. (Right-click and Display Source if you've never done that before.)
Mary Chellapa
Ranch Hand

Joined: Jul 26, 2011
Posts: 93
thanks paul.. i found 2 css ( by looking at the source of rendered page )

Mary Chellapa
Ranch Hand

Joined: Jul 26, 2011
Posts: 93
meh.. nothing seems wrong with css.

Correct me if I am wrong...

var allTRs = document.getElementsByTagName('tr');

this line gets ALL tr elements

and this

tr.innerHTML.indexOf(obj.id) > 0


searches for id of object passed ( for middle initial its form.middleName and for first name its form.firstName) and wherever it matches.. makes the class of tr as error(in next of code)

right??

i made them into two tables so that they are tr elements ( earlier it firstname and middle initial were td elements of same row and error in Mi would highlight firstname as per function )
but even when i put them in separate table and both items are now tr elements .... still firstname is highlighted
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61756
    
  67

If you're not using a JavaScript debugger on the client to diagnose this, you are trying to play concert piano wearing welding gloves. Fire up a debugger and actually see what's going on.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Mary Chellapa
Ranch Hand

Joined: Jul 26, 2011
Posts: 93
thanks bear ... got debug bar and i can SEE that class error is applied to the row where middle initial is .. but that field is not visually highlighted as other erroneous fields.. ( like other tr elements where class = error.)

so i am where i was initially

will keep looking at css , i THINK thats where solution is ... cant see that yet.
Paul Clapham
Bartender

Joined: Oct 14, 2005
Posts: 18986
    
    8

Does your Javascript debugger have CSS support? You might be able to use that to find out which CSS rules are applying to a particular element.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61756
    
  67

Both Firebug and the WebKit (Safari and Chrome) debuggers will show you the computed CSS so you can figure out what's over-riding what.

You have the tools at your disposal to easily solve these kinds of mysteries.
Mary Chellapa
Ranch Hand

Joined: Jul 26, 2011
Posts: 93
paul , debugbar has ability to see css..

bear and paul thanks .. yeah the tools helped .. Still trying to figure out though but looks like there is light at the end of tunnel
Mary Chellapa
Ranch Hand

Joined: Jul 26, 2011
Posts: 93
Thank You gentlemen.
Fixed it .. CSS
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: CSS style not applicable to one particaular input tag