352155 (2) [Avatar] Offline

I am working my way through the book and am on Chapter 4 (just completed Section 4.4.3). I must have messed something up in the styles somewhere but the input text field and the send button are appearing **above** the chat messages instead of below within the chat slider. This is occurring in latest chrome 41 as well as in firefox and I have attached a screenshot in chrome. I followed as is from the book and just now downloaded the source and will compare that next. I thought I may have missed a closing div somewhere but went over it a few times and that all seems to be ok.

Just wanted to see if anyone else ever experienced this and what was the fix. I am not the best at css so any help is greatly appreciated.

Thanks alot,
352155 (2) [Avatar] Offline

I downloaded the code and compared and everything appeared ok. I then used the chrome element inspector and went thru every element in the chat slider comparing the working downloaded code to my broken code. An yellow exclamation caught my attention. Within the css rule for the .spa-chat-box class I had a typo for the position property. Instead of "position" I had "postion". Once I corrected the spelling mistake the chat slider displayed perfectly.

I should have used my ide to type up the files (instead of basic editor) and I would have caught the typo but in the end it was great to see how easy it was to identify issue with chrome inspector. Amazing how far these browser dev tools have come.

Excellent book so far and very glad I purchased it. Having this discussion board to ask and receive help is very helpful.