How do I line up controls in ASP.NET web for using CSS

I would like to vertically align a number of controls on my web form but I'm not sure what is the best way to achieve what I'm trying to do, the layout I'm looking for is as follows:

[Label]  [Text Box]    [Label]  [TextBox]
[Label]  [Large text box                       ]
[Label]  [Text box]
[Label]  [Text Box]

I'm not sure if it's best to put each group of Text boxes and labels in a seperate Div or is there another approach that would be better?  So far I have not found an elegant solution to get the formatting I would like.

Thanks
obb-taurusAsked:
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.

AngryBinaryCommented:
Example below. It makes sense to put related elements (i.e., label and textbox) in a div together, since those are logically grouped. Otherwise, I'd prefer to use CSS to dictate how they should wrap and flow.

Here's a method that uses CSS to determine how they should be stacked:
<html>
<head>
<style type="text/css">
html {
	font-family:Arial;
}
.label {
	display:block;
	float:left;
	width:200px;
	height:25px;
}
.textBox {
	display:block;
	float:left;
	width:200px;
	height:25px;
}
.textArea {
	display:block;
	float:left;
	width:600px;
	height:75px;
}

.fieldset {
	clear:both;
	display:block;
}

#fieldset1, #fieldset2 {
	clear:none;
	float:left;
}

</style>
</head>
<body>
	<div>
		<div class="fieldset" id="fieldset1">
			<label class="label" id="label1">Some field:</label>
			<input type="text" class="textBox" id="textBox1" />
		</div>
		
		<div class="fieldset" id="fieldset2">
			<label class="label" id="label2">Another field:</label>
			<input type="text" class="textBox" id="textBox2" />
		</div>
		
		<div class="fieldset" id="fieldset3">
			<label class="label" id="label3">A third field:</label>
			<textarea class="textArea" id="textArea1"></textarea>
		</div>
		
		<div class="fieldset" id="fieldset4">
			<label class="label" id="label4">Fourth field:</label>
			<input type="text" class="textBox" id="textBox3" />
		</div>
		
		<div class="fieldset" id="fieldset5">
			<label class="label" id="label5">The last field:</label>
			<input type="text" class="textBox" id="textBox4" />
		</div>
	</div>
</body>
</html>

Open in new window

0
RobOwner (Aidellio)Commented:
Just looking at your code @AngryBinary, did you mean to put the second field on the same line?

 floating elements
The most reliable and easiest way is still to use *ahem*.. tables
0
COBOLdinosaurCommented:
Why in the world would you create a class named fieldset for divs that are holding related form fields instead fieldset tags which are the semantically correct elements to organize groupings in a form.


Cd&






0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

AngryBinaryCommented:
To annoy pedants :)

Also, because the term "fieldset" isn't necessarily the best name for that class - typically, a fieldset implies a logical grouping of multiple fields in a form. In this case, I'm only grouping a single field with it's label. "Controlset" may have been better.

But, as they say, nobody expects the Spanish inquisition.
0
RobOwner (Aidellio)Commented:
What @Cd is saying is there are DOM elements that should be used to group the controls and not DIVS
0
AngryBinaryCommented:
@tagit

Yes, those fields are supposed to be on the same line. See OP - that's exactly what was specified.

Tables are sub-optimal in two very real scenarios:

1. An application update occurs, and you need to rearrange controls. It is much easier with block elements and css layout, since the controls are stacked in a flowing layout. I'm not a designer purist, but over the last 15 years I've done it both ways, and this method has won out in terms of productivity.

2. I want slightly different layouts for mobile, tablet, and desktop clients. In this case, it's a simple matter of including a different style-sheet based on the user-agent. I don't have to worry about maintaining 3 versions of markup. In ASP.NET, this means potentially 3 versions of code, sets of event handlers, AND 3 different style sheets as well.

0
AngryBinaryCommented:
I know what he's saying. First, DIV is a DOM element. Second, I think what I said about the FIELDSET is still valid. Semantically, a FIELDSET should contain a set of fields. Each of those DIVs only contains one field. Third, FIELDSET has a default visual style that isn't appropriate in this case, and I think for elements with default visual styles (such as HR, B, I, etc...), it's counter-intuitive to remove those styles altogether via CSS when there are visually neutral alternatives.
0
RobOwner (Aidellio)Commented:
Sorry, I did realise that hence your specification in your css for fieldset1 and 2.

They're good points you make about using tables vs block elements especially with variable style sheets and the user agents.
0
COBOLdinosaurCommented:
What you have is no better than a layout using a table.  You are using a div for each form element and then stick in an unbound label that might as well just be a text string because you failed to specify the for attribute.

