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

x
?
Solved

Fieldsets in IE and FF

Posted on 2008-11-19
1
Medium Priority
?
559 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:EzEApostle
1 Comment
 
LVL 43

Accepted Solution

by:
David S. earned 1500 total points
ID: 22992816
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month18 days, 21 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question