IE is driving me again insane :(

HTML & CSS
1

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:


.form_wrapper  {
	float: left;
	margin-bottom: 2px;
	clear: both; 
}

.input_bg {
	height: 23px;
	line-height: 23px;
	margin-right: 16px;
	padding: 2px;
	float: left;
}

.input_bg_medium {
	width: 280px;
	background: url(../images/admin/form_field_medium.png) left top no-repeat;		
}

.form_field{
	height: 19px;
	line-height: 19px;
	float: left;
	border: none;
	background: none;
	padding-left: 2px;
}

.form_field_medium {
	width: 276px	
}



<div class="form_wrapper">
  <label class="label medium_label">Menu Title (Eng.) <span>*</span></label>
</div>
<div class="form_wrapper">
  <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="">        
  </div>
</div>

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

2

Apparently it has to do with this property:


.form_field{
    background: none;
}

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?

3

Okay I have it solved by declaring a IE only stylesheet for .form_field


.form_field{
	height: 19px;
	line-height: 19px;
	border: 0;
	background-color: #FFF;
	padding-left: 2px;
}

So I have to do without the divs background image, but hey. At least in all other browsers it’s working fine.

4

Hi,

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 :slight_smile:

5

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?