JavaScript and client side scripting.
Moderator: General Moderators
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Thu Oct 13, 2005 10:14 am
If you run this, you will see inspite of the first spans having a width of 100px they do not expand and stand close to the elements that come next to them.
Code: Select all
<div style="margin-top:20px; margin-left:50px; margin-right:30px; ">
<form name="frmFeedback" method="post" action="">
<div><span style="width:100px; ">Name</span><span style="color:#990000;">*</span> <input type="text" name="name" value="<?php echo $_POST["name"] ?>" /></div>
<div><span style="width:100px; ">Organisation</span><span style="color:#990000;">*</span> <input type="text" name="organisation" value="<?php echo $_POST["organisation"] ?>" /></div>
<div><span style="width:100px; ">Email</span> <input type="text" name="email" value="<?php echo $_POST["email"] ?>" /></div>
<div><span style="width:100px; ">Phone</span> <input type="text" name="phone" value="<?php echo $_POST["phone"] ?>" /></div>
<div><span style="width:100px; ">Project Title</span> <input type="text" name="project_title" value="<?php echo $_POST["project_title"] ?>" /></div>
<div><span style="width:100px; ">Comments</span><span style="color:#990000;">*</span> <textarea name="comments" rows="5" cols="40"> <?php echo $_POST["comments"] ?> </textarea></div>
<div><span style="width:100px; "></span><span><input type="submit" name="subFeedback" value="Submit Feedback" class="button" /></span></div>
</form>
</div>
Last edited by
raghavan20 on Thu Oct 13, 2005 12:47 pm, edited 1 time in total.
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Thu Oct 13, 2005 11:12 am
You can't change the dimensions of a <span> tags since they are not block-level elements, they are just sections of code
You'll need to use <div> tags along with the CSS "float" attribute
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Thu Oct 13, 2005 11:46 am
yes, d11wtq, I understand span elements are inline elements not block level.
have a look at this in IE and in Mozilla
Code: Select all
<span style = 'width:500px; color:blue; height: 50px; background-color:red;'>Do you call this as weird
behavior</span>
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098 Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia
Post
by Chris Corbyn » Thu Oct 13, 2005 12:09 pm
raghavan20 wrote: yes, d11wtq, I understand span elements are inline elements not block level.
have a look at this in IE and in Mozilla
Code: Select all
<span style = 'width:500px; color:blue; height: 50px; background-color:red;'>Do you call this as weird
behavior</span>
I'll guess that IE treats the span as block-level
It's no surprise that that's incorrect
If you use
Code: Select all
<div><div style="width:100px; float: left ">Name</div><div style="float: left"><span style="color:#990000;">*</span> <input type="text" name="name" value="<?php echo $_POST["name"] ?>" /></div></div>
You should have some joy
raghavan20
DevNet Resident
Posts: 1451 Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:
Post
by raghavan20 » Thu Oct 13, 2005 12:46 pm
you hv used two divs with float property which i think its not necessary as it wld work with a single float property
Code: Select all
<div><div style="width:100px; float: left ">Name</div><div style=""><span
style="color:#990000;">*</span> <input type="text" name="name" value="" /></div></div>
thanks for your help d11wtq