CODEWITHSUNDEEP
internet-explorercss
Josh
Josh

Reputation: 11070

IE CSS Position Wrong, any ideas why?

I cannot figure out why in the following code (a larger page with all unnecessary portions deleted) the Textarea is way too far to the right in IE 6 or 7. It should be right next to the text as it is in Firefox. Any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<style type="text/css">
div.storeProductFormInner {
    text-align: center;
}

div.storeProductFormInner div.storeProductChoices {
    display: block;
    width: 660px;
    margin: 0px auto;
}

div.storeProductFormInner div.storeProductChoices fieldset {
    position: relative;
    display: block;
    width: 660px;
    margin: 10px auto 0px auto;
    padding: 0px;
    text-align: right;
    font-weight: normal;
    border: none;
}


div.storeProductFormInner div.storeProductChoices fieldset legend span {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 325px;
    text-align: right;
    font-weight: normal;
}


div.storeProductFormInner div.storeProductChoices fieldset div {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
    width: 325px;
    text-align: left;
    border: none;
    padding: 0px 0px 0px 10px;
    margin: 0px 0px 0px 325px;
}

div.storeProductFormInner div.storeProductChoices fieldset div input,
div.storeProductFormInner div.storeProductChoices fieldset div select,
div.storeProductFormInner div.storeProductChoices fieldset div textarea {
    margin: 0px;
    position: relative;
    top: 0px;
    left: 0px;
}


div.storeProductFormInner div.storeProductChoices fieldset div textarea.TextboxXL {
    width: 300px;
    height: 200px;
}

</style>
</head>
<body>
<div id="container">
        <div id="body_div">
        <div id="content_div">
            <div class="Module_Ecommerce_DF_product">
<div class="storeProductFormOuter">
<form id="ECommerce_DF_addToCart" action="/ajax_required.php" method="post">
<div class="storeProductFormInner">
<div class="storeProductChoices">
<fieldset>
<legend><span>Personalized:</span></legend>
<div>
                    <textarea name="choicetext_30378" rows="5" cols="20" id="eCommerce_DF_choice_30378" class="TextboxLG" title=""></textarea>
    </div>
</fieldset>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

Upvotes: 0

Views: 6295

Answers (3)

oldwizard
oldwizard

Reputation: 5062

I would not call this a simple eample really. You have lots of absolute and relative positionings, as well as making a span into a block level item which in turn is inside an inline element that is inside a relatively positioned element and so on. These things tend to break.

If you just want to put a textarea next to a label surely there are simpler ways of doing it?

Upvotes: 0

scunliffe
scunliffe

Reputation: 63676

You have a 325px margin on the div wrapping the textarea.

csstest.html

DIV.storeProductFormInner DIV.storeProductChoices FIELDSET DIV
  margin: 0px 0px 0px 325px
  /* order: top right bottom left */

Update: on closer inspection it appears to be how IE treats the Legend Element. IE is stacking the above margin "on top of" the Legend, whereas Firefox,Chrome, etc. is stacking it on the parent. e.g. the Legend is sort of a "floating block"...

Since the issue "fixes" itself in IE8 (Standards Mode) I take it the IE6/IE7 rendering is buggy. Just in case it isn't obvious, this line is forcing the IE7 rendering...

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

You could drop the Forced IE7, let IE8 render normally, then tweak the CSS just for IE6/7.

<!--[if lt IE 8]>
  <style type="text/css">
    div.storeProductFormInner div.storeProductChoices fieldset div{
      margin-left: 0px;
    }
  </style>
<![endif]-->

Upvotes: 2

Jacob
Jacob

Reputation: 78920

First off, the HTML is malformed. Beyond that, removing a few styles from your CSS fixes the IE rendering. Here's my modified CSS:

div.storeProductFormInner {
    text-align: center;
}

div.storeProductFormInner div.storeProductChoices {
    display: block;
    width: 660px;
    margin: 0px auto;
}

div.storeProductFormInner div.storeProductChoices fieldset {
    position: relative;
    display: block;
    width: 660px;
    margin: 10px auto 0px auto;
    padding: 0px;
    text-align: right;
    font-weight: normal;
    border: none;
}

div.storeProductFormInner div.storeProductChoices fieldset legend span {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 325px;
    text-align: right;
    font-weight: normal;
}


div.storeProductFormInner div.storeProductChoices fieldset div {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
    text-align: left;
    border: none;
    padding: 0px 0px 0px 10px;
    margin: 0px 0px 0px 325px;
}

div.storeProductFormInner div.storeProductChoices fieldset div textarea.TextboxXL {
    width: 300px;
    height: 200px;
}

Upvotes: 2

Related Questions