PDA

Click to See Complete Forum and Search --> : checkboxes and IE6

johnnyblotter
10-28-2008, 01:08 PM
I'm hoping someone can clue me in to the behavior of checkboxes in IE 6. For example, let's say we have a form with this layout...

<div id="test">
<form>
<input type="text" size="40" />
<input type="checkbox" />
</form>
</div>

Having experimented with different ideas, it seems the only way to give a border color to the text input while still having the checkbox display properly in IE6 is to class the text input and give it a border. I'm asking because a site I'm working on now has many text inputs and checkboxes on the same page and I'm wondering if there is a way to reset the IE6 checkbox default display once all inputs have been styled.

For the above example:

#test input { border:1px solid red;}

results in a terrible looking checkbox for IE6. It seems there is no way to OVERRIDE THAT DECLARATION to restore the checkbox back to default.

The other solution - using input[type="text"] means that my text boxes won't have a border color in IE6.

So is that the only answer, for long forms with both types of inputs? I just have to class all the inputs? Or is there a better solution?
Fang
10-29-2008, 08:31 AM
input[type="text"] doesn't work in IE6
You will have to use class on the checkboxes:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
#test input { border:1px solid red;}
#test input.box { border:0;}
</style>

</head>
<body>
<form>
<div id="test">
<input type="text" size="40">
<input type="checkbox">
<input type="checkbox" class="box">
</div>
</form>
</body>
</html>
The only alternative is to use input[type="text"] and apply the css for IE6 using JavaScript.