Any alternatives to <p>?

[markknowsley]

Hi,

I would normally use tables to layout text on a web form, but I've been having a go at using CSS to do the same and found that it is much more powerful.

My question regards the spacing of lines; normally I would use the <tr> command and insert web controls such as labels inside. I could control the vertical spacing between each control by using the

style="height: 10px";

syntax.

Now I'm using CSS, I would like to know the best way to set the vertical height. If I use the <p></p> syntax to essentially create new table rows inside a <div> how can I control the vertical height, or is there a better way than using <p></p>?

Thanks in advance.

 

[ca8msm]

Have a look at the "line-height" attribute


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[ca8msm]

Oh, and you probably want to specify the height in em's to help if the user changes their font size e.g.

line-height: 1.5em

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[Vragabond]

Although I am not sure what you're trying to achieve, you should use <label> for labels on the form. As for styling, you need to decide what you are styling. If it is margins on top and bottom of the label, use margins. If it is padding, use padding, if it is heigh or line-height, use that. There are so many options and only you, who can see your code, know which one applies best.

 

[markknowsley]

What I'm trying to do is to lay out some controls in a table format without using the <table> syntax. The problem is that if I use <p></p> the browser automatically puts space between the controls.

I'm trying to work out how to layout the controls without leaving any vertical space between them.

 

[markknowsley]

It looks like i can use the <br /> syntax to achieve this, but I've read more than once that this is a bad habit to get into - any comments?

Also, here's an example of what I'm trying to achieve:

<table style="margin-bottom: 15px; border-top: solid 1px #A52029; border-bottom: solid 1px #A52029; border-right: solid 1px #A52029; border-left: solid 1px #A52029;">
			                <tr>
			                    <td>
			                        <asp:Label ID="Label22" runat="server" CssClass="LabelStyleNormal" text="Alias:"></asp:Label>
			                    </td>
			                    <td>
			                        <asp:Label ID="lblAlias" cssclass="LabelStyleNormal" runat="server"></asp:Label>
			                    </td>
			                </tr>
			                <tr>
			                    <td>
			                        <asp:Label ID="Label2" runat="server" CssClass="LabelStyleNormal" text="Status:"></asp:Label>
			                    </td>
			                    <td>
			                        <asp:Label ID="lblStatus" cssclass="LabelStyleNormal" runat="server"></asp:Label>
			                    </td>
			                </tr>
			                <tr>
			                    <td>
                                    <asp:Label ID="Label6" runat="server" cssclass="LabelStyleNormal" text="Contact Tel No:"></asp:Label>
			                    </td>
			                    <td>
			                        <asp:Label ID="lblTelNo" cssclass="LabelStyleNormal" runat="server" ></asp:Label>
			                    </td>
			                </tr>
			                <tr>
			                    <td>
			                        <asp:Label ID="Label7" cssclass="LabelStyleNormal" runat="server" Text="Start Date:"></asp:Label>
			                    </td>
			                    <td>
			                        <asp:Label ID="lblStartDate" cssclass="LabelStyleNormal" runat="server"></asp:Label>
			                    </td>
			                </tr>
			                <tr>
			                    <td>
			                        <asp:Label ID="Label8" cssclass="LabelStyleNormal" runat="server" text="End Date:"></asp:Label>
			                    </td>
			                    <td>
			                        <asp:Label ID="lblEndDate" cssclass="LabelStyleNormal" runat="server"></asp:Label>
                            
			                    </td>
			                </tr>
			            </table>

I want to achieve the same layout using CSS, not tables.

 

[Vragabond]

There are many examples out there of forms layed out with CSS instead of tables. Here's a good example:

http://www.themaninblue.com/experiment/InForm/

I would suggest a few things. AFAIK, ASP.NET does not translate <asp:Label> into a <label> tag but a span. Why this happens is probably known only to MS programmers but your form will benefit greatly if labels will be in label tags.

http://www.clagnut.com/blog/241/

An old but pretty good example at laying out forms with CSS and using a syntax a bit more appropriate than tables.

This should give you enough information to start developing a new, accessible form.

 

[ca8msm]

AFAIK, ASP.NET does not translate <asp:Label> into a <label> tag but a span.

Yes, that is correct unless you set one of it's properties (it's called "AssociatedControlID") and then it will render it as a label with the "for" attribute set as the ID of the associated control.

Slightly off-topic I know, but seeing as though it was mentioned I though it was perhaps relevant and good coding practice anyway as there's no reason to always be rendering span tags just because MS tries to force it as a default.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.