The whole thing could be done using two fieldsets and less styling and have the advantage of being semantically correct, more accessible. and less likely to break across multiple environmental conditions.

BUT... It looks okay and I guess that is all that matters if you can just drop some code and move on.

Cd&
0
AngryBinaryCommented:
Also, with a little tweak to the layout (and this time, using a fieldset ^_^), consider what happens to this form when the form container is squeezed to less than 800px wide...

<html>
<head>
<style type="text/css">
html {
	font-family:Arial;
}
.label {
	display:block;
	float:left;
	width:200px;
	height:25px;
}
.textBox {
	display:block;
	float:left;
	width:200px;
	height:25px;
}
.textArea {
	display:block;
	float:left;
	width:600px;
	height:75px;
}

.controlset {
	clear:both;
	display:block;
	width:400px;
}

#controlset1, #controlset2 {
	clear:none;
	float:left;
}

#controlset3 {
	width:800px;
}
</style>
</head>
<body>
	<fieldset>
		<div class="controlset" id="controlset1">
			<label class="label" id="label1">Some field:</label>
			<input type="text" class="textBox" id="textBox1" />
		</div>
		
		<div class="controlset" id="controlset2">
			<label class="label" id="label2">Another field:</label>
			<input type="text" class="textBox" id="textBox2" />
		</div>
		
		<div class="controlset" id="controlset3">
			<label class="label" id="label3">A third field:</label>
			<textarea class="textArea" id="textArea1"></textarea>
		</div>
		
		<div class="controlset" id="controlset4">
			<label class="label" id="label4">Fourth field:</label>
			<input type="text" class="textBox" id="textBox3" />
		</div>
		
		<div class="controlset" id="controlset5">
			<label class="label" id="label5">The last field:</label>
			<input type="text" class="textBox" id="textBox4" />
		</div>
	</fieldset>
</body>
</html>

Open in new window


>800px

<800px
Elegant, no? Of course, wrapping can easily be prevented by setting a hard width on the parent container (fieldset), but this sort of flow is great if you hate horizontal scroll bars.
0
AngryBinaryCommented:
@Cd

You're right about the "for" attribute.

But, I'm going to have to disagree with you otherwise. I think my case against tables is a pretty good one, such as it was presented.
0
COBOLdinosaurCommented:
When I get some time latter this evening I will put the code together as it should be done, and not bound by limitations of asp.net.


Cd&
0
AngryBinaryCommented:
I don't see how the markup is at all bound by ASP.NET limitations - I would use the same pattern if I were writing JSP, PHP, or vanilla HTML.

The point wasn't that this "works for ASP.NET", it's that the goal is to reduce error-proneness and the overhead of maintenance in real-world scenarios, where cross-platform layouts mean reaching more end users with less code. But, I'm always interested in a better solution.
0
COBOLdinosaurCommented:
Okay let's see what we have.  The code using divs  and misusing label and fieldset gets 10 errors even when only validating to html 4.01
It is semantically incorrect and wraps at 800px.

So let's see what we get with semantically correct, validate without errors to XHTML 1.0 strict, with less code, fewer CSS entries
and does not wrap but goes to a scollbar at 700px; about the size of a tablet.  For a phone both need a different style sheet because
the textarea at the very least needs to be re-dimensioned.  Also the simple uncluttered  CSS makes a variety of themes and presentations
to be easily installed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>form page</title>

<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
<style type="text/css">

body {
        width:90%;
        min-width:700px;
        margin:auto
     }
#wrapper {
           width:700px;
           margin:60px auto
         }
fieldset{
           width:90%;
           margin:auto;
           border:none
        }
#textArea1 {
             margin-top:10px
           }
#label2	{
          margin: 0 8px 0 145px
        }
#label3 { 
          padding-bottom:40px
        }
</style>
</head>
<body>
   <div id="wrapper">
      <form action="">
         <fieldset>
           <label for="textBox1" id="label1">TextBox1</label>
           <input type="text" class="textBox" id="textBox1" />
           <label for="textBox2" id="label2">TextBox2</label>
           <input type="text" class="textBox" id="textBox2" /><br />
           <label for="textArea1" id="label3">Textarea1</label>
           <textarea class="textArea" id="textArea1" rows="5" cols="60">
           </textarea>
         </fieldset>
         <fieldset>
           <label for="textBox3" id="label4">TextBox3</label>
           <input type="text" class="textBox" id="textBox3" /><br />
           <label for="textBox4" id="label5">TextBox4</label>
           <input type="text" class="textBox" id="textBox4" />
         </fieldset>
       </form>
    </div>
