|
CSS - Form Input Are Messed Up!!
http://www.zahra-zahra.com/admin/editCategory.php
the input boxes are all out of align.. i dont know why!!! here is the css Code:
#content form {
font-size:0.8em;
clear:none;
}
#content label {
width:20%;
float:left;
font-size:0.9em;
margin-bottom:0em
font-size:1em;
clear:none;
}
#content input, #content select, #content textarea {
margin:0em;
clear:none;
}
#content .submit {
clear:none;
}
Similar TutorialsI'm having some issues with an info form for a website I'm coding. The form uses CSS, and looks just fine in Firefox, but in IE part of it is messed up. http://www.blanchetrocker.com/contactus There's the URL. I really appreciate any tips and fixes. Hi I'm trying to get the labels of my form to appear above their input boxes and for the input boxes themselves to be side by side (basically a horizontal login form) I've used the label tag in my form after doing some research which looks like: Code: <form> <label for="email">Email</label> <br /> <input type="text" name="email" /> <label for="password">Password</label> <br /> <input type="text" name="password" /> </form> In my CSS I have a label property defined as: Code: label {
display:inline-block;
}
But the outcome is this: Could anyone please shed some light on my problem? Thank you Is it possible to differentiate between various types of input field, e.g. assign a width to text inputs but leave buttons to find their own width based on content. I know I can do this by assigning certain elements a class but I'd prefer not to have to do this. Thanks This is driving me nuts.... You see how the text is a tad hight than the form input ? How do i make them align ?! Thanks. How do you get the input text areas and selections to highlight or glow once active? For examples, visit Zappos.com or Amazon.com - when you click in the text fields to login it sort of glows. Hi all, I cannot figure why last two form inputs at the following website appears wrong near the end. I also included a screenshot. http://www.refinethetaste.com/yk/addproject.asp Hi there! I'll cut right down to the chase: is my method of styling form input fields efficient? Is there a better way to do it? I tried directly styling the input, rather than putting it in a div, but it didn't work in IE (when too much text went into the field, the background would move, no matter what I did. ) Also, is my <label> styling okay? HTML Code: Original - HTML Code <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> <div class="formRow"> <div class="textInput"> <input class="textInput" id="name" type="text" /> <label for="name">Name</label> </div> </div> CSS Code: Original - CSS Code #content div.formRow:hover { background-color: #EEE; } #content input.textInput { font-size: 14px; color: #666; padding: 3px 5px; width: 190px; height: 20px; border: 0; background-color: transparent; } #content input.textInput:focus { color: #000; } #content div.textInput { margin-left: 50px; background: transparent url('images/textInput.png') no-repeat; } #content div.textInput label { font-size: 14pt; font-weight: bold; margin-left: 50px; vertical-align: top; }
And lastly... my image: Thanks a lot! I have a form that has background images for the inputs. In both IE 6 and IE 7, the background images will move if the text goes outside of the image. You can see what I'm talking about here. Here is the xhtml: Code: <div class="contact">
<form action="sendmail.php" method="post" id="contactform">
<ul>
<li>
<label for="name"><img class="label" src="images/name.png" alt="" /></label>
<input class="inputbox" type="text" name="name" value="" id="name" />
</li>
<li>
<label for="email"><img class="label" src="images/email.png" alt="" /></label>
<input class="inputbox" type="text" name="email" value="" id="email" />
</li>
<li>
<label for="tele"><img class="label" src="images/phone.png" alt="" /></label>
<input class="inputbox" type="text" name="tele" value="" id="tele" />
</li>
<li class="special">
<label for="last">Don't fill this in:</label>
<input type="text" name="last" value="" id="last" />
</li>
<li>
<label for="message"><img class="label" src="images/message.png" alt="" /></label>
<textarea rows="5" cols="30" name="message" class="messagebox"></textarea>
</li>
<li class="submitbutton">
<input type="submit" value="" class="formbutton" />
</li>
</ul>
</form>
</div>
and here is the relevant css: Code: .inputbox {
height: 39px;
width: 246px;
border: none;
padding: 10px 10px 0 10px;
background: url("../images/inputbox.png") no-repeat 0 0;
font: bold italic 1.25em/1.1em Lucida, sans;
color: #3d2d06;
}
I'm sure this is an easy one but I can't really figure it out and googling has not produced any results. Thanks in advance. I don't have a Mac but a buddy of mine that does said the dropdowns for this site are completely screwed up on it.... does anyone know why? Thanks for any help.... http://yourthreshold.com/staging/Chiro/ Hi, Please see http://lbclibrary.org/addtoinquiry.php (scroll down a bit to see the form) What I want to do is, when the user selects "I am a member of ..." or "I want to become a member of..." the form fields in the OTHER cell should become readonly (i.e. should not allow input). Is it possible to make ALL the form elements in one <td> cell as readonly? Further, is it possible to change their background colors to say light grey? Then, when you select another radio option, that cell becomes writable and the other cell becomes readonly. Thanks a lot! On the right column of my website NashvilleDesignz dot com the form is all the way at the bottom right of the page in Internet Explorer...I checked all the margins and padding yet either seems to check out ok. Any ideas on how to get this to work correctly in IE please let me know...all other browsers are working correctly There is a problem with What's New section's appearance (right bottom). I want it appear just like here http://aslanyurek.com/atolye/index.asp but instead, it appears as. http://www.refinethetaste.com/html/ Style I created for the whole right block. PHP Code: /*right block*/ #rblock .notice { width:375px; height:30px; font-size:13px; line-height:30px; color:#f3f2f1; background:#5f5548 url(../images/isaret_2.gif) no-repeat 1% 55%; text-indent:15px; } #rblock .search { width:325px; margin-top:1px; background:#9e0b0e url(../images/icon_arama.gif) 3% 50% no-repeat; padding:5px 5px 5px 45px;} #rblock .search span { color: #FFFFFF; font-size:9px;} #rblock .news { width:375px; border-bottom:1px dotted #CCCCCC;} #rblock h1 { font-size: 14px; color:#716759; background:#ece7d1; text-indent:15px; line-height:25px;} #rblock .news h2 { font-size: 12px; color:#534741;} #rblock .news p { font-size: 10px;} #rblock img#news{ float:left; margin:10px; height: 60px; width: 66px; border:1px solid #b39f87; padding:1px; background:url(../images/load.gif) center no-repeat; } #rblock .clear { clear:both; height:1px; width:1px; overflow:hidden; } Viewing this page in Firefox: http://moneyextra.thehelpgroup.co.uk/compare/creditcards/ProductDetails.php?index=79 - it looks fine, but when you view it in IE 6, it is really messed up Does anyone know whats causing that to happen and how I would fix it Thanks alot Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! http://www.lovemeforme.org/test/index.html works perfect in FF, but in IE, the sidebar is further down than I want. How do I fix this? I've created a 3 column layout and it works fine. But on some pages including links,banners... the whole of the right column is positioned wrongly. It even works fine in Firefox. Any idea what the problem could be? Any advice would be appreciated. The link by the way is here Thanks, Sunny Patel I have 2 images that are not working the same in IE and FireFox take a lookhere Hi! Have been bashing my head against the wall with this one for a while now, so I thought maybe someone here could help me out a bit. Basicly, this sums up the issue: (sorry for the pure-text link, it didn't allow me to put up a propper one... >.<) http://img205.imageshack.us/my.php?image=cssiebug.png So, what I want is that the search field stays put, no matter how much text is entered into it. This works in all the other browsers, thought it's still a bit buggy, but I think I can fix that. Here is the code that should be of interest in this issue: Code:
<div id="bannerContent">
<!--{{{-->
<div id="logo">
<a href="<?PHP echo $home ?>" target="_self"></a>
</div>
<div id="search">
<form>
<input type="text" class="searchField" name="uSearchQuery">
<input type="submit" class="searchSubmit" name="uSubmitQuery" value="" onFocus="this.blur()">
</form>
</div>
<!--}}}-->
</div>
Code:
#bannerContent
/*{{{*/
{
width: 800px;
height: 158px;
}
#logo
/*{{{*/
{
background: url("../images/layout/logo.png") no-repeat;
width: 394px;
height: 56px;
position: relative;
top: 51px;
left: 24px;
float: left;
}
/*}}}*/
#search
/*{{{*/
{
width: 331px;
height: 32px;
position: relative;
top: 62px;
left: 58px;
display: inline;
float: left;
}
.searchField
{
background: url("../images/layout/search_field_bg.png") no-repeat;
width: 266px;
height: 32px;
border: none;
outline: none;
float: left;
<?PHP
if (!$agentIE && !$agentFF)
echo 'padding-left: 10px;' . "\n";
else
echo 'padding: 8px 0 0 10px;' . "\n";
?>
}
.searchSubmit
{
background: url("../images/layout/search_button.png") no-repeat;
width: 55px;
height: 32px;
margin-left: -10px;
border: none;
outline: none;
cursor: pointer;
float: left;
}
/*}}}*/
/*}}}*/
Thanks a bunch in advance! For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
|
|||||||