views:

1938

answers:

1

I am developing a website using forms and one of the browsers being targeted is unfortunately IE 6 and 7. I am having an issue with CSS and IE's rendering of form elements that are styled.

I have written a test case, and it is as such (also available online at http://xistence.osnn.net/testcases/ie67fieldset/):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>IE [6|7] Wha?</title>
    <style type="text/css">

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
    }

    /* remember to define focus styles! */
    :focus {
     outline: 0;
    }

    body {
     line-height: 1;
     color: black;
     background: white;
    }

    #req fieldset {
     border: 0;
     border-top: 1px solid #000;
        padding: 0em 1em 0em 1em;
    }

    #req legend + label {
     margin-top: 0.5em;
    }

    #req legend {
     font-size: 1.2em;
    }

    #req label {
     display: block;
     background: none;
    }

    #req input, #req textarea {
     position: relative;
     display: block;
     left: 200px;
     top: -1em;
     margin-bottom: -0.3em;
    }

    #req input[type="text"], #req textarea {
     width: 300px;
    }

    #req textarea {
     height: 3.6em;
    }

    #req input[type="text"], #req textarea {
     border: 1px solid #0a0;
    }

    #req label.required + input[type="text"], #req label.required + textarea {
     border: 1px solid #a00;
    }

    #req input[type="submit"] {
     position: relative;
     top: 0;
     margin: 0;
     left: 200px;
     margin-top: 0.5em;
    }

    #req input[type="hidden"] {
     display: none;
    }
    </style>
</head>
<body>
<form id="req">
    <fieldset>
     <legend>Contact Information</legend>
     <label for="name" class="required">Name: </label> <input type="text" id="name" name="name"></input>
     <label for="phone" class="required">Phone Number: </label> <input type="text" id="phone" name="phone"></input>
     <label for="email">Email: </label> <input type="text" id="email" name="email"></input>
    </fieldset>
    <fieldset>
     <legend>Personal Info</legend>
     <label for="sports">Sports:</label> <input type="text" id="sports" name="sports"></input>
     <label for="spentonline">Hours spent online: </label> <input type="text" id="spentonline" name="spentonline"></input>
     <label for="moreinfo">Tell us about yourself: </label> <textarea id="moreinfo" name="moreinfo"></textarea>
    </fieldset>
    <fieldset>
     <input type="submit" value="Submit" />
    </fieldset>
</form>
</body>
</html>

I have also taken two screen shots, one of IE 7 and one of IE 8, IE 7 and IE 6 agree on this styling so I have not bothered to take a screen shot of IE 6.

IE [6|7]: http://xistence.osnn.net/testcases/ie67fieldset/ie67what.png
IE 8: http://xistence.osnn.net/testcases/ie67fieldset/ie8-correct.png

Has anyone seen this bug before? Where did I go wrong? What do I have to remove to make it work in IE 6/7 without having extra lines going through my input boxes. The extra lines are removed when the border-top is gone on the fieldset, but that is not a solution since doing so removes the whole visual separation.


It is fixed. the margin-bottom on the textarea and input[type="text"] was causing IE 6/7 to have a rendering bug. Removed those and all is well. I guess I can deal with the extra space between the elements on the page!

+2  A: 

I see you use

input[type="submit"]

I doubt this is supported by IE6... you might want to put classes on all your fields to make the difference between the different type of input.

EDIT:

margin-bottom: -0.3em;

You are currently using negative margin that often leads to issues in IE and therefore should be removed

marcgg
That is not required, I am using Dean Edwards excellent IE7-js project to fix up IE [6|7] to IE 8 levels, but that does not fix the fieldset problem where the border is showing up on the next few elements down.
X-Istence
Hum... ok. Double check if it's not leading to problems thought. You should put different borders for each fieldset in order to see exactly what is repeating. I also see some negative margin which can lead to IE6 problems. Aside from that I am out of ideas... damn IE6
marcgg
The top-border for the fieldset is repeating, when you mentioned negative margin's it jogged my memory that it was an issue before. Removed the margin-bottom and all is well!Put that in a new answer and I'll accept it :-).
X-Istence
edited ^^ glad it was that easy to fix, ie6 is the worse
marcgg