0

I am creating a questionnaire (I have little coding expertise) and am completely stuck with the styline in IE.

Firefox and Chrome both work perfectly but Internet Explorer won't center the content, the input fields are also overlapping the text areas.

I know the is a place for questions and not so much coding help but I thought someone might be able to notice something obvously wrong and save me a massive headache!

<body>
<style type="text/css">
#wrap {
   width:800px;
   margin:0 auto;
   background-color:white;
   height:auto;
   margin-top:-16px;
}
#left_col {
   float:left;
   width:400px;
}
#right_col {
   float:right;
   width:400px;
}
body {
   background-image:url(questionnaire-background.png);
   font-family: calibri, verdana;}

</style>

<div id="wrap">
<center>
<br>
<h1>HR Newsletter Questionnaire</h1>
    <div>
    <p style="margin-top:20px">What is your name?</p><br>
    <p><input type="text" name="name" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
    </div>

    <div>
    <p>Is the HR Newsletter something you would like to receive?<p><br>
    <p><input type="text" name="like_to_receive" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
    </div>

    <div>
    <p>Comments:</p><br>
    <p><input type="textarea" name="comments" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></textarea></p>
    </div>

    <div>
    <p>What do you like from the current HR Newsletters?</p><br>
    <p><input type="text" name="what_do_you_like" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
    </div>

    <div>
    <p>What do you do like or would like to be seen removed from the HR Newsletter?</p><br>
    <p><input type="text" name="not_like" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
    </div>

    <div> 
    <p>What would you like to be seen added to the HR Newsletter?</p><br>
    <p><input type="text" name="added" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
    </div>

    <div>
    <p style="margin-bottom:-22px">How often would you like to see the HR Newsletter?</p><br>
    <p>      
            <input type="radio" name="how_often" value="weekly">Weekly
            <input type="radio" name="how_often" value="fortnightly">Fortnightly
            <input type="radio" name="how_often" value="monthly">Monthly
            <input type="radio" name="how_often" value="quartely">Quarterly
            <input type="radio" name="how_often" value="yearly">Yearly<br></p>
    </div>

    <div>
    <p style="margin-top: 40px; margin-bottom:-22px">Would you prefer the HR Newsletter to see more of less of the following:</p><br>
    <p>
            <input type="radio" name="would_you_prefer" value="more_pictures">More pictures with less text
            <input type="radio" name="would_you_prefer" value="more_text">More text with less pictures
            <input type="radio" name="would_you_prefer" value="both">A balanced mixture of both<br></p>
    </div>

    <div>
    <p style="margin-top: 40px; margin-bottom:-22px">How long would you like the HR Newsletter to be?</p><br>
    <p>
            <input type="radio" name="how_long" value="9">Less than 9 pages 
            <input type="radio" name="how_long" value="10_15">10 – 15 Pages
            <input type="radio" name="how_long" value="15">15 + Pages<br></p>
    </div>
            <br><br><br><br>
    <div>
    <p><input type="submit" value="Send" style="margin-bottom: 43px; margin-top:-46px; width: 50%">
       <input type="reset" value="Clear" style="margin-bottom: 43px; margin-top:-46px; width: 50%"><br></p>
    </div>
</center>
    </div>
<body>
4

1 に答える 1

2

The easiest solution (and this is not really the best way to go about this, for the record) would be to add the following line in your CSS:

body { text-align:center; margin:0px auto; }

I checked this in IE 9.0.8.

于 2013-01-24T18:32:43.410 に答える