Blog
what did i learn today
Uncategorized cross-browser css ie8
ie8 css can't find my id

I was having this weird problem in IE8. My page was rendered correctly in Chrome and Firefox, but not in IE8. This was a bit weird, as it was pretty standard stuff, i had some form-styling, something like this: [css] form#some_long_id4test .example { font-style: italic; } form#some_long_id4test>div { clear:left; padding:5px; } form#some_long_id4test label { width:160px; display:block; float:left; } form#some_long_id4test .field-el { float:left; display:block; } form#some_long_id4test input[type='submit'] { margin-right:160px; margin-top: 20px; height:25px; padding-left:15px; padding-right:15px; } form#some_long_id4test .field-el .field-with-errors { color:red; } form#some_long_id4test #feedback_container { clear:both; margin-top: 20px; display:block; } form#some_long_id4test #fix_button { margin-top:-10px; padding-left:165px; } [/css] Seems pretty obvious. Why didn't it work? After a long search, trying stuff out, trying to rewrite my css to get it working, i saw my error. Once found it was very obvious: in my ruby-view i had the following: [ruby] <% form_for @form, :html => {:multipart => true, :id => "some_long_id4test "} do |f| [/ruby] Wow! So my id is actually some_long_id4test with an added newline! Apparently IE8 thinks that some_long_id4test and some_long_id4test\n are not equal (which is not unlogical). It is sometimes so hard, confusing, difficult that all these browsers behave different.

More ...