HTML & CSS
IE is hitting me again! To be more precise IE8, I work on a basic control panel, which I'm planning to use as a default for my clients (uploading products etc!) It's notting fancy! Okay I use background images for the input fields in the form of a div:
background: url(../images/admin/form_field_medium.png) left top no-repeat;
<label class="label medium_label">Menu Title (Eng.) <span>*</span></label>
<div class="input_bg input_bg_medium">
<cfinput type="text" name="menu_title_eng" id="menu_title_eng" class="form_field form_field_medium" value="">
Nothing out of the ordinary I.m.h.o. and it works everywhere fine, it even looks similar in all browsers incl IE. The problem is the text field. When, in IE, I try to place the cursor in the text field it looks like the text field is blocked by something. When I select a text block just above these divs and make a tab it goes to the text field. What could be the reason?
Thank you in advance
Apparently it has to do with this property:
When I change that to background-color: transparant, I can select the text field but the background from the holding div is not longer visible?
Is there a work arround for this?
Okay I have it solved by declaring a IE only stylesheet for .form_field
So I have to do without the divs background image, but hey. At least in all other browsers it's working fine.
I wasn't seeing any problems in IE8 with the code above so I'd be interested to see what the real issue was.
Do you have a working demo of the bug that I can play with
Paul may have a better fix but why create a separate style sheet just to set the background for IE?
Does it work cross browser if you set the property to transparent?