Can't code a css class that makes a span element the same size as a button element

[Cal Who]

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>

 

[Guest]

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

 

[Cal Who]

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

 

[Andrew Morton]

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;

 

[Cal Who]

Try
display: inline-block;

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 Anon User 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>

 

[Cal Who]

Had dropped a "." which I added below

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 Anon User 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>