|
CSS - Form Problem (last Input Appears Wrong)
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 Similar TutorialsI just installed Internet Explorer 8 to view my website in the newest internet explorer version. The browser leaves a huge space right after the upper menu. Could someone tell me why and how to fix it. Thank you. http://www.refinethetaste.com/html/ I have customized the elements of a form for a website I am working on. I have set the input fields to have a white background, however, in three out of the six textfields the background is yellow (this only happens in Internet Explorer 6). I have checked the CSS, and the yellow isn't included anywhere. If anybody can help I would be grateful. Thanks. 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 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;
}
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. 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 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. 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! 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! 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;
}
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! Hi, I'm not an expert on making things work in IE, so I'm looking for someone who is. So, this is how my page looks in IE6: (No, I'm not French, I used browsershots.org.) This is how it should look: http://timvdalen.nl/atwork The relevant code for this is: html4strict Code: Original - html4strict Code <div id="rb-bar"> <div id="bar-button"></div> <div id="bar-end"></div> </div><!--rb-bar-->
css Code: Original - css Code #rb-bar{ height: 33px; background: url('./imgs/3dbalk.gif'); width: 100%; margin-top: 10px; float: left; margin-bottom: 30px; } #bar-button{ height: 33px; float: left; background: url('./imgs/button.gif'); width: 121px; } #bar-end{ height: 33px; background: url('./imgs/bar-end.gif'); width: 3px; margin-left: 920px; margin-right: 0px; }
It seems that the bar-end div is showing up below where it's supposed to be, making the whole bar repeat it's bg for another 'row'. Another important thing to mention is that it's safe to say that 99,5% to 100% of the visits will come from IE6, this is out of my control. Any replies will be greatly appreciated, Tim If you open this page; w w w.ctuchicago.com/parties/contact-us.html If you open this page on IE you won`t see any input, but if you open it with chrome or firefox you will see there is input. I found way to make rounded corner input but it doesn`t work with IE7 & IE8. I tried to resolve this problem with z-index and i saw the input area it was looking like working until i tried to type something in input area. I am having a heck of a time dealing with IE7 and how it handles z-index tags on SELECT elements and DIV's. This problem only exists in IE7 and does not manifest in IE6, Firefox (Mac/Win) or Safari (Mac/Win). I've posted a concise example of my problem on one of my servers to better illustrate my problem: Sample Problem Page. Check it out using IE6 and then using IE7. Or if you don't have IE6, I've posted a screenshot of what it looks like. I would appreciate any help solving this problem for IE7. Feel free to copy the source code and play with it and even keep the combo-box drop down code for your own use (if you help me get it working of course, ha ha). I have a body, a container div, and inside the container div, a head, navigation, content, and footer div. I have the background of the body filled in with a repeating background image .. and I have the footer div with clear: both, so it will show up below the content div, rather than just underneath it. The problem is the body background does not extend past the lower portion of the footer. How can I fix this? Link to Website Any ideas that would help me out... http://www.countrystampinangel.com/ The Sub Menu is on the Products button http://www.countrystampinangel.com/angel.css Well this is VERY weird. I don't even know what to do about this one. Take a look at this site in IE... FIXED Now notice the footer at the bottom. For me every couple times I refresh it the whole page goes out of whack... and then a couple refreshes later it seems ok again. I can't honestly figure out what is going on here. Hello, I a horizontal navigation within <ul><li> tags. Here is the css for the navigation <ul><li> and the first button. Code: #nav li{
display:inline;
}
a#aboutrollover {
background-image:url(images/nav/about_off.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
display:block;
}
a#aboutrollover span { display:none; }
a#aboutrollover:hover {
background-image:url(images/nav/about_on.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
}
You'll notice that for the button, I have display set to "block." Well, if I set it as "inline" or don't put a display, the span text shows. But the block makes the <li>'s stack upon each other. Here's the navigation code :: Code: <ul id="nav" name="nav"> <li> <a onclick="updateWithAbout()" href="#" id="aboutrollover"><span>About Cats Meow</span></a> </li> <li> <a onclick="updateWithGuest()" href="#" id="guestrollover"><span>Guest Pics</span></a> </li> <li> <a onclick="updateWithStaff()" href="#" id="staffrollover"><span>Cats Staff</span></a> </li> <li> <a href="#" id="webcamsrollover"><span>Cat's webcams</span></a> </li> <li> <a onclick="updateWithParties()" href="#" id="partiesrollover"><span>Cat's Meow Parties</span></a> </li> <li> <a onclick="updateWithContact()" href="#" id="contactrollover"><span>Contact Cats Meow</span></a> </li> </ul> I also tried display: run-in; and display:compact; instead of display:block;. But the first 2 options would make my navigation dissapear. Here is the site:: http://www.catskaraoke.com/index2.php Is there a simple solution to displaying the navigation horizontally? I know I can make it work, but it's a bit of excessive code for something that should be easy. thanks I have a data table within my content div. It appears fine on my screen in several browsers, however, coworkers have a large (full screen) of white space where the table should be. They have to scroll down a full screen to get to the table. I have everything on the site set up using CSS. The table contains the dates, times and municipalities for Trick or Treat events. I have a vertical-align:top on the table. Here is the CSS: Code: table#halloween {
margin-left: 2px;
text-align:center; margin-right:auto; width:100%;
vertical-align:top;
font-size:12px;
padding: 3px;
width:100%;
border: solid #000000;
}
td.halloweencell {
border-color: #000;
border-style: solid;
}
Here is a sample of the HTML : Code:
<table width="100%" id="halloween" summary="Table of municipalities, date of trick or treat and times for trick or treat">
<tr>
<th width="50%" class="rowcoloryellow"><strong>MUNICIPALITY</strong></th>
<th width="20%" class="rowcoloryellow"><strong>DATE</strong></th>
<th width="30%" class="rowcoloryellow"><strong>HOURS</strong></th>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="halloweencell" width="50%">City of Hartford </td>
<td class="halloweencell" width="20%">October 30th </td>
<td class="halloweencell" width="30%">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">City of West Bend </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m.- 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Addison </td>
<td class="halloweencell">October 30th </td>
<td class="halloweencell">3:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">Town of Barton </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Erin </td>
<td class="halloweencell">No Set Schedule </td>
<td class="halloweencell"> </td>
</tr>
</table>
It is located at: www.washingtoncountysheriffwi.org/halloween.php Any suggestions? Thanks! Helen |
|||||||