</body>
</html>

Open in new window


That is the right way to do it.  While everyone appreciates effort and enthusiasim, there is no substitiute
for following standards, and getting it right.

Cd&
0
AngryBinaryCommented:
I would make the argument that a wrapping layout is more compatible with mobile platforms, assuming that to deliver the same content to a smaller screen will likely require a different style sheet in any scenario.

You're were correct about the usage of labels, and I did not include a doctype declaration, but I think you're laying it on a little thick.
0
COBOLdinosaurCommented:
Not thick at all.  Best practice is to adhere to current standards. ThaT gives assurance that what works today will continue to work long term.  Standards evolve and change, but keep backward compatibility and provide easy migration.  Non-standard code and hacks get left behind, and pages have to be re-written.

If it was a lot of extra work to comply to standards then you could make an agreement favoring rapid deployment, but in fact most of the time going the standards compliant route is faster because there are fewer surprises during testing and deployment.

As for wrapping I would agree with you for almost any structure except a form.  On a small mobile screen it would require a modified layout anyway.  For anything else it is not a good idea to move form fields around as you are just giving the user another way to get confused a make a mistake. Before I went the wrapping route I would go to scripting to re-dimension elements dynamically.  For most anything other than forms I prefer to use floats and percentage dimensions; but any method has limits because in the end the user controls the conditions under which the page will get rendered.

This has been a good discussion.


Cd&
0
AngryBinaryCommented:
Agreed.

So, I see how specifics of my implementation are non-compliant, but I don't see how the general methodology is, as far as usage of div's and CSS - that's where I'm still detracting.

One of the things I like about my version, with it's additional markup and CSS, is that it's repetitive and modular. It would be exceptionally easy to implement as granular, reusable server-side components with a predictable visual result, and if I were writing a UI framework for a CMS or any kind of data maintenance application, that would be a prime consideration.

Having said that, the markup does look more like data than a layout, and maybe that's a result of blurring concerns.

Also, maybe OP can reassure us that he's enjoying this discussion as much as I am and we haven't completely hijacked this question?
0
RobOwner (Aidellio)Commented:
I've enjoyed following this discussion.  Very valid points made from both sides :)
0
COBOLdinosaurCommented:
the markup does look more like data than a layout,


Markup IS data.  While iTs function during transport is to act as a carrier for content, once it is in the browser, the markup itself becomes data.  That data is used by the browser to build the document object, and then the markup becomes part of the the data that can be referenced in the document object by scripting.  The browser does not render by interpreting HTML.  Browsers since Netscape 4 and IE 4 render from the document object.  I can build a page containing many structures and elements, and when you look at the source you would see no markup or code between <body> and </body> and no document.write() would be used either.

Not a practical way to develop, but if we want to we can dynamically generate everything by having script manipulate the document.  If you want the lightest of light weight pages that is one approach which is coming into favor.



