I want a page where there are buttons all the same size. No problem there.

But I also have a type="text" with some text in front. I'd like that
combination to be the same size as the buttons.

So I put them into to a scan element and applied the same css class to the
scan as the buttons have.

That didn't work so I modified the code a little as shown below and that
does not work either.

So I put together the test sample shown below and that does not produce a
symetriacl layout.

Can you tell me how to fix this?



Thanks





<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master"
AutoEventWireup="false"

CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent"
runat="Server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

..Most

{

width: 300px;

}


..Combo

{

width: 300px !important;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent"
runat="server">

<br />

<input class="Most" type="button" value="test" />

<input class="Most" type="button" value="test" />

<br />

<span class="Combo">Latitude:

<input id="txtLat" type="text" value="" />

</span>

<input class="Most" type="button" value="test" />

<br />

<input class="Most" type="button" value="test" />

<input class="Most" type="button" value="test" />

</asp:Content>

On Apr 25, 7:21*pm, " Cal Who" <CalWhoNOS...@roadrunner.com> wrote:
> I want a page where there are buttons all the same size. No problem there..
>
> But I also have a type="text" with some text in front. I'd like that
> combination to be the same size as the buttons.
>
> So I put them into to a scan element and applied the same css class to the
> scan as the buttons have.
>
> That didn't work so I modified the code a little as shown below and that
> does not work either.
>
> So I put together the test sample shown below and that does not produce a
> symetriacl layout.
>
> Can you tell me how to fix this?
>
> Thanks
>
> <%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master"
> AutoEventWireup="false"
>
> CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
>
> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent"
> runat="Server">
>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
>
> <style type="text/css">
>
> .Most
>
> {
>
> width: 300px;
>
> }
>
> .Combo
>
> {
>
> width: 300px !important;
>
> }
>
> </style>
>
> </asp:Content>
>
> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent"
> runat="server">
>
> <br />
>
> <input class="Most" type="button" value="test" />
>
> <input class="Most" type="button" value="test" />
>
> <br />
>
> <span class="Combo">Latitude:
>
> <input id="txtLat" type="text" value="" />
>
> </span>
>
> <input class="Most" type="button" value="test" />
>
> <br />
>
> <input class="Most" type="button" value="test" />
>
> <input class="Most" type="button" value="test" />
>
> </asp:Content>

The problem is that you decided to have <span> which does not "hold"
all space by default. Add more attributes to it's definition

for example

..Combo
{
width: 300px;
display: block;
float: left;
}

where "display block" will generate a block box

Alexey Smirnov wrote:
> On Apr 25, 7:21 pm, " Cal Who" <CalWhoNOS...@roadrunner.com> wrote:
>> I want a page where there are buttons all the same size. No problem
>> there.
>>
>> But I also have a type="text" with some text in front. I'd like that
>> combination to be the same size as the buttons.
>>
>> So I put them into to a scan element and applied the same css class
>> to the scan as the buttons have.
>>
>> That didn't work so I modified the code a little as shown below and
>> that does not work either.
>>
>> So I put together the test sample shown below and that does not
>> produce a symetriacl layout.
>>
>> Can you tell me how to fix this?
>>
>> Thanks
>>
>> <%@ Page Title="Home Page" Language="vb"
>> MasterPageFile="~/Site.Master" AutoEventWireup="false"
>>
>> CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
>>
>> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent"
>> runat="Server">
>>
>> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
>>
>> <style type="text/css">
>>
>> .Most
>>
>> {
>>
>> width: 300px;
>>
>> }
>>
>> .Combo
>>
>> {
>>
>> width: 300px !important;
>>
>> }
>>
>> </style>
>>
>> </asp:Content>
>>
>> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent"
>> runat="server">
>>
>> <br />
>>
>> <input class="Most" type="button" value="test" />
>>
>> <input class="Most" type="button" value="test" />
>>
>> <br />
>>
>> <span class="Combo">Latitude:
>>
>> <input id="txtLat" type="text" value="" />
>>
>> </span>
>>
>> <input class="Most" type="button" value="test" />
>>
>> <br />
>>
>> <input class="Most" type="button" value="test" />
>>
>> <input class="Most" type="button" value="test" />
>>
>> </asp:Content>
>
> The problem is that you decided to have <span> which does not "hold"
> all space by default. Add more attributes to it's definition
>
> for example
>
> .Combo
> {
> width: 300px;
> display: block;
> float: left;
> }
>
> where "display block" will generate a block box


Did not work fo two reasons:
1) I need it to be inline because there is other stuff on the line.
2)It did not increase the width which displays just sufficient to display
the two element's contents.


