SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE is driving me again insane :(

    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:
    Code CSS:
    .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	
    }

    Code HTML4Strict:
    <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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apparently it has to do with this property:
    Code CSS:
    .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?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I have it solved by declaring a IE only stylesheet for .form_field
    Code CSS:
    .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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •