|
CSS - <label> Not Properly Lining Up With <input>
Here is my problem:
keoasian .com/details If you look at the contact form, it does not properly line up. I've had this problem on another site before but I forget how I fixed it. The solution is probably simple, I just can't think of it. By the way, this may not show up on all browsers as a problem. I initially designed and tested this page on a Windows XP machine with 1024x768 running Google Chrome; now I am on a Mac OSX computer with 1280x800 resolution testing it on Chrome and Firefox. Similar TutorialsHi; i am trying to write a register form for user. i got a problem that the sign up of submit bottom doesn't sit properly after fill some invalid input and click the sign up bottom. but before fill anything to form, everything sit ok, no problem at all. And this problem happens in the IE browser, not in the Firefox browser. Could anyone help me find out the problem, please. please go to the link. http://writeanything.org/Register.php valid password 1) at least 8 char 2) at one lower char 3) at least one upper char 4) at least one digit please fill some invalid input to see the different before and after that. my code as following: Register.php PHP Code: <?php session_start(); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title> Welcome to login </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <head> <style type="text/css"> body{ padding: 0px; margin: 0px; border: 0px; background-color: white; } #container{ padding: 0px; border-top: 2px solid #1d2add; border-bottom: 2px solid #1d2add; border-left: 1px solid #3b44b5; border-right: 1px solid #3b44b5; margin-left: auto; margin-right: auto; margin-top: 5%; margin-bottom: auto; width: 330px; height: 370px; } #t1{ font-weight: bold; font-size: 18px; color: white; background-color:#3542eb; } form{ padding:0px; border: 0px; margin: auto; width: 280px; } #JoinMe { background-color: #41ac1c; padding: 2px; border: 2px solid #94e07a; color: white; font-size: 12px; font-weight: bold; } #JoinMe:hover { background-color: #237516; border: 2px solid #104108; padding: 2px; } table{ padding: 0; border: 0; margin: 0; } tr{ padding: 0; border: 0; margin: 0; } td{ padding: 0; border: 0; margin: 0; } .errorM{ padding:0; margin:0; font-weight: bold; font-size: 12px; color: red; background-color:white; } </style> </head> <body> <div id="container"> <form action="/RegisterP2.php" method="post"> <table> <tr><td colspan="2" id="t1">Welcome to join xxxx</td></tr> <?php if($_SESSION['register_flag']==0) echo ("<tr><td colspan=\"2\" class=\"errorM\">some invalid field below, please reenter again.</td></tr>"); ?> <tr><td> Email Address:</td><td><input type="text" name="email" maxlength="60" value="<?php if($_SESSION['register_flag']==0) echo $_SESSION['register_email']; ?>"><?php if($_SESSION['register_errorM_Email']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Email']; echo "</span>"; } ?></td></tr> <tr><td>Password:</td><td><input type="password" name="pass1" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td>Confirm Password:</td><td><input type="password" name="pass2" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="") { echo "<span class=\"errorM\">"; echo $_SESSION['register_errorM_Password']; echo "</span>"; } ?></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td> Display Name:</td><td><input type="text" name="DisplayName" maxlength="30"></td></tr> <tr><td> First Name:</td><td><input type="text" name="FirstName" maxlength="30"></td></tr> <tr><td>Last Name:</td><td><input type="text" name="LastName" maxlength="30"></td></tr> <tr><td>Country:</td><td><input type="text" name="Country" maxlength="30"></td></tr> <tr><td>State or City:</td><td><input type="text" name="StateCity" maxlength="30"></td></tr> <tr><td colspan="2"><hr></td></tr> <tr><td>Age</td><td><input type="text" name="age" maxlength="30"></td></tr> <tr><td>Gender:</td><td><input type="radio" checked="checked" name="Sex" value="male">Male <input type="radio" checked="checked" name="Sex" value="female">Female </td></tr> <tr><td colspan="2" align="right"> <input type="submit" name="Join" value="Sign Up" id="JoinMe"></td></tr> </table> </form> </container> </body> </html> ///////////////// RegisterP2.php PHP Code: <?php session_start(); //error massage for validate form $_SESSION['register_errorM_Email']=""; $_SESSION['register_errorM_Password']=""; //flag to check user input, 1=valid, 0=invalid $_SESSION['register_flag']=1; if(isset($_POST['Join'])){ $email_pattern = '#.*@.*\..*#'; $_SESSION['register_email'] = $_POST['email']; //email pass validation; if (preg_match($email_pattern, $_POST['email']) > 0) { } else{ //not validate $_SESSION['register_errorM_Email']="**"; $_SESSION['register_email'] =""; $_SESSION['register_flag']=0; } $password1 = $_POST['pass1']; $password2 = $_POST['pass2']; //valid if ($password2==$password1) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password1)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } //valid if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password2)) { } else { $_SESSION['register_errorM_Password']="**"; $_SESSION['register_flag']=0; } if( $_SESSION['register_flag']==1) header('Location:RegisterP3.php'); else header('Location:Register.php'); } ?> Hi All! I am hoping that someone might be able to help me out here. I am working on a page layout that consists of a header/logo then beneath that is five link nav bar and then below the content area. The header and content are fine and look great - but the nav bar seems to stepping over to the left a touch (PC IE in particular) and so is messing up the layout! I am finishing the job off for someone and there is a lot of bits and bobs that don't need to be in there - but when I take stuff out it messes up other parts of the layout! this is the layout and this is the css How can I stop the nav from moving and just make go full width (729px)????? Please save my sanity!!!! D I have a form label styled from an external stylesheet. I don't understand why some style options don't seem to work. For example, setting the width of the label seems to have no effect. But setting the font does work. I assume it is because of some parent div style? The stylesheet is from a template in which I am attempting to make some additions. I'm actually having the same problem with unordered lists. Could someone explain what would cause some style options to be ignored? I can post the stylesheet, but it is rather long. Thanks. Hello. I have code like this one Code: <div class='captionCell cbregName'> <label for="cbpplan10">AVATAR DESIGN</label> </div> how to hide just that label. Since there is many <div class='captionCell cbregName'> but labels are named different like for="cbblane9"... Hi guys, I'm having trouble with the css on the website I'm building. I have a background image and am trying to arrange the navigation link on the left hand side of the page. The trouble is that I can line up images with the background on IE and Firefox but chrome is proving troublesome. I can't figure out why it works fine in Firefox but not in chrome. Can anyone shed some light or offer me an alternative to get the same effect. jamesdrinkwater.co.uk Thanks in advance everyone James I'm very new to CSS, and I'm learning to use div tags for my layout. My navbar is a div within my header div, and it's not lining up the way I'd like. Here's a link for an example: www . cooperworkskilns . com The Home button should be at the bottom left of the header. Here's the pertinent css: #header{ margin:0px 0px 10px 0px; padding:0px; width: 700px; height: 125px; border-bottom: 1px solid #666; background-image:url(../img/header.gif); } #navbar{ margin:0px 0px 0px 0px; padding:0px; width: 700px; } Hi CSS masters, I am building a site for a friend who's starting a concrete business. I just finished making all the BG images, and am now starting the coding process, all CSS based. Well, I'm highly mediocre at CSS design, and could use some help. The build site is here. As you'll be able to see, the entire BG is actually made up of 4 images. The top image repeats along x, the bottom left along why. The other two are to remain static and unrepeated. In IE, the problems are as follows: 1. On top, there is a small white area, and I don't know why. I can't seem to find why it's padded. The two images should but right up against each other to create a seamless piece visually. 2. The part that is currently in the middle should be on the left. Why is it not? 3. The tan portion of the left part should repeat downward along y. It doesn't. Why? In FF, the problems are as follows: 1. The body is not centered. 2. Everything else is fine regarding BG placement (damned IE), but the bottom part of the left image is still not repeating. Help is, as always very much appreciated! Thanks, folks, Chris Hi, I have my images defined in my .css file and then called in the div so that I can write on them and like them this way But the problem is that I seem to be unable to put them side by side because div puts in a line break and span won't show them with their assigned width and height. Any help appriciated! Denis Code:
<html>
<head>
<title> Dublin Blues || Rugby League Football Club</title>
<link href="base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_container" style="border:solid 2px black">
<div class="newsarea" style="border:solid 2px black">
</div>
<div class="welcomeBar" style="border:solid 2px black">
</div>
</div>
</body>
</html>
Code: .mainBackground {
background-repeat: repeat-x;
background-color: #284164;
}
#main_container {
background-repeat: no-repeat;
background-image: url(images/main.jpg);
background-color: #284164;
width: 850px;
height: 520px;
border: solid 1px black;
margin: auto;
}
.newsArea {
background-repeat: no-repeat;
background-image: url(images/main_bg.jpg);
background-color: #284164;
margin-left: 10px;
margin-top: 20px;
width: 370px;
height: 455px;
}
.welcomeBar {
background-repeat: no-repeat;
background-image: url(images/bgRecRed.jpg);
background-color: #284164;
width: 500px;
height: 95px;
}
Big surprise, issue with IE. I have a layout I'm working on that is tableless. In FF the layout appears as it should, but in IE I'm getting a little bit of a gap between my header image and my nav images. The background (where the date is showing) is also appearing a little bit lower than the rest div contents. The site is Shallow Drop The CSS is: Code:
html, body {
background: url(../images/back.gif) #4a4949;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #d6d5d5;
height: 100%;
text-align: center;
}
a {
color: #d6d5d5;
font-weight: bold;
}
a:hover {
color: #faec0a;
}
#container {
width: 816px;
margin: 0 auto;
text-align: left;
background: url(../images/fill2.gif) repeat-y center;
}
#header {
width: 816px;
height: 118px;
}
#nav {
width: 816px;
height: 29px;
padding: 0px;
margin: 0px;
text-align: left;
vertical-align: top;
background: url(../images/date.gif) no-repeat right;
}
#nav-list {
float: left;
width: 80%;
height: 29px;
}
#nav a {
cursor:crosshair;
}
#date {
float: right;
vertical-align: bottom;
text-align: left;
width: 20%;
height: 29px;
padding-top: 7px;
}
#bod {
width: 780px;
height: auto;
margin: 0 auto;
padding: 5px;
}
HTML Code:
<div id="container">
<div id="header">
<img
src="<?php echo"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/header.gif";?>"
alt="Shallow Drop" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="33,9,165,117" href="index.php" alt="Home" /></map>
</div>
<div id="nav">
<span id="nav-list">
<img src="<?php echo"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/left_sun.gif";?>"
alt="Shallow Drop Madison, WI"
/>
...some more images...
</span>
<span id="date"><?php echo (strftime (_DATE_FORMAT_LC)); ?></span>
</div>
<div id="bod"><?php mosMainBody(); ?></div>
I have 2 buttons that are not lining up in IE7. I have it working Safari and Firefox on the MAC, but my PC IE browser won't align the buttons. I have tried everything, but no luck. Here's the site: http://www.caillouette.com/Utilitrek/four/ Here's the CSS for the button elements: Code: #bottombox{
clear:both;
float:left;
display:inline;
width:710px;
height:61px;
margin:0px 0px 0px 0px;
}
.collectionBig
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
width: 271px;
height: 61px;
margin: 0 0 0 0px;
padding: 0;
}
.collectionBig a
{
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
display: inline;
color: #000000;
font-size: 11px;
width: 271px;
height: 61px;
float: left;
color: black;
text-decoration: none;
}
.collectionBig img
{
width: 271px;
height: 61px;
border: 0;
background: url(images/nav/bigBN/collectionBig_on.gif) no-repeat;
}
* html a:hover
{
visibility:visible;
}
a:hover img
{
visibility:hidden;
}
.memberBig
{
float:right;
position: absolute;
top:0;
margin-right:5px;
font-family: arial, helvetica, sans-serif;
background: url(images/nav/bigBN/membershipBig_on.gif) no-repeat;
/* white-space: wrap; */
display: inline;
width: 414px;
height: 61px;
padding: 0 0 0 0;
}
.memberBig a
{
display:inline;
color: #000000;
font-size: 11px;
width: 414px;
height: 61px;
float: right;
color: black;
text-decoration: none;
}
.memberBig img
{
width: 414px;
height: 61px;
border: 0;
}
"collectionBig" and "memberBig" are wrapped inside of the "bottombox" div any help is appreciated. -S Hello. I'm nesting inputs within labels to enable me to position the inputs underneath their labels. (I use relative positioning for the labels and absolute positioning to move the inputs underneath and slightly to the right.) For one label I don't want any text to appear. I could use a non-breaking space but I'd ideally like to keep the label but just not show the text. But I can't hide it because it contains the input What would be a good way to approach this? (I've given the label a class to identify it/them.) Code: <form id="myForm" method="">
<label>Email<input type="text" id="txtEMail" /></label>
<label>Password<input type="text" id="txtPWord" /></label>
<label class=" lblHidden " >Login<input type="image" src="images/login.jpg" id="btnLogin" /></label>
</form>
[It occurred to me to set the width to 0 but I'm not so keen on this approach and it might interfere with my positioning.] Andy. PS I could post my css if it's useful (?). Edited: width:0px doesn't do anything anyway, because it contains an image. Hello, I am sure that the solution to my problem is obvious in many ways. I thought maybe a fresh set of eyes would help. I have a two column site, the columns are constructed side by side using the css float parameter. I have a wrapper around all of it to center it, and divs for every element. One of the last divs (containing an h2, but I'd rather use images)will not drop down and line up with other h2. They are both inside divs. I followed several instructions on several websites, listed below, but I cannot get this div to sit right, meaning be under my images (using lightbox 2) and act as a delimiter for the next set of images Web Site: (sample dot funky-penguin dot com) CSS help garnered he (alistapart dot com/stories/practicalcss) My xhtml and css 2.0 all validate, so I don't think that is the problem. I hope I was specific enough. Thank you in advance for all of your assistance. currently i am trying to get my navigation to line up in IE, works great in FF... currently i have something that kinda works... Code: * html #navigation {
margin-top:-24px;
}
but it has fatal flaws.. is there any setting i can flick on to get IE to look like FF... here is the link.. Navigation Menu Issues in IE also, for some reason there is a wider gap on the right of the login boxes then in FF... i could define a * html code for it, but would rather not. I've got a page whose layout I'm defining with divs and spans and css, and it *seems* at first glance that the divs in 2 separate columns are lining themselves up when they shouldn't be. The code: Basic layout defined by Code: <div class="menucolumn"> <!-- some content in my left hand column --> </div> <div class="maincolumn"> <!-- some content in my right hand column --> </div> Corresponding CSS: Code:
div.menucolumn{
float: left;
width: 200px;
margin-top: 20px;
}
div.maincolumn{
margin-left: 205px;
padding-left: 5px;
border-left: 1px solid #222222;
}
Form Fields: Code: <span class=\"formlabel\">Use MySQL (yes or no):</span> <input type=\"text\" name=\"usemysql\" class=\"formfield\"> CSS: Code: .formlabel, .formfield{
color: #222222;
text-decoration: none;
font-color: #222222;
font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: normal;
display: block;
width: 300px;
float: left;
margin-top: 5px;
}
.formlabel{
text-align: left;
width: 300px;
}
Inside the left column (menucolumn class) there are about 10 small divs which contain a link each with short text. In the right column there are 6 very large divs used to define peices of a large configuration form. As you can see by the screenshot, the first right hand div (the "Program Configuration" label in the screenshot below) and the span immediatly below it (the first field in the form) seem to be lining up with the div that contains the links on the left. How can I get the rest of the form fields to fill up that space? I've got stuck and am having difficult lining images and adverts up in my hobby website. What I want is one image, a small advert, home image, small advert, next image all in a line. When I test the page with google's Chrome the page looks perfect, but with firefox and IE it's all jumbled up. To understand have a look at the page i've been working on with the three different programs. The link is: www (dot) lisbonweekendguild (dot) com/photowebpage/evora/aqueduct_evora.html Any ideas how to organise it for IE and firefox? Any help is greatly apperciated, as its driving me mad! CSS for the three images is .navigationimagesleft{ margin-right: 8px; margin-left: 8px; } and i'm using dreaweaver CS3..... Hi there, I have a drop down menu which I want to display next to another link to the right of the page (so there is a link to the far right and then the drop down to the left of the right link), however the drop down link is appearing under the far right link in FF, instead of beside it like it is in IE. Any ideas what I have wrong? This is my CSS: PHP Code: #tools{ text-align:right; padding-right: 20px; } #add_business{ background-image: url('images/add_business.png'); height: 21px; width: 156px; float:right; text-align:center; padding-top: 4px; } #add_business a:link{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:underline; } #add_business a:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; text-decoration:none; } #com_tools{ text-align: right; margin-right: 200px; margin-top: 0px; float:right; } #menu ul .item{ display:none; list-style:none; list-style-image:none; } #menu ul:hover .item{ display:block; list-style:none; list-style-image:none; } #menu{position:absolute; list-style:none; list-style-image:none; } and this is my HTML: PHP Code: <div id="tools"> <div id="com_tools"> <div id="menu"> <ul id="item1"> <li class="top">Community Tools</a> <img src="templates/images/arrow_down.gif" /></li> <li class="item"><a href="#">menu item 1</a></li> <li class="item"><a href="#">menu item 2</a></li> <li class="item"><a href="#">menu item 3</a></li> </ul> </div> </div> <div id="add_business"><a href="#">Add Your Business!</a></div> </div> Hi, I am trying to create a very simple login form. Before I used to develop everything with tables, so I had the email label and password label alligned under each other correctly. Now I am trying to do it only with divs, spans and css, however i can not give a fixed with the span or labels so that email and password are alligned under each other! Here is the html file I have. Basically I have to login forms, one with css and the other one with tables. You can see that the table example has email and password label alligned under each other keeping the same width, while in the css example email takes less space then password. I tried setting the witdh to the label, but it did not work! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Login</title>
<style>
div.login{
border: 1px solid red;
}
div.login label{
border: 1px solid green;
width: 200px;
text-align:left;
}
</style>
</head>
<body>
Example with only divs, span and css:
<div class="login">
<div>
<label>
Email
</label>
<input id="username" name="username"
type="text" value="" />
</div>
<div>
<label>
Password
</label>
<input id="username" name="username"
type="password" value="" />
</div>
<div>
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</div>
</div>
<br>
<br>
<br>
Example with tables.
<table>
<tr>
<td>Email</td>
<td>
<input id="username" name="username"
type="text" value="" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input id="username" name="username"
type="password" value="" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</td>
</tr>
</table>
</body>
</html>
What should I do to my css to set a width to a label or span? thanks and regards, sim085 Hello, I am trying to create a drop down list with a label, and have them align. I simply want the label to display left of the drop list. I can't seem to get them to do it. It sits inside a topoptsbox div tag (css below). Code: <form name="bpmform"> <label for="bpmfrom" class="bpmddl">BPM From</label> <select class="bpmddl" id="bpmfrom" name="bpmfrom"> <option id="0from" value="0">0</option> <option id="50from" value="50">50</option> <option id="100from" value="100">100</option> <option id="150from" value="150">150</option> </select> </form> Code:
#topoptsbox {
border-style: inset;
border-width: 1px;
width: 1000px;
height: 80px;
float: left;
display: block;
}
Not the best title, but I couldn't think of a better way to describe what I am trying to do. I currently use css to position form elements and their labels nicely without the use of tables. I now want to be able to add fieldset tags, encapsulating a bunch of radio or checkboxes, and a legend tag, and have that legend tag appear exactly as my current label tags do. Easier to look at the demo page I think: http://markdw.com/formTest.html Looks fantastic in FF, almost perfect in IE, but not so good in Safari (all on a PC). I can fix the positioning of the fieldset in Safari by removing the top:-18px and margin-top:-18px styles, but no matter what I do I cannot get the LEGEND to show up on the page. The same applies to IE6 I just noticed. a) I hope the code is useful and/or interesting to others, and b) I hope someone will be able to help me with the safari issue Many thanks. Hi gyus! I am trying to recode an form we use, which is based on table layout, to use CSS layout instead, using the label element. The old layout had one input per row with a description text next to the input. After coming up with a successful CSS layout in Safari/Firefox/Opera I tried the page in IE and the layout failed. All my inputs are floated to the left (at the top, stacked after each other), but the labels are rendered correctly (one label per line) It seems like the label elements doesn't seem to clear the float (so that the label and inputs are aligned) I broke the code down to the following example: (sorry guys, I don't have the possibility to put it on an publicly accessible server) Code: <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en"> <head> <title>Testing</title> <link rel="stylesheet" type="text/css" href="test.css"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8;"/> </head> <body> <form name="service" action="label2.html" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8"> <div> <label for="audio_level">Audio Level:</label> <input type="text" id="audio_level" value="0"/> <label for="audio_level1">Audio Level:</label> <input type="text" id="audio_level1" value="0"/> <label for="audio_level2">Audio Level:</label> <input type="text" id="audio_level2" value="0"/> <label for="audio_level3">Audio Level:</label> <input type="text" id="audio_level3" value="0"/> </div> </form> </body> </html> And the CSS: Code:
body {
width:800px;
}
label {
display:block;
float:left;
clear:left;
width:100px;
text-align:left;
}
input {
display:block;
float:left;
width:100px;
}
Applying a <br> element with clear:left after each input seems to fix it, but I is adding extra markup really necessary? I can't figure out what I am missing to get the one label/input per "line" |
|||||||