Avatar of peter_coop
peter_coop
Flag for United Kingdom of Great Britain and Northern Ireland asked on

IE displaying fieldset legend incorrectly

The code I am using is appearing fine in FF but in IE, it resorts to the legend appearing almost in the fieldset with no space for the legend after the fieldset. I have included pic so you can see exact problem. I would be grateful if someone could show me where I am going wrong? I have placed complete code @ http://jsfiddle.net/XLPxx/ 

I find the layout here when you enter code, too restrictive. seems to throw it all out and you spend more time correcting it.  Thanks
legend {
          background:#00C621; color:#fff; 
          font:17px/21px Calibri, Arial, Helvetica, sans-serif; 
          padding:0 10px; margin:-26px 0 -5px -11px; 
          font-weight:bold; border:1px solid #fff; 
          border-color:#e5e5c3 #505014 #666661 #e5e5c3; cursor: pointer;
       }

fieldset.action {
          background:#9da2a6; 
          border-color:#e5e5e5 #797c80 #797c80 #e5e5e5; 
          margin-top:-20px;
       }

fieldset {
          background:#f2f2e6; 
          padding: 0 10px 10px 10px; 
          border:1px solid #fff; 
          border-color:#666661 #fff #666661 #fff; 
          margin-bottom:20px; width:450px;
        }

Open in new window

ie-fieldsetgrab.png
CSSHTML

Avatar of undefined
Last Comment
LZ1

8/22/2022 - Mon
LZ1

What Doctype are you using? Are you using a CSS reset at all?
peter_coop

ASKER
@LZ1
I am using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> and I am not using css reset. Thanks
LZ1

On your page, you may want to include a CSS reset first and let us know where that puts you.
Remember, this will go before any other CSS on your page. http://meyerweb.com/eric/tools/css/reset/ 


Also, do you have a live example as opposed to the JSfiddle?
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
peter_coop

ASKER
No, I am working localhost. But what I did notice when i put the html in fiddle, was that the end fieldset and form tags had turned red. I assume that means theres an error? When I use this reset, do I leave my original css loaded with it? Thanks
ASKER CERTIFIED SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
peter_coop

ASKER
What is class=contact? I didn't have that in original code? Thanks
LZ1

You can just remove the whole class part on the body. Not sure how that got in there.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
peter_coop

ASKER
Thank you very much for your help
peter_coop

ASKER
Thank you
LZ1

Glad to help!
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck