17 replies [Last post]
vardas
vardas's picture
Offline
newbie
Last seen: 10 years 43 weeks ago
Joined: 2010-11-30
Posts: 9
Points: 10

Hi,

Does anyone know how to make submit buttons and text input boxes exactly the same size? I have a submit button alongside a text input box and I would like the tops and bottoms to line up exactly.

I am sure this must be dead easy bit can't work out how Smile

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 10 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

What have you tried? Where is

What have you tried? Where is your code?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

vardas
vardas's picture
Offline
newbie
Last seen: 10 years 43 weeks ago
Joined: 2010-11-30
Posts: 9
Points: 10

Here is my current code

I have played with a load of different settings and the best I can achieve is with the following code (with this code I get a button where the top is lower than the top of the text box and the bottom is higher than the bottom of the text box):

From the CSS file
=================
input[type="locationtextbox"] {
color:orange;
width: 400px;
font: bold 100% sans-serif;
text-align:center;
letter-spacing:2px;
height:20px;
}

input[type="submit"], input[type="button"] {
color: #ffffff;
font: bold 100% sans-serif;
text-align:center;
text-decoration:none;
/* height:18px; */
letter-spacing:2px;
background-color: #f66e23;
height: 20px;
border:0px;
/* padding: -6px 4px 6px 4px; */
/* border-color: #f66e23 #f66e23 #f66e23 #f66e23; */
}

From the code file
==================
input id="location1" type="locationtextbox" value="Enter your address here" size=54
input type="button" value="Locate on map" onClick="codeAddress()"

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 31 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CSS is meaningless without

CSS is meaningless without the accompanying html markup.

We need to see ALL your html and ALL your CSS. Either by themselves isn't helpful.

Please read the site posting guidelines linked to in my message footer, and them follow them for the best help.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

vardas
vardas's picture
Offline
newbie
Last seen: 10 years 43 weeks ago
Joined: 2010-11-30
Posts: 9
Points: 10

Is this better

I did read the guidelines but must have misunderstood them. Sorry. I thought the guidelines were to only show the relevant code not all the code. Here is the full CSS:

@charset "UTF-8";
/* Colors:
f66e23 = Tam's orange
*/
body {
	background-color:#ffffff;
	color:#2b2b2b;
	font-family:sans-serif;
	font-size:14px;
}
 
h1 {
	color:#2b2b2b;
	font-size:16px;
	text-align:center;
	letter-spacing:2px;
}
 
img {
	border-style:none;
}
 
a, a:link, a:visited {
	color:#2b2b2b;
	text-decoration:none;
	font-weight:bold;
	letter-spacing:0px;
}
 
a:active, a:hover {
	color:#f66e23;
	text-decoration:none;
	font-weight:bold;
	letter-spacing:0px;
}
 
/* Text box for entering location address */
input[type="locationtextbox"] {
	color:orange;
	width: 400px;
	font: bold 100% sans-serif;
	text-align:center;
	letter-spacing:2px;
	height:20px;
}
 
input[type="submit"], input[type="button"] { 
	color: #ffffff; 
	font: bold 100% sans-serif;
	text-align:center;
	text-decoration:none;
	/* height:18px; */
	letter-spacing:2px;
	background-color: #f66e23; 
	height: 20px;
	border:0px;
	/* padding: -6px 4px 6px 4px; */
	/* border-color: #f66e23 #f66e23 #f66e23 #f66e23; */
}
 
input[type="checkbox"] {
	position:relative;
	left:-5px;
}
 
table td {
	border:0px solid;
	border-color:black;
}
 
 
 
/* Bill Added .left and .right */
.left {
	margin-top:5px;
	text-align:left;
	width:70%;
}
.right {
	margin-left:auto;
	margin-right:auto;
	text-align:right;
	width:70%;
}
 
 
 
.centre {
	margin-left:auto;
	margin-right:auto;
	width:70%;
}
 
.centre_div {
	margin: 0 auto;
}
 
/* Orange Bar */
.break {
	background-color:#f66e23;
	height:2px;
	width:100%;
	border-left:5px;
	border-right:5px;
	border-style:solid;
	border-color:#f66e23;
}
 
.spacing_break {
	background-color:#ffffff;
	height:40px;
	width:100%;
}
 
.little_spacing_break {
	background-color:#ffffff;
	height:20px;
	width:100%;
}
 
.top_navigation {
	text-align:right;
}
 
