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?
 
David S.Connect With a Mentor 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.