Thanks

Cal Who wrote:
> Did not work fo two reasons:
> 1) I need it to be inline because there is other stuff on the line.

Try
display: inline-block;

--
Andrew

"Andrew Morton" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Cal Who wrote:
>> Did not work for two reasons:
>> 1) I need it to be inline because there is other stuff on the line.
>
> Try
> display: inline-block;
>
> --
> Andrew
>

What's the difference between inline and inline-block?


Anyway that did not do it (at first).

I realized that I had used vs2010 to generate the test site and it adds much
baggage as default.

So I had it generate an empty site and tried that.

My markup was the same as what I publised before.

Then I tried little things like removing the two runat="server" and added
the action attribute to the form element.

I'm groping, just trying anything.

Then I tried using span as the selector and removing the class attribute.

That worked.

I tried different things and as Alexey Smirnov said there had to be more
than just the width for it to work.

Without inline-block the size was not exactly right

But with the width and the display: inline-block it looks good.



Any idea why the below does not even show a border?

Also, does anyone know what the rule is if I have both a style and a class
attribute on a element?


Thanks


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb"
Inherits="WebApplication2.WebForm1" %>
<!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>
<style type="text/css">
..Most
{
width: 300px;
}
Combo
{
width: 300px;
display: inline-block;
float: left;
border: 4px solid red;
}
</style>
</head>
<body>
<form id="form1" action="WebForm1.aspx">
<br />
<input class="Most" type="button" value="test" />
<input class="Most" type="button" value="test" />
<br />
<span class="Combo">Latitude:
<input id="txtLat" type="text" value="" />
</span>
<input class="Most" type="button" value="test" />
<br />
<input class="Most" type="button" value="test" />
<input class="Most" type="button" value="test" />
</form>
</body>
</html>

Had dropped a "." which I added below
" Cal Who" <(E-Mail Removed)> wrote in message
news:hr4ihg$lhc$(E-Mail Removed)...
>
> "Andrew Morton" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> Cal Who wrote:
>>> Did not work for two reasons:
>>> 1) I need it to be inline because there is other stuff on the line.
>>
>> Try
>> display: inline-block;
>>
>> --
>> Andrew
>>
>
> What's the difference between inline and inline-block?
>
>
> Anyway that did not do it (at first).
>
> I realized that I had used vs2010 to generate the test site and it adds
> much baggage as default.
>
> So I had it generate an empty site and tried that.
>
> My markup was the same as what I publised before.
>
> Then I tried little things like removing the two runat="server" and added
> the action attribute to the form element.
>
> I'm groping, just trying anything.
>
> Then I tried using span as the selector and removing the class attribute.
>
> That worked.
>
> I tried different things and as Alexey Smirnov said there had to be more
> than just the width for it to work.
>
> Without inline-block the size was not exactly right
>
> But with the width and the display: inline-block it looks good.
>
>
>
> Any idea why the below does not even show a border?
>
> Also, does anyone know what the rule is if I have both a style and a class
> attribute on a element?
>
>
> Thanks
>
>
> <%@ Page Language="vb" AutoEventWireup="false"
> CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1" %>
> <!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>
> <style type="text/css">
> .Most
> {
> width: 300px;
> }
> .Combo
> {
> width: 300px;
> display: inline-block;
> float: left;
> border: 4px solid red;
> }
> </style>
> </head>
> <body>
> <form id="form1" action="WebForm1.aspx">
> <br />
> <input class="Most" type="button" value="test" />
> <input class="Most" type="button" value="test" />
> <br />
> <span class="Combo">Latitude:
> <input id="txtLat" type="text" value="" />
> </span>
> <input class="Most" type="button" value="test" />
> <br />
> <input class="Most" type="button" value="test" />
> <input class="Most" type="button" value="test" />
> </form>
> </body>
> </html>
>