/* For copyright text at the bottom of each page */
.bottom_bar {
	font-size:12px;
	font-weight:lighter;
	width:100%;
	padding:0px;
	vertical-align:top;
	text-indent: 0px; 
}
 
.bottom_bar a {
	font-weight:lighter;
}
 
.title_colour {
	color:#f66e23;
}
 
.div_button_left {
	color: #ffffff; 
	font: bold 100% sans-serif;
	text-decoration:none;
	font-weight:bold;
	letter-spacing:2px;
 
	float:left;
	padding:3px;
	margin-right:5px;
	background-color:#f66e23;
	color:#ffffff;
}
 
.div_button_right {
	color: #ffffff; 
	font: bold 100% sans-serif;
	text-decoration:none;
	font-weight:bold;
	letter-spacing:2px;
 
	float:right;
	padding:3px;
	margin-left:5px;
	background-color:#f66e23;
	color:#ffffff;
}
 
.styled_checkbox {
	height:13px;
	width:13px;
	filter:alpha(opacity=0.0);
	opacity:0.0;
	outline:0
}
 
.styled_checkbox_wrap {
	position:relative;
	float:left;
	background:url("./images/checkbox.gif") no-repeat top left;
	width:13px;
	height:13px;
	margin:3px;
}
 
.wrap_checked {
	background-position: 0px -13px
}
 
.checkbox_label {
	float:left;
	cursor:pointer
}
 
.floating_number {
	position:relative;
	left:-38px;
	top:10px;
	width:33px;
	height:33px;
	background-color:#f66e23;
}
 
#content_frame {
	position:relative;
	top:20px;
	padding:10px;
}
 
#bottom_navigation {
	text-align:right;
}
 
#hidden_info {
	visibility:hidden;
}
 
#map_canvas_border {
/*	background-color:#f66e23;
	padding:5px; BILL CHANGE to remove orange border*/
	width:100%;
	height:480px;
}
 
#map_canvas {
	width:100%;
	height:100%;
}

And here is the PHP file that generates the html:

<?php
	if($alert)	echo '<p>'.$alert.'</p>';
	global $page_title;
	global $window_title;
	global $header_data;
	//$page_title.='Welcome to '.$WORD['SITE_TITLE'].'!';
	$page_title.='What Do You Want To See?';
	$window_title.='Welcome!';
	initMaps('map_canvas');
	$header_data.='
	<script type="text/javascript">
		function show_all_locations() {
 
		}
	</script>';
 
	// Tell the initialise function that we want to display markers for every user on the map
	echo '<div id="starting_location" style="visibility:hidden;">'."SHOW_ALL_USERS".'</div>';
	//echo '<div id="starting_location" style="visibility:hidden;">'."(51.399, -2.593)".'</div>'; // This puts marker at Bristol location
?>
<!--
<script type="text/javascript">
alert("about to call initialize");
		initialize(0,0);
</script>
-->
	<?php echo drawMap('map_canvas',0); ?> 
	<!-- Display address field. This will be geocoded when the Show Address button is pressed -->
	<!-- TAM: I guess we will need four of these. One for each of the four possible user locations? -->  
 
    <div class="left">
		<input id="location1" type="locationtextbox" value="Enter your address here" size=54>
		<input type="button" value="Locate on map" onClick="codeAddress()">
	</div>
	<p>Welcome to Vavavid! Sometime soon, there will be a homepage here. Not yet, though.</p>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 3 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

They dont want to see PHP,

They dont want to see PHP, but the parsed code.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 31 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CupidsToejam wrote: They dont

CupidsToejam wrote:

They dont want to see PHP, but the parsed code.

Indeed. The html sent out to the browser is what we need to see, since that's all the browser ever sees. What use is php code for diagnosing a problem with the resultant html?

(Cupid, I know you already know this, above para meant for OP).

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

vardas
vardas's picture
Offline
newbie
Last seen: 10 years 43 weeks ago
Joined: 2010-11-30
Posts: 9
Points: 10

Here is HTML sent to browser

OK I am learning Smile
Here is the HTML sent to the browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head><link rel="stylesheet" type="text/css" href="styles.css"/>
<title>Vavavid - Welcome!</title><script type="text/javascript" src="http://www.vavavid.com/include/functions.js"></script><script type="text/javascript" src="http://www.vavavid.com/include/markerclusterer.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">// sensor=true means app will make use of user location sensing via their GPS</script>
	<script type="text/javascript">
		var map = null
		var geocoder = null
		var allow_multiple_markers = true
		var add_marker_on_click = false
		var markers = new Array();
	</script>
	<script type="text/javascript">
		function show_all_locations() {
 
		}
	</script></head>
	<body onLoad="initialize(2,'map_canvas');">
		<table id="content_frame" class="centre">
			<tr>
				<td rowspan="6" colspan="2" valign="top" halign="left"><a href="?"><img src="./images/logov2.gif"></img></a></td>
				<td class="top_navigation"><a href="?p=
l ">login</a></td>
			</tr>
			<tr><td class="top_navigation"><a href="?p=r">register</a></td></tr>
			<tr><td class="top_navigation"><a href="?p=m">make request</a></td></tr>
			<tr><td class="top_navigation"><a href="?p=s">see requests</a></td></tr>
			<tr><td class="top_navigation"><a href="?p=a">my account</a></td></tr>
			<tr><td class="top_navigation"><a href="?p=c">contact</a></td></tr>
			<tr><td class="spacing_break" colspan="3"></td></tr>
			<tr><td colspan="3" style="text-align:right; font-size:12px;"></td></tr>
			<tr><td class="break" colspan="3"></td></tr> 
			<tr><td colspan="3"><h1>
What Do You Want To See?			</h1></td></tr>
			<tr><td class="break" colspan="3"></td></tr>
			<tr><td colspan="3"></td></tr>
			<tr><td colspan="3"><div id="starting_location" style="visibility:hidden;">SHOW_ALL_USERS</div><!--
<script type="text/javascript">
alert("about to call initialize");
		initialize(0,0);
</script>
-->
			<div id="map_canvas_border"><div id="map_canvas"></div></div>
 
	<!-- Display address field. This will be geocoded when the Show Address button is pressed -->
	<!-- TAM: I guess we will need four of these. One for each of the four possible user locations? -->  
 
    <div class="left">
		<input id="location1" type="locationtextbox" value="Enter your address here" size=54>
		<input type="button" value="Locate on map" onClick="codeAddress()">
	</div>
	<p>Welcome to Vavavid! Sometime soon, there will be a homepage here. Not yet, though.</p>			</td></tr>
			<tr><td class="spacing_break" colspan="3"></td></tr>
			<tr><td class="break" colspan="3"></td></tr>
 
			<tr><td height="20px" "colspan="3">
 
            <table class="bottom_bar" cellpadding="0" cellspacing="0"><tr><td>Copyright 2010 VaVaVid</td><td id="bottom_navigation" colspan="3"><a href="?p=
l ">login</a> | <a href="?p=r">register</a> | <a href="?p=m">make request</a> | <a href="?p=s">see requests</a> | <a href="?p=a">account details</a> | <a href="?p=c">contact</a></td></tr></table></td></tr></table>
 
</body>
</html>

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 31 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Table based layout.

Table based layout. Tongue

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

vardas
vardas's picture
Offline
newbie
Last seen: 10 years 43 weeks ago
Joined: 2010-11-30
Posts: 9
Points: 10

Don't understand

I am not sure what your comment "Table based layout Tongue " means? Is there any chance you could show me some sample code that gives a button the same dimensions as a text input box. I am clearly very much a novice here so any help you could give would be greatly appreciated.

vardas
vardas's picture
Offline
newbie
Last seen: 10 years 43 weeks ago
Joined: 2010-11-30
Posts: 9
Points: 10

Tried tables bit still can't get it to work

On the assumption that your comment meant I should use a table I have done so, and although I have managed to get the button and text input box to appear the same height on one browser (Safari) they are not the same size on Firefox or Opera. Any ideas how I can achieve absolute heights that are cross browser compatible?

vardas
vardas's picture
Offline
newbie
Last seen: 10 years 43 weeks ago
Joined: 2010-11-30
Posts: 9
Points: 10

Tried tables bit still can't get it to work

On the assumption that your comment meant I should use a table I have done so, and although I have managed to get the button and text input box to appear the same height on one browser (Safari) they are not the same size on Firefox or Opera. Any ideas how I can achieve absolute heights that are cross browser compatible?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 31 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Precisely the wrong

Precisely the wrong conclusion!

