Link to home
Start Free TrialLog in
Avatar of peter_coop
peter_coopFlag 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
Avatar of LZ1
LZ1
Flag of United States of America image

What Doctype are you using? Are you using a CSS reset at all?
Avatar of 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
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?
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
Avatar of LZ1
LZ1
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
What is class=contact? I didn't have that in original code? Thanks
You can just remove the whole class part on the body. Not sure how that got in there.
Thank you very much for your help
Thank you
Glad to help!