Fieldsets in IE and FF

Hi Experts,

I created a form with fieldsets to find that the fieldsets show strangely in IE compared to FF.

I attach the CSS code part and the code used to display:-

Can anyone see what's going wrong? I've attached a file for the example as I dont want the page indexed by google from this site

Thanks
Tim
CSS:-
 
fieldset {
	margin-left:8px; 
	margin-right:8px; 
	margin-top:0px;
	border-style:solid; 
	border-width:1px; 
	border-color:#444444;
}
 
#ClanMargin {
	margin-top:20px; 
	margin-left:8px;
}
 
#ClanInnerMargin {
	margin-left:5px; 
	text-align:right; 
	width:120px
}
 
#ClanInnerFormMargin {
	margin-left:5px; 
	margin-top:-12px; 
	position:relative; 
	left:130px
}
 
#ClanFormInfo {
	font-size:9px; 
	color:#fff;
	width:300px;
}
 
.ClanAsterix {
	color: #B04600;
}
 
Page:-
        <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
        <BR>
        <fieldset>
        <legend>General Clan Information</legend>
        <div id="ClanMargin">
            <div id="ClanInnerMargin">
            Clan Name:- <span class="ClanAsterix">*</span>    
            </div>
            <div id="ClanInnerFormMargin"> 
            <input type="text" id="clanname" name="clanname" maxlength="25" style="width:290px"/>
            <BR/><div id="ClanFormInfo">Maximum Clan Name of 25 Characters</div>
            </div>
        </div>
        
        <div id="ClanMargin">
            <div id="ClanInnerMargin">
            Clan Tag:- <span class="ClanAsterix">*</span>    
            </div>
            <div id="ClanInnerFormMargin"> 
            <input type="text" id="clantag" name="clantag" maxlength="4"/>
            <BR/><div id="ClanFormInfo">Maximum Clan Tag of 4 Characters</div>
            </div>
        </div>
        
        <div id="ClanMargin">
            <div id="ClanInnerMargin">
            Clan Slogan:-   
            </div>
            <div id="ClanInnerFormMargin"> 
            <textarea name="clanslogan" id="clanslogan" style="height:125px; width:290px;" wrap="physical"></textarea>
            <BR/><div id="ClanFormInfo">Maximum Clan Slogan of 255 Characters (HTML Off)</div>
            </div>
        </div>
        </fieldset><BR>
 
        <fieldset>
        <legend>Clan Images</legend>
        <div id="ClanMargin">
            <div id="ClanInnerMargin">
            Clan Avatar:-   
            </div>
            <div id="ClanInnerFormMargin"> 
            <input type="file" id="clanavatar" name="clanavatar"/>
            <BR/><div id="ClanFormInfo">Avatar size 90x90</div>
            </div>
        </div>
        
        <div id="ClanMargin">
            <div id="ClanInnerMargin">
            Clan Logo:-   
            </div>
            <div id="ClanInnerFormMargin"> 
            <input type="file" id="clanlogo" name="clanlogo"/>
            <BR/><div id="ClanFormInfo">Logo size 300x150</div>
            </div>
        </div>
        </fieldset><BR>
        
        <fieldset>
        <legend>Other Information</legend>
        <div id="ClanMargin">
            <div id="ClanInnerMargin">
            Clan Website:-   
            </div>
            <div id="ClanInnerFormMargin"> 
            <input type="text" id="clansite" name="clansite" style="width:290px" value="http://"/>
            <BR/><div id="ClanFormInfo">Do you have an external website? Put the URL here</div>
            </div>
        </div>
        
        <div id="ClanMargin">
            <div id="ClanInnerMargin">
            Clan Message:-   
            </div>
            <div id="ClanInnerFormMargin"> 
            <textarea name="clanmessage" id="clanmessage" style="height:125px; width:290px;" wrap="physical"></textarea>
            <BR/><div id="ClanFormInfo">This message can be updated through your Clan Page, it will show on your Clans homepage. Maximum Clan Message of 255 Characters (HTML Off)</div>
            </div>
        </div>
        </fieldset><BR>
        
        <fieldset>
        <legend>Recruitment</legend>
        <div id="ClanMargin">
            <div id="ClanInnerMargin">
            Clan Recruiting:-   
            </div>
            <div id="ClanInnerFormMargin"> 
            <input type="checkbox" id="clanrecruiting" name="clanrecruiting"/>
            <BR/><div id="ClanFormInfo">Allow the community to apply to join your clan?</div>
            </div>
        </div>
        </fieldset><BR>

Open in new window

example.txt
LVL 1
EzEApostleAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
IDs should be unique. You could use a class instead.

http://www.w3.org/TR/html401/struct/global.html#adef-id
http://www.w3.org/TR/REC-CSS2/selector.html#class-html

It looks like triggering hasLayout on what you currently call #ClanMargin will fix this issue. To understand what hasLayout is, read this:
http://reference.sitepoint.com/css/haslayout

P.S. It said I would need to log in before I could look at your example page. :p
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.