Cd&
0
AngryBinaryCommented:
OK, I'm glad you agree. But, if markup is data that defines content, and CSS is data that defines layout... then wouldn't idealized markup not contain the "BR" tag at all? It's essentially an empty element that creeps layout concerns into the content - it is non-semantic, and non-functional for defining content in most scenarios, and most definitely this one.
0
RobOwner (Aidellio)Commented:
W3 is very specific in the standard on how the BR tag should be used. (You'll enjoy their note)

http://www.w3.org/TR/html5-author/the-br-element.html#the-br-element
0
COBOLdinosaurCommented:
CSS does not define layout.  It defines presentation HTML defines the structure By the native behavior of the markup. Layout is the result of the markup being applied.  CSS should be an overlay that modifies default markup behavior or adds to the attributes of the markup.  You can have layout without CSS. You cannot do much in the way of presentation, layout, or anything else in the absence of the HTML structure.

As to the br tag is is part of the standard because it is an import structural element that reduces the number of elements required and the amount to styling required inside of containers.  


Cd&
0
COBOLdinosaurCommented:
W3 is very specific in the standard on how the BR tag should be used.

Would be stated as W3 is very specific in the DRAFTstandard on how the BR tag might be used.

HTML5 is not yet a released standard.  It is likely to be 2013/2014 based on current progress and the disputed items before a final standard is released.


Cd&
0
AngryBinaryCommented:
Well, even though HTML 5 spec is not complete, the point on BR pre-dates the HTML5 spec:

http://www.w3.org/wiki/HTML/Elements/br

The usage they specify is:

"This element must be used only for line breaks that are actually part of the content"
0
obb-taurusAuthor Commented:
Thanks for all the input.  I'm relatively new to CSS and laying out a web page.  I was able to acheive what I wanted with the samples provided but in the end it didn't quite turn out as I had hoped.  I'm actually styling an ASP.NET user control and when I added the control to my web form it looks like the styling was not even applied.  As I recall this is a quirk with user controls and the application of styles.  I have created an external style sheet and included it in my site master page but the control doesn't seem to know the css file is present.

Any thoughts?

AngryBinary:  With respects to the disucssion, the majority of the programming I've done in the past was with Windows Forms and since beginnng my journey into the world of web development, I can't for the life of me understand why it's so prominent.  With all the various quirks with styling pages and the need for JQuery to prop up the limitations of ASP.NET etc, I have no idea why companies that don't conduct business on the internet would ever choose to go with a web application.  At one place I worked, a project I was working on using C# and Windows Forms was moved to another developer as I had resigned from the postion and the developer that took over from me changed it to an ASP.NET Web form application.  I recently heard from a former co-worked that after 3 years they screapped the project and what they had was so user unfriendly it wasn't even funny.  Given my own experiences in learning ASP.NET, it's no surprise the project fell flat on it's face. In my opinion it all boils down to a couple things, trying to get a web page layout looking the way you want is quirky at best and the overhead in time to get a web page right IMHO is not worth the effort because with all the various quirks you will wind up in the hole very quick.

Just my opinion. :)
0
AngryBinaryCommented:
Also of interest - the example that W3C gives for usage of fieldset, very closely resembles my second markup example. The only difference in the overall structure is that rather than use DIV, P is used, and inputs are placed within the label element (presumably removing the need for a "for" attribute).

Ref: http://www.w3.org/wiki/HTML/Elements/fieldset

 
<fieldset name="clubfields" disabled>
 <legend> <label>
  <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
  Use Club Card
 </label> </legend>
 <p><label>Name on card: <input name=clubname required></label></p>
 <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p>
 <p><label>Expiry date: <input name=clubexp type=month></label></p>
</fieldset>

Open in new window

0
RobOwner (Aidellio)Commented:
I'm aware the HTML5 spec is still DRAFT, however the case remains as @AB has said that the use of the BR tag hasn't changed and is very specific on how it should be used.
0
RobOwner (Aidellio)Commented:
Yes the label does replace the need for the "for" attribute.  AS you can see here by clicking the label of any of the elements, gives them focus

http://jsfiddle.net/rjurd/2gsfM/
0
AngryBinaryCommented:
1. Can you provide your custom control markup/code-behind? I have successfully implemented styled controls in the past, but it is not always a straightforward thing. I can help identify the pitfalls.

2. The reason for the bias towards web applications are multi-fold - scalability, ease of maintenance, ease of deployment, it makes sense when you compare server hardware life cycle vs. workstation hardware life cycle... in my experience, a well executed web application can be every bit as responsive, stable, and consistent as a desktop application. More so, even, since desktop applications almost always live in different environments than where they were developed, and those environments are much more subject to change than a server environment. I've been involved in many successful web app implementations (internet AND intranet) that would be far less feasible as desktop applications for these reasons.

What your basically saying, though, is that someone built a house out of sand, it fell down, and decided that houses were not the way to go. It requires a different mindset and architectural perspective than desktop applications; because a web application is more open in terms of architectural possibilities, you are forced to either make architectural considerations or face poor execution.
0
COBOLdinosaurCommented:
      recommendation == standard  //false
        example == standard            //false
        note==standard                    //false
        code validates == standard    // true
:^)
standard == XHTML1.0 strict


Cd&
valid-xhtml10.png
0
AngryBinaryCommented:
Well, the nice thing about standards is there are so many to choose from.
0
RobOwner (Aidellio)Commented:
@Cd is that equality "==" or identity "===" ? :P
0
COBOLdinosaurCommented:
obb-taurus,

You are right in some respect about the use of web apps versus desktop apps.  In the 46 years that I have been in this business I have witnessed a lot transitions from the time when I was writing assembler for computers the size of box cars to caring around devices that can take me anywhere in the world.  The direction of technology is not driven by anything logical. Something can be done so somebody does it.  Somebody else sees a way to make a lot of money by promoting it.  

