[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1224
  • Last Modified:

Having CSS issues with <fieldset> and <legend>

Would someone be kind enough to help me sort out my form here? I have legends bleeding into other legends, etc. Source is easily viewable as always. I *think* I have a mis-alignment of <div> tags, eg one missing or one too many. Can't seem to catch it.

URL:  http://devel.phpgeek.org/finance

Thanks!
0
stevefNYC
Asked:
stevefNYC
1 Solution
 
TNameCommented:

Hi, the fieldset bleeding background is a known IE bug - one of the few workarounds involves positioning the fieldset realtively, positioning the legend absolutely and giving it a negative top value. Margins and padding have to be re-adjusted...



http://www.communitymx.com/content/article.cfm?cid=DD9F3
http://www.mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie
http://www.themaninblue.com/experiment/InForm/fieldset.htm
http://www.davidfreelance.co.uk/index.php/2007/07/19/forcing-fieldset-backgrounds-to-work-in-ie/
with a link to
http://www.davidfreelance.co.uk/index.php/2007/07/19/image-method-to-fix-ie-fieldset-background-bug/  (image workaround)

You can try adding this at the end of your head section (you will have to adjust margins and paddings!):

<!--[if IE]>
<style>

fieldset{ position: relative; }
legend{ position:absolute; top: -10px;  }      /*or top:-5em; left 0.5em; as in one of the examples linked to above */

</style>
<![endif]-->
0
 
DeeEmmCommented:
The label widths are sfixed causing the text to wrap when wider than 100px, you can simply make them wider (200px worked ok for me), of course - this will change the appearance slightly.

The width for the label is set in http://devel.phpgeek.org/media/js/extjs/css/ext-all.css on line 130
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now