I have a fieldset with a div inside of it with labels and textboxes, labels and dropdowns as well as labels with checkboxes. Labels w/ textboxes align well, Labels w/ dropdown aligns well. However, i cannot get the checkbox to align with the label at all. What am i doing wrong?
<div class="col1">
<label id="lblVehicleID" for="txtVehicleID" class="vehicle_label">Vehicle ID:</label>
<asp:TextBox ID="txtVehicleID" runat="server" class="vehicle_input"></asp:TextBox>
<label id="lblName" for="txtVehicleName" class="vehicle_label">Vehicle Name:</label>
<asp:TextBox ID="txtVehicleName" runat="server" class="vehicle_input"></asp:TextBox>
<label id="lblCategorization" for="txtCategorization" class="vehicle_label">Categorization:</label>
<asp:TextBox ID="txtCategorization" runat="server" class="vehicle_input"> </asp:TextBox>
<label id="lblDomicileCountry" for="ddlDomicileCountry" class="vehicle_label">Domicile Country:</label>
<asp:DropDownList ID="ddlDomicileCountry" runat="server" CssClass="vehicle_dd"></asp:DropDownList>
<label id="lblUSOrganized" for="chkUSOrganized" class="vehicle_label">US Organized/Established:</label>
<asp:CheckBox ID="chkUSOrganized" runat="server" ></asp:CheckBox>
<label id="lblOfferedToNonUS" for="chkOfferedToNonUS" class="vehicle_label">Offered to Only Non-US:</label>
<asp:CheckBox ID="chkOfferedToNonUS" runat="server"></asp:CheckBox>
</div>
Here is the CSS:
.col1 {
width: 500px;
border: 1px solid black;
float: left;
padding: 5px;
}
.vehicle_label {
float:left;
width: 190px;
text-align:right;
padding-right:12px;
margin-top:12px;
clear:left;
font-family:Arial, Helvetica, sans-serif;
}
.vehicle_input, .vehicle_dd {
margin-top: 12px;
width:175px;
}
I have tried but to no avail:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
Any help would be greatly appreciated! I know there are questions similar to this one but have not been able to figure out what i am doing incorrectly.
Thank you
The Checkboxes were just floating next to the other input elements, try clearing the float with a clearfix after the input elements;
<div class=".clearfix"></div>
I have created a working demo of your code here;
http://jsfiddle.net/BmM2x/1/
Related
I'm currently changing from table based layouts to use div layout instead. I'm struggling with the css. My styles just don't seem to be getting applied even though the css file is loading. What am I doing wrong?
.CategoryHeader
{
font-family: Verdana;
font-size: 10pt;
color: #2151b1;
text-align: left;
padding-bottom:3px;
padding-top:3px;
}
.CriteriaHeader {
font-family: Verdana;
font-size: 10pt;
text-align: left;
padding-bottom:3px;
padding-top:3px;
}
.divTable {
display: table;
border: none;
width:100%;
}
.divTR {
display: table-row;
width: 100%;
}
.divTD {
display: table-cell;
margin-bottom:22px;
}
<div class="divTable">
<div class="divTR">
<div class="divTD">
<LABEL class="CriteriaHeader">Number</LABEL>
</div>
</div>
<div class="divTR">
<div class="divTD">
<asp:TextBox id="txtNumber" runat="server" CssClass="Textbox" ToolTip="Enter Number to search"></asp:TextBox>
</div>
</div>
<div class="divTR">
<div class="divTD">
<LABEL class="CriteriaHeader">Description</LABEL>
</div>
</div>
<div class="divTR">
<ajaxToolkit:ListSearchExtender ID="cboDesc_ListSearchExtender" runat="server"
Enabled="True" TargetControlID="cboDesc" PromptCssClass="ListSearch">
</ajaxToolkit:ListSearchExtender>
<div class="divTD">
<asp:DropDownList id="cboDesc" runat="server" CssClass="DropDownList" ToolTip="Choose description to search"></asp:DropDownList>
</div>
</div>
</div>
<div>
<asp:Button id="btnSearch" runat="server" Text="Submit" CssClass="Button"></asp:Button>
<asp:Button id="btnClear" runat="server" Text="Clear" CssClass="Button"></asp:Button>
</div>
Instead of using so many table property, you can use position:relative/absolute/fixed, display:inline/inline-block. They are absolutely compatible with IE6+ and non-IE browsers. Like table、table-row、table-cell，they are not absolutely for IE browser.
I have a checkbox with long text (about 5 or 6 lines). I'm trying to get the text indented and nicely aligned when it is wrapped. My current code works currently in IE but in Chrome, Safari, FireFox, the text is on a different line than the checkbox is. Does anyone know what I can be doing wrong here or have any other ways to accomplish this? Thanks for any help in advance!
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Info.ascx.cs"
Inherits="Project.Info" %>
<style type="text/css">
.CkbxFormat input
{
float: left;
}
.CkbxFormat label
{
display: inline-block;
}
</style>
<div style="margin-top: 10px; margin-left: 50px;">
<asp:Table ID="Table1" runat="server" Width="700px" CellSpacing="2" CellPadding="5"
Style="border: Solid 1px green;">
<asp:TableRow>
<asp:TableCell>
<asp:Label ID="Label1" runat="server" Text="Information"></asp:Label>
</asp:TableCell></asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<asp:CheckBox ID="CkBxInfo" runat="server" Text="The accessor of a property contains the executable statements associated with getting (reading or computing) or setting (writing) the property. The accessor declarations can contain a get accessor, a set accessor, or both. The body of the get accessor is similar to that of a method. It must return a value of the property type. The execution of the get accessor is equivalent to reading the value of the field. " CssClass="CkbxFormat"></asp:CheckBox>
</asp:TableCell></asp:TableRow>
</asp:Table>
</div>
Try this for the CSS:
.CkbxFormat label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
.CkbxFormat input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
I think that will get you very close to what you want.
Given the following markup
<div id="newItems" class="literaltext" >
<p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"
ClientIDMode="Static" /> Click
<a href="Shareholder Letter Jan 2013_Final.pdf" >here</a>
to read our President's letter to shareholder's for 2013
</p>
<br />
<p> <asp:Image runat="server" ImageUrl="~/Images/32x32.png"
ClientIDMode="Static" /> <span >Click
<a href="Calc.aspx" >here</a>
to run our <strong>Return on Investment Calculator</strong> to see how the economics of using <span class="green"><b>EnerBurn®</b></span> can work for your fleet.</span>
</p>
<br />
<asp:Literal ID="LiteralWelcome" runat="server"></asp:Literal>
</div>
and the following css;
#newItems {
display: inline-block;
}
#newItems img {
/*display: block;*/
margin: auto;
overflow: hidden;
}
#newItems span {
vertical-align: middle;
text-align: center;
margin-top: 0;
padding-top: 0;
}
I cannot get the text to the right of the image to align with the image. The image always appears much higher then the text. If i could vertically align the text in the middle of the height in the p tag it would at least look about right. I've tried about 50 variations, this being the latest.
vertical-align:middle;
on the img rule seems to work:
#newItems img {
/*display: block;*/
margin: auto;
overflow: hidden;
vertical-align:middle;
}
jsFiddle example
I'm looking for a straight forward css solution that will force labels to top align with their controls in asp. So for example:
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
Would appear something like:
Control Label
[[[[[]]]]]]]]]]]]V
Any ideas?
Wrap them both in a span or div:
<span class="field">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</span>
Then:
.field label,
.field select
{
display: inline-block;
vertical-align: top;
/* achieves same as inline-block for IE7 */
*display: inline;
*zoom: 1;
}
You can try putting them in a container, and apply specific styling for spans within that container. The example below might need a little tweaking, but it should point you in the right direction:
div.container span {
display: table-cell;
vertical-align: top;
}
div.container input {
display: table-cell;
vertical-align:middle;
}
And then on the page:
<div class="container">
<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />
</div>
I have the following html which is display correctly in IE8. Below is the html and the css for grey_btn_75. Any idea why this would be happening?
<div style="float: left; width: 70px; margin-right: 25px; padding-top: 60px;
margin-left: 25px">
<asp:Button ID="btnAddAll" runat="server" Text="Add All"
OnClick="btnAddAll_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnAdd" runat="server" Text="Add"
OnClick="btnAdd_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemove" runat="server" Text="Remove"
OnClick="btnRemove_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemoveAll" runat="server" Text="Remove All"
CssClass="grey_btn_75"
OnClick="btnRemoveAll_Click" /><br />
</div>
CSS:
.grey_btn_75
{
background: url(../images/grey-75px.png);
background-repeat: no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-weight: bold;
width: 75px;
height: 23px;
color: #000000;
cursor: pointer;
}
Things I have tried so far:
I removed the CssClass and the buttons still did not show up.
I modifed the CssClass and the buttons still did not show up.
I put other controls such as an asp:Label and and asp:ImageButton and they showed up fine.
I tried putting a new button and it did not show up.
Your div width is 70px, your button is 75px. You need to clean that up.
The problem is with the styles. Try commenting them out to see which one (or the combination) is responsible for the buttons to disappear.
Don't forget about the inline style of the top DIV as well.
This is a nice guide for button styles:
http://particletree.com/features/rediscovering-the-button-element/
People recommend
width:auto;
overflow:visible;
specifically for IE
I think it is the color value you have set in your CSS. I got the same problem previously and what I did was change the color value to something else.