Companies move to new "gee whiz" toys not because they need it but because the executives do not have any clue about technology except they just read somewhere that all the big companies are doing {plugin any technology} so they have to show how modern they are by wasting money are stuff they don't need.  Meanwhile consumer demand generate so much money that there is always someone waiting to invest in whatever someone manages to invent.

Now that I am retired, I keep my hand in but the nice part is I don't have to do projects that are stupid anymore.

Cd&
0
RobOwner (Aidellio)Commented:
@OB has made a good point about having resources available to be able to dot every i and cross every t.  Sometimes you just need to get the job done because your boss needs you to.

I know of multinational companies (in the medical industry too!) that will still put a product out to maintain their position in the marketplace, where they have complied with the absolute minimum that they need to with any relevant governing standard.  There are always issues post launch but the business will see this as negligible to the cost of getting the product perfect in the first place.  I've used the extreme case of the medical industry as they are forced to comply with certain standards but that doesn't mean their product is infallible.

They had to do things a little differently to that of a "perfect" implementation but it was faster to do so and deemed a greater risk to the business to hold it back.
0
AngryBinaryCommented:
My experience regarding web applications has been very different. Granted, many of my clients are those Fortune 500 companies that everyone else is trying to emulate for no good reason, so they aren't really interested in playing catch-up. In fact, they are usually very resistant to change, since changing the direction of the Titanic requires a lot more coal than turning a rowboat around.

They are by no means a one-size-fits-all solution to any problem. Web applications are inherently more difficult and complex than desktop applications. In fact, the number one reason why I see web applications fail is because many decision makers don't realize the extent to which that is true, and the people that wind up implementing them don't have the competency to do so. A great C# programmer can turn out a great desktop app, but couldn't necessarily turn out a half-decent web application without an equally thorough understanding of HTTP protocol, HTML, JavaScript, the ASP.NET framework (which is a whole other topic on top of C# - page life cycle, HTTP handlers and modules, etc.), and to some extent, even distributed application architecture.

So, people throw around words like "scalability" and "service-oriented" when talking about the merits of web applications. Here are specific cases pulled from the bowels of my experience where they were the optimal solution, and why:

1. A pharmaceutical company has a system that tracks the chain of custody of various materials around a campus of a dozen or so buildings. The job functions of the users vary, and the tools that they use vary. Most users have a Windows PC workstation, but some are on Unix, and recently some users have migrated heavily to mobile tablet devices that they carry around with them from one place to another.

- A web application doesn't need to be written and maintained for 3 different platforms.

- Updates are immediately available to all users without requiring a patch or install.

- In the event a user's hardware fails, they can drag another laptop over to their desk, log in to the network, and immediately be productive again.

- The application environment is controlled. One OS runs all the application code, one type of database driver connects you to the back end, and any time any of these things need to change, it only has to happen once.

2. A shoe/clothing company has a relatively small number of users in the marketing division (<12) that run reports based on customer demographics. The data solution we implemented was a multi-dimensional database (cube), which can slice and dice tens of millions of records in less than a second (i.e. how many customers have kids that have bought [basketball player name] shoes in sizes 7-9 last summer in the midwest?) Even with all this power, the language used to interact with cube databases (MDX) is fundamentally different from SQL and very difficult to pick up at an advanced level; your most technically proficient marketing agent wouldn't be able to harness the power of the database without a GUI. I developed a drag-and-drop solution that allowed them to dynamically add dimensions, nested conditions, and display at every level of nesting what the impact on overall aggregation those conditions had.

- Even though the users were running aggregate reports, the intense usage still resulted in GB of data moving from the database to the application layer. Deployed to an application server on the same machine as the cube, performance is drastically improved and network traffic at that node considerably reduced. Granted, you can do the same with a desktop app front-end and using something like web services to just deliver the data required to build the UI, but that's still essentially a web application, and brings us to:

- HTML worked phenomenally for the drag-drop UI. Boatloads of time was spared writing a framework of custom drawn controls of variable size boxes with variable length text containing multiple interactive elements that can be dragged into each other and rearranged, when an HTML document already IS all of that right out of the box.

So, this is getting long winded, but I think the point is, there are very real reasons why the technology exists. I think at the end of the day, it's good to have more than one tool in your toolbox, because when all you have is a hammer...
0
obb-taurusAuthor Commented:
I have to admit, this whole layout thing is really beginning to frustrate me.  I don't think this should be so difficult as what I'm trying to do is in my opinion very basic.  I've tried many variations on the samples provided in this thread but always seem to come up with some sort of issue.  On top of that, the only browser that my layout appears remotely like I want is in Firefox

Here is the code for my ASP.NET user control, it looks fine in Visual Studio 2010 in the ascx file but as soon as I embed it in a web page it gets totally messed up.

 
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AddressInput.ascx.cs"
    Inherits="UserControls_AddressInput" %>
<style type="text/css">
    #controlwrapper
    {
        width: 500px;
    }
    
    fieldset
    {
        border: 0;
    }
    
    .controllabel
    {
        display: block;
        float: left;
        width: 100px;
    }
    .controltextBox
    {
        display: block;
        float: left;
        width: 125px;
    }
    
    .controllongtextBox
    {
        display: block;
        float: left;
        width: 375px;
    }
    
    .controlset
    {
        clear: both;
        display: block;
        width: 250px;
    }
    
    #controlset1, #controlset2
    {
        clear: none;
        float: left;
    }
    
    #controlset3, #streetCtrl
    {
        width: 500px;
    }
</style>
<div id="controlwrapper">
    <fieldset>
        <div class="controlset" id="controlset1">
            <asp:Label ID="lblFirstName" runat="server" Text="First Name:" AssociatedControlID="firstName"
                CssClass="controllabel" />
            <asp:TextBox ID="firstName" runat="server" CssClass="controltextBox"></asp:TextBox>
        </div>
        <div class="controlset" id="controlset2">
            <asp:Label ID="lblLastName" runat="server" Text="Last Name:" AssociatedControlID="lastName"
                CssClass="controllabel" />
            <asp:TextBox ID="lastName" runat="server" CssClass="controltextBox"></asp:TextBox>
        </div>
        <div id="controlset3">
            <asp:Label ID="lblCompany" runat="server" Text="Company:" AssociatedControlID="company"
                CssClass="controllabel" />
            <asp:TextBox ID="company" runat="server" CssClass="controllongtextBox"></asp:TextBox>
        </div>
        <div id="streetCtrl">
            <asp:Label ID="Label1" runat="server" Text="Street:" AssociatedControlID="street"
                CssClass="controllabel" />
            <asp:TextBox ID="street" runat="server" CssClass="controllongtextBox"></asp:TextBox>
        </div>
        <div class="controlset" id="controlset4">
            <asp:Label ID="Label13" runat="server" Text="City:" CssClass="controllabel"></asp:Label>
            <asp:TextBox ID="city" runat="server" CssClass="controltextBox"></asp:TextBox>
        </div>
        <div class="controlset" id="controlset5">
            <asp:Label ID="Label14" runat="server" Text="Province:" CssClass="controllabel"></asp:Label>
            <asp:TextBox ID="province" runat="server" CssClass="controltextBox"></asp:TextBox>
        </div>
        <div class="controlset" id="controlset6">
            <asp:Label ID="Label15" runat="server" Text="Postal Code:" CssClass="controllabel"></asp:Label>
            <asp:TextBox ID="postalCode" runat="server" CssClass="controltextBox"></asp:TextBox>
        </div>
    </fieldset>
</div>

Open in new window

0
obb-taurusAuthor Commented:
Thought I would also add an image of how I want this to look.  This is actually how it looks in Visual Studio in my user control file and this is pretty well what I want except I also want to add some space between each group.  When it's embedded into a web form, doesn't look remotely close to the attached image.

Screen shot
0
AngryBinaryCommented:
Maybe this would help... post the HTML source of a page as rendered in a browser using "View Source" so we can see how ASP.NET renders the HTML. Whenever I'm styling controls in ASP.NET, I start from the rendered HTML and work my way backwards to achieve the desired results with standard/custom controls.

An invaluable tool for me when troubleshooting layout issues is the F12 debugger on IE (and developer tools in Chrome and Firefox) that allow you to "live edit" the styles and markup.
0
obb-taurusAuthor Commented:
AngryBinary,

Here is the HTML source that is rendered in IE.


<!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">
<head><title>

</title></head>
<body>
    <form method="post" action="Default2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTg0NTQ2NDQwM2RklYGoyLOFhJ8tFFbsnMbT6iMW5BaKaMkakfPuo1WrWzM=" />
</div>

<div class="aspNetHidden">

      <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCAKPtLHGDQKnpN3DCAKGz6jgBAKq4OrRDgLz96fOBQKn1uyjAgLFpo7DDwKU0IytAdEBvx+p7eYaZROl2aRtLJULPCnakqS8JE1vEUG6IGV6" />
</div>
    <div>
   
       