Please read through the help forums and you will find that we are strictly opposed to using tables for layout, ever. There are a lot of articles in the help forum that will address some of your issues, and I am not going to waste a lot of time repeating stuff that is already posted.

We cannot learn html/css for you, you have to learn it for yourself. That means effort and a lot of intense thought, none of which we can do for you. That's why there's a separate "help" forum, and why we've placed the "sticky" messages at the top of the message index in each separate forum. We've provided the information but we can't stuff it into your head, that's something only you can do.

The "table" tag and it's subtags have a valid and important use, but using it to lay out sections of your page is NOT one of them.

At this point you don't give any sign of having read and comprehended the site posting guidelines and until you are able to do that and follow the guidelines then we aren't going to be able to help you much.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

vardas
vardas's picture
Offline
newbie
Last seen: 10 years 43 weeks ago
Joined: 2010-11-30
Posts: 9
Points: 10

Did read, clearly didn't understand

1) I have read the guidelines, several times, but clearly haven't understood. I apologise profusely for this. I have tried but failed.
2) I am well aware that tables are not approved of which is why I was struggling to understand your comment "Table based layout. Tongue ". I still don't know what this comment means. Clearly I am very thick so would appreciate your indulgence.
3) I posted my question in your forum "Beginners CSS Questions;" because I am a beginner so kinda assumed novice questions were welcome.
4) Your "Beginners CSS Questions;" forum states "If you're new to CSS and haven't found what you need via a search or in How To section, ask here." I am new to CSS and I haven't found what I need. Please explain why my question was not appropriate to this forum.
5) My question is in keeping with the other questions posted so am surprised you are giving me such a hard time. Clearly this is entirely my fault but I cannot for the life of me understand why.

Either it is possible to have buttons lining up top and bottom with text input fields or it isn't. Please do say if you do not know the answer to this question and I will stop wasting your time. If you do know the answer then you would make me hugely happy if you were to reveal it.

I do sincerely and profusely apologise for annoying you. It is not my intention. Like you I like to share my knowledge on forums to help people, like me, who are having difficulty getting things to work. I try to be as understanding and as helpful as possible.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 31 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

vardas wrote: 2) I am well

vardas wrote:

2) I am well aware that tables are not approved of

Well then, you are "aware of" something that just isn't true. Tables are approved of by the W3C and have an intended use. For marking up tabular content tables are not only approved of but are in fact really the only right markup.

Tabular content is content where each line stands for some kind of record and each column stands for a certain particular kind of content, such as a particular field of a database record.

Tables were not designed for the layout of your site, though. If you look at a given bit if text the tags best used to mark them up are the html tags that describe them. A menu on the web is just a list of links to other pages. So the proper way to mark them up is with a list structure, usually the UL tag and it's contained LI tags.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 31 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

vardas wrote: I am not sure

vardas wrote:

I am not sure what your comment "Table based layout Tongue " means?

You are using the table tag to layout the major elements of your page, which is a bad practice and which you should stop. Learn to markup your content with html tags that reflect the meaning of the conent you are marking up. It's called "semantic markup" and is the way html was designed to be used.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

vardas
vardas's picture
Offline
newbie
Last seen: 10 years 43 weeks ago
Joined: 2010-11-30
Posts: 9
Points: 10

Yes indeed

Thank you for your helpful comments about tables.

I have cut down the HTML to a very small file, without tables of any kind. Here is the code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
/* Text box for entering location address */
input[type="locationtextbox"] {
	color:orange;
	width: 200px;
	font: bold 100% sans-serif;
	text-align:center;
	letter-spacing:2px;
	height:20px;
}
 
input[type="submit"], input[type="button"] { 
	color: #ffffff; 
	font: bold 100% sans-serif;
	text-align:center;
	text-decoration:none;
	letter-spacing:2px;
	background-color: #f66e23; 
	height: 20px;
	margin:0px;
	border:0px;
 
}
</style></head>
 
<p>&nbsp;</p>    
 
<div class="left">
<input id="location1" type="locationtextbox" value="Enter your address here" height="40">
<input type="button" value="Locate on map" onClick="codeAddress()" height="40">
</div>
 
<p>&nbsp;</p>    
</body>
</html>

Do you know how to achieve the effect I am after? I.e. have a button alongside a text input box where the tops and bottoms of the two items line up?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 10 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

There is not such "type" of

There is not such "type" of input as locationtextbox

You can use 'text' though. That should be what you're after.
Then in your CSS change it there as well.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph