CSS formatting Textboxes and TextArea's

Hi Guys,

the following code formats text-boxes and Text-area's to look pretty and indicate to the user which field they are working with - the code works fine in Chrome, Safari and generally in ie 10 - however in ie10 and below there are intermittent problems - the picture is overlaid by the text - or the textbox doesnt clear the padding .... any help or suggestions would be great

<style>    
/* format a textbox with picture*/
.tb8 {
	width: 230px;
	padding:4px 4px 4px 4px;
	border: 1px solid #3366FF;
	border-left: 1px solid #3366FF;
	height:18px;
}
.tb8:Focus {
	background:#FFFFFF url(http://rosemax.com.au/horserecords/images/bounce_mgmt_edit_icon.gif) no-repeat 4px 4px;
	padding:4px 4px 4px 26px;
	border:2px solid #CCCCCC;
	width:230px;
	height:18px;
}
/* format a text-area with picture*/
.tb11 {
	width: 230px;
	padding:4px 4px 4px 4px;
	border: 1px solid #3366FF;
	border-left: 1px solid #3366FF;
	height:18px;
}
.tb11:Focus {
	background:#FFFFFF url(http://rosemax.com.au/horserecords/images/bounce_mgmt_edit_icon.gif) no-repeat 4px 4px;
	padding:4px 4px 4px 26px;
	border:2px solid #CCCCCC;
	width:230px;
	height:60px;
}

</style>

        <table align="left" cellspacing=1 cellpadding=0 border=1 style="width: 100%;"    >
            <tr>
              <td>This text area will increase in size on focus and will show an "edit" icon <br>
                  <TEXTAREA class='tb11' NAME='MARKINGS' ID='MARKINGS' rows='5' Cols='35'>Test</TEXTAREA>
              </td>
            </tr>
            <tr>
              <td>This text box will will show an "edit" icon on focus <br>
                    <INPUT TYPE='TEXT' class='tb8' NAME='Brand' ID='Brand' VALUE="Test Text">
              </td>
            </tr>
            <tr>
              <td><b>In Safari, Chrome and FF it works fine - IE 10 (and below) it seems to work fine except periodically the icon ends up behind the text and or the 4px padding seems to prevail when the textbox loses the focus - how can I prevent or cater for this ...?</b><br>
 
              </td>
            </tr>          
        </table>

Open in new window


a working example is also found here ==>http://cssdeck.com/labs/tlodseob


Many thanks in advance

DWE
LVL 1
dwe0608Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dwe0608Author Commented:
anyone?
0
GaryCommented:
Looks like you have found a very unusual bug with IE, set your padding to 25px or 27px
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
Seems related to the height as well, just strange it only happens at 26px
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

dwe0608Author Commented:
Hi GaryC123, yes its a strange problem ... in ie9, the picture doesnt show at all .. is there anyway I can make it show and format the textboxes in ie9 and less ?
0
GaryCommented:
It seems to happen at certain combinations of height and padding - I posted a bug report to MS

In my testing it shows fine in IE9
0
dwe0608Author Commented:
I cant test is properly in ie9 except by using compatibility view in ie10 and it seems to break - the image does not show at all ... I have a friend that says it is working in ie9 ...

if I wanted to apply that style across the entire site to all textboxes ... I do that by

/* for Text inputs */
input[type=text] {
	width: 200px;
	padding:4px 4px 4px 4px;
	border: 1px solid #3366FF;
	border-left: 1px solid #3366FF;
	height:16px;
}
input[type=text]:Focus {
	padding:4px 4px 4px 27px;
	border:1px solid #CCCCCC;
	width:173px;
	height:16px;
	background:#FFFFFF url(../images/bounce_mgmt_edit_icon.gif) no-repeat 4px 4px;
}

Open in new window


Is there a way I can say (code it), if the input doesn't have a class then apply the default formatting - otherwise use the named class ?

I know I shouldnt ask more than one question in a post, but givent he first seems to be bug related, this might give the post some content for future viewers on the same or similar subject :-)

MTIA

DWE
0
GaryCommented:
Compatibility view will go into Quirks mode and you can not rely on anything looking the way it should!

You can use the :not pseudo class e.g.

input[type=text]:not(.myclass)

...but this is CSS3 so is not recognized in anything less than IE9, off the top of my head I cannot remember if the selectizer (or similar libraries) will make it work for IE8 and lower

(yes you are being naughty ;o)
0
dwe0608Author Commented:
hmmmmm
yes, the pseudo class can create a problem ... but combined with the information found at the following link (which attempts to, and seems to, succeed in modifying ie5-8 to be somewhat standards compliant ...

https://code.google.com/p/ie7-js/

Am I correct ?

MTIA
0
dwe0608Author Commented:
As this seems to be a bug in IE - I've split the points amongst the answers given by GaryC123 for anyone else to see the flow of the discussion.
0
GaryCommented:
Yes, there are a couple of libraries like that that make <IE9 behave like CSS3/HTML5. Selectizer is the most popular
http://selectivizr.com/
0
dwe0608Author Commented:
Thanks greatly for the assistance :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.