Blog from Saravanan Arumugam

Let us talk about Technologies

Replacement to Fieldset to avoid alignment issues


I tried to use multiple fieldsets and encountered a lot of alignment issues. I did a lot of changes in the CSS to fix it. I could only minimize the issues but couldn’t avoid it completely.

So I have come up with a replacement of Fieldset using Div and Span (of course I got the idea from StackOverflow, and I modified it according to my need).

I embedded my content in the following elements

<div class="fieldset">
    <span class="legend">Project Manager</span>
    <p> My Content
    </p>
</div>

In the css file I added the following styles.

.fieldset 
{
	border: 1px solid #ddd;
	margin-top: 1em;		
	padding-left: 15px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
}
 
.fieldset span.legend
{
    color: #222;
    font-size: 1em;
	text-align: left;
	display: inline;
	background: #fff; padding: 5px 10px; 
	position: relative; 
	top: -.8em;	
}

 

This was a lot stable in alignment when compared to Fieldset. With this I am not complaining the Fieldset, its a lot neater way to group things. But I couldn’t figure out the fix to the alignment issues. So this one is a temporary replacement to the fieldset.

Advertisements

4 responses to “Replacement to Fieldset to avoid alignment issues

  1. Bobby Hoffhines July 22, 2012 at 7:49 pm

    Hello.Excellent post, really educational. I surprise why the opposite specialists in this sector do not recognize this. You must proceed your producing.Kind regards from Slovakia.

  2. Replica rolex watches July 24, 2012 at 5:35 am

    Thank you for the good writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how can we communicate?

  3. Sarina July 25, 2012 at 10:12 pm

    I hardly comment, but i did some searching and wound up here Replacement to Fieldset to avoid alignment issues Blog from Saravanan Arumugam. And I do have a couple of questions for you if it’s allright. Is it simply me or does it look like some of these remarks come across as if they are left by brain dead visitors? 😛 And, if you are writing on other online social sites, I’d like to follow everything new you have to post. Could you make a list of every one of all your communal sites like your Facebook page, twitter feed, or linkedin profile?

    • Saravanan Arumugam July 31, 2012 at 11:35 pm

      Thank you for the comment. I don’t post anywhere else. Stackoverflow and this blog are my contributions at the moment. If I do anything more in future, i’ll sure place a pointer to it from this blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: