tags:

views:

1894

answers:

3
Q: 

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"&gt;
<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>
+1  A: 

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]-->
scunliffe  2009-07-20 20:30:59
I realized it was an IE rendering bug but I didn't know the margin left was ultimately the culprit. If Jacob's solution doesn't work I'll use this because it's much better than the current conditional CSS I'm using, which just adjusts the textbox left:-180px; and feels like a horrid hack!
Josh  2009-07-20 20:53:28
+1  A: 

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;
}
Jacob  2009-07-20 20:44:09
Sorry, HTML was malformed because I copied just a snippit of the page
Josh  2009-07-20 20:49:13
That worked great. Thank you!
Josh  2009-07-20 21:00:40
A: 

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?

pcguru  2009-07-20 20:54:16
Point taken; will remove the "Simple" from my post title in a moment.
Josh  2009-07-20 20:57:11

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?