<style type="text/css">
    #controlwrapper
    {
        width: 500px;
    }
   
    fieldset
    {
        border: 0;
    }
   
    .controllabel
    {
        display: block;
        float: left;
        width: 100px;
    }
    .controltextBox
    {
        display: block;
        float: left;
        width: 125px;
    }
   
    .controllongtextBox
    {
        display: block;
        float: left;
        width: 375px;
    }
   
    .controlset
    {
        clear: both;
        display: block;
        width: 250px;
    }
   
    #controlset1, #controlset2
    {
        clear: none;
        float: left;
    }
   
    #controlset3, #streetCtrl
    {
        width: 500px;
    }
</style>
<div id="controlwrapper">
    <fieldset>
        <div class="controlset" id="controlset1">
            <label for="AddressInput1_firstName" id="AddressInput1_lblFirstName" class="controllabel">First Name:</label>
            <input name="AddressInput1$firstName" type="text" id="AddressInput1_firstName" class="controltextBox" />
        </div>
        <div class="controlset" id="controlset2">
            <label for="AddressInput1_lastName" id="AddressInput1_lblLastName" class="controllabel">Last Name:</label>
            <input name="AddressInput1$lastName" type="text" id="AddressInput1_lastName" class="controltextBox" />
        </div>
        <div id="controlset3">
            <label for="AddressInput1_company" id="AddressInput1_lblCompany" class="controllabel">Company:</label>
            <input name="AddressInput1$company" type="text" id="AddressInput1_company" class="controllongtextBox" />
        </div>
        <div id="streetCtrl">
            <label for="AddressInput1_street" id="AddressInput1_Label1" class="controllabel">Street:</label>
            <input name="AddressInput1$street" type="text" id="AddressInput1_street" class="controllongtextBox" />
        </div>
        <div class="controlset" id="controlset4">
            <span id="AddressInput1_Label13" class="controllabel">City:</span>
            <input name="AddressInput1$city" type="text" id="AddressInput1_city" class="controltextBox" />
        </div>
        <div class="controlset" id="controlset5">
            <span id="AddressInput1_Label14" class="controllabel">Province:</span>
            <input name="AddressInput1$province" type="text" id="AddressInput1_province" class="controltextBox" />
        </div>
        <div class="controlset" id="controlset6">
            <span id="AddressInput1_Label15" class="controllabel">Postal Code:</span>
            <input name="AddressInput1$postalCode" type="text" id="AddressInput1_postalCode" class="controltextBox" />
        </div>
    </fieldset>
</div>

   
    </div>
    </form>
</body>
</html>
0
AngryBinaryCommented:
The problem is that your elements are sized to fit precisely into the controlwrapper, but the fieldset introduces an out-of-the-box padding and margin which crowds out the content.

So, a fix is easy... just modify this bit:

    fieldset
    {
        border: 0;
        margin: 0;
        padding: 0;
    }
0
AngryBinaryCommented:
Oh, and to add some vertical spacing between groups, modify the following styles:

    .controltextBox
    {
        width: 125px;
    }
   
    .controllongtextBox
    {
        width: 375px;
    }
   
    .controlset
    {
        clear: both;
        display: block;
        width: 250px;
        margin: 0 0 10px 0; /* or, margin-bottom:10px; */
    }
0
AngryBinaryCommented:
Oh, and I didn't see you removed the "controlset" class from "streetctrl" and "controlset3" - it should be on all the divs in the fieldset.
0
obb-taurusAuthor Commented:
That got me closer but not all the way.  It seems to be ignoring the margin and now the last name is on the line below the first name.  

 
<!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">
<head><title>

</title></head>
<body>
    <form method="post" action="Default2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTg0NTQ2NDQwM2RklYGoyLOFhJ8tFFbsnMbT6iMW5BaKaMkakfPuo1WrWzM=" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCAKPtLHGDQKnpN3DCAKGz6jgBAKq4OrRDgLz96fOBQKn1uyjAgLFpo7DDwKU0IytAdEBvx+p7eYaZROl2aRtLJULPCnakqS8JE1vEUG6IGV6" />
</div>
    <div>
    
        
<style type="text/css">
    #controlwrapper
    {
        width: 500px;
    }
    
    fieldset
    {
        border: 0;
    }
    
    .controllabel
    {
        display: block;
        float: left;
        width: 100px;
    }
    .controltextBox
    {
        display: block;
        float: left;
        width: 125px;
    }
    
    .controllongtextBox
    {
        display: block;
        float: left;
        width: 375px;
    }
    
    .controlset
    {
        clear: both;
        display: block;
        width: 250px;
    }
    
    #controlset1, #controlset2
    {
        clear: none;
        float: left;
    }
    
    #controlset3, #streetCtrl
    {
        width: 500px;
    }
</style>
<div id="controlwrapper">
    <fieldset>
        <div class="controlset" id="controlset1">
            <label for="AddressInput1_firstName" id="AddressInput1_lblFirstName" class="controllabel">First Name:</label>
            <input name="AddressInput1$firstName" type="text" id="AddressInput1_firstName" class="controltextBox" />
        </div>
        <div class="controlset" id="controlset2">
            <label for="AddressInput1_lastName" id="AddressInput1_lblLastName" class="controllabel">Last Name:</label>
            <input name="AddressInput1$lastName" type="text" id="AddressInput1_lastName" class="controltextBox" />
        </div>
        <div  class="controlset" id="controlset3">
            <label for="AddressInput1_company" id="AddressInput1_lblCompany" class="controllabel">Company:</label>
            <input name="AddressInput1$company" type="text" id="AddressInput1_company" class="controllongtextBox" />
        </div>
        <div class="controlset" id="streetCtrl">
            <label for="AddressInput1_street" id="AddressInput1_Label1" class="controllabel">Street:</label>
            <input name="AddressInput1$street" type="text" id="AddressInput1_street" class="controllongtextBox" />
        </div>
        <div class="controlset" id="controlset4">
            <span id="AddressInput1_Label13" class="controllabel">City:</span>
            <input name="AddressInput1$city" type="text" id="AddressInput1_city" class="controltextBox" />
        </div>
        <div class="controlset" id="controlset5">
            <span id="AddressInput1_Label14" class="controllabel">Province:</span>
            <input name="AddressInput1$province" type="text" id="AddressInput1_province" class="controltextBox" />
        </div>
        <div class="controlset" id="controlset6">
            <span id="AddressInput1_Label15" class="controllabel">Postal Code:</span>
            <input name="AddressInput1$postalCode" type="text" id="AddressInput1_postalCode" class="controltextBox" />
        </div>
    </fieldset>
</div>

    
    </div>
    </form>
</body>
</html>

Open in new window




Current.PNG
0
AngryBinaryCommented:
You must have missed my earlier post, it doesn't look like you applied all the changes. Here is the CSS in it's entirety:

 
#controlwrapper
    {
        width: 500px;
    }
    
    fieldset
    {
        border: 0;
		margin: 0;
		padding: 0;
    }
    
    .controllabel
    {
        display: block;
        float: left;
        width: 100px;
    }
    .controltextBox
    {
        width: 125px;
    }
    
    .controllongtextBox
    {
        width: 375px;
    }
    
    .controlset
    {
        clear: both;
        display: block;
        width: 250px;
		margin: 0 0 10px 0;
    }
    
    #controlset1, #controlset2
    {
        clear: none;
        float: left;
    }
    
    #controlset3, #streetCtrl
    {
        width: 500px;
    }

Open in new window

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
obb-taurusAuthor Commented:
Actually, I did apply all the changes but have found out the problem.  It's IE 9, when I view it in Firefox it displays properly but in IE 9 it has the first and last name on seperate lines although I think both browsers are ignoring the bottom margin in .controlset.
0
RobOwner (Aidellio)Commented:
I ran the code above on IE9 and it has them on the same line
Clipboard01.jpg
0
RobOwner (Aidellio)Commented:
0
AngryBinaryCommented:
If it appears that the browser is "ignoring" the bottom margin, it is likely that the contents of the controlset divs are being floated. This means that they aren't causing their container div to expand to the size of the contents.

If the controls are wrapping, it means that the fieldset div has not had the margin and padding style zeroed out.

Make sure you have replaced all your CSS with the CSS I provided - and paste the contents of your rendered HTML after doing so. The last code you pasted did not include the CSS changes that I provided.
0
obb-taurusAuthor Commented:
Ok, I'm feeling pretty stupid right now.  I originally was using an external CSS file but was always having to change the href in my ascx control because when I embedded the control in my web page it couldn't find the CSS file.  When I posted my code for the ascx control I moved the CSS into the ascx file but when I was putting your modifications in I inserted them into the external CSS file, now that I figured that out the form is displaying as expected.

This has been quite the topic and I greatly appreciate everyones help.

0
COBOLdinosaurCommented:
If nothing else the last few hours has demonstrated how frustrating asp can be.


Cd&

0
AngryBinaryCommented:
Well, that's good news nonetheless. Stupid problems have simple solutions :)
0
COBOLdinosaurCommented:
lol


Cd&
0
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.