CSS - Bizarre Issue With Form Inputs

I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this?

A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on.

image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image.

I really appreciate your help.

The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that.

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
float:left;
width:89.091em;
list-style:none;
line-height:1;
background:#b6791e;
font:11px Verdana, sans-serif;
font-weight:bold;
padding:0;
margin:0 0 .5em 0;
}

#nav a {
display: block;
width: 11.1em;
w\idth: 10.1em;
color: #FFFFFF;
text-decoration: none;
padding: 0.75em 0.5em;
}

#nav a.daddy {

}

#nav li {
float: left;
padding: 0;
width: 11.1em;
position:relative;
}

#nav li ul {
position: absolute;
left: -999em;
height:auto;
width: 14.7em;
w\idth: 14.5em;
font-weight: bold;
margin: 0;
padding:0;
background:#FFFFFF;
color:#769841;
border: 0.1em solid #769841;
}

#nav li ul a:hover{
color:#ffff30;
background:#769841;
}

#nav li ul li a{
color:#769841;
}

#nav li li {
padding-right: 1em;
width: 14.5em;
w\idth:13.5em;
}

#nav li:hover ul {
left: auto;
}

#nav li a:hover, nav li.sfhover a:hover{
color:#FFFF30;
}

#nav li ul li a:hover {
color:#FFFF30;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
clear:both;
}

#nav li ul ul {
margin: -3.3em 0 0 5em;
}


#nav li:hover, #nav li.sfhover {
background: #769841;
}

#nav li a:hover, #nav li.sfhover a:hover{
color: #ffff30;
}

#nav li ul a{
color:#769841;
padding:.4em;
}

Please go to this page -

http://www.pacunionsonoma.com/real-estate-agent.asp?realtor=51

On the top right click on Active Listings

Then watch the top agent image, title, and intro text. It is out of place BUT only until the page finishes loading, then it "jumps" in place...

How do you keep a dropdown box on top of all other windows?

I'm working on this CSS test page and I am encountering some problems that I hope someone might know how to fix. The state and zip are supposed to be on the same line as the city, and the date and phone # are supposed on be on the same line as each other. Anyone know what I am doing wrong?

webtrain.austin.cc.edu/
~lbrown/circulontestnew.html

Also, in IE the last name box drops off the top.

Please let me know if you can help.

Thanks!

Im having trouble with styling a web form, im trying to manipulate the textarea width and have the following CSS code

textarea {

width: 400px;
height: 250px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0;

}

The width is fine in Internet Explorer yet in Opera it seems to completely ignore the width attribute.

The form itself is in a <div> which has no width attribute.

Anyone got any ideas?

Hi there,

I am trying to add some padding to my inputs, but the padding is being ignored by IE.

This is my CSS:

PHP Code:
 INPUT {

    background-color:#FFFFFF !important;
    border: 1px solid #ececec;
            padding: 10px;
} 






Any ideas why it is not working?

First off, I use Firefox more than IE, so I'm a little upset to see my Firefox version doesn't look as nice as the IE version...

When I design, I like to design to make the Firefox one always look better (even though you should make them look the same, sometimes the FF one still looks better than IE... <h3> tags anyone?). So, I have to make these file inputs look better than they do. A couple things I want to focus on (css code below for reference):

1. Make the FF inputs have a width of 450 like they should.
2. Make the FF input buttons have the same border as IE buttons.
3. Remove the bevelled border from FF inputs.

First, the screenshots (attached)

Second, the inline HTML styles:

Code:

<tr>
  <td colspan="4" align="left" style="padding-left: 50px;">
    Image 1: <input type="file" name="file[]" style="width: 450px;" /><br />
    Image 2: <input type="file" name="file[]" style="width: 450px;" /><br />
    Image 3: <input type="file" name="file[]" style="width: 450px;" /><br />
    Image 4: <input type="file" name="file[]" style="width: 450px;" /><br />
    Image 5: <input type="file" name="file[]" style="width: 450px;" />
  </td>
</tr>

Third, the CSS code:

Code:

input, textarea, select
{
  border: 1px solid #45649B;
}

input {-moz-box-sizing: border-box;}

Any help is appreciated, Thank You!

I have added a captcha code to a test form on my site which looks and works fine in ie. But in firefox you can't see it.

I am sure it is something simple but I just can't figure it out.

The form which can be viewed is www cristalclear.co.uk / contactus.php
(not allowed urls yet hence above)

Any help would be most appreciated.

Website you can check:
http://www.refinethetaste.com/html/default.asp?Section=myaccount&SubSection=signup

<h2>Login Information</h2> backhground does not extend fully when website opened with internet explorer. any help appreciated.


Code:

<style>
/*sign up*/
#signup	{ width:576px; float:left; margin-left:2px; }
#signup .signup	{ float: left; width: 576px;}
#signup h1	{ height:30px; font-size: 18px; color:#716759; line-height:30px;}
#signup h2	{ height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;  }
#signup .hline {	border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }

#signup form fieldset { margin: 10px 0; border: #ece7d1 1px solid; }
#signup form div label {  display: block;  float: left;  width: 120px;  padding: 5px; margin: 0 0 10px 0;  text-align: left;}
#signup form div.required label, label.required {  font-weight: bold; }
</style>
	<div id="signup">
    	<div class="signup">
            <h1>Create a New Account</h1>
            <div class="hline"></div>
            To take full advantage of your Williams-Sonoma account, please provide all the information below.
            <form action="?Section=myaccount&SubSection=signup&Process=add2member" method="post">
                <p><strong>Bold</strong> fields are required.</p>
                <fieldset>
                <h2>Personal Information</h2>
                <div class="required">
                    <label for="FirstName">First Name</label>
                    <input type="text" name="FirstName" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                    <label for="LastName">Last Name</label>
                    <input type="text" name="LastName" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="optional">
                    <label for="CompanyName">Company Name</label>
                    <input type="text" name="CompanyName" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                    <label for="phone">Phone</label>
                    <input type="text" name="Phone" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="optional">
                    <label for="newsletter"><input name="newsletter" type="checkbox" value="1" checked="checked" /></label>
                    Yes, I would like to be notified of news and happenings at RTT via this email address. 
                </div>
                <h2>Login  Information</h2>
                <div class="required">
                        <label for="email">Email</label>
                        <input type="text" name="Email" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                        <label for="Password">Password</label>
                        <input type="password" name="password" value="" />
                </div>
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                        <label for="Confirm Password">Confirm Password</label>
                        <input type="password" name="passwordc" value="" />
                </div>           
                <div style="clear:both; height:2px; width:2px; overflow:hidden;">&nbsp;</div>                     
                <div class="required">
                    <label for="submit"></label>
                    <input type="hidden" name="xp" value="xp"> 
                    <input type="image" name="Create Account"  src="<%=WebsiteURL%><%=THEMES%>/images/btn_createaccount.gif" />
                </div>
                </fieldset>                
        	</form>
		</div>
    </div>

i tried to search for any threads that talk about this problem, but i wasn't able to find any.

i have a css dropdown menu and it works great in firefox(cuz FF rocks). there is an input dropdown under the css dropdown menu, and in IE, the input dropdown shows through the css dropdown layer. i've tried playing with the z-index, but it doesn't seem to work. can anyone help me with this?

here is an example of my problem, you'll see the input is showing through the div layer when it shouldn't.
Code:

<html>
<head>
	<title>Untitled</title>
	
<style>
div#layerOne {	background-color: #fff000;	position:absolute;	width:50;	top:1em;left:1em;	z-index:2;}

div#layerTwo {	z-index:1;	position:absolute;	top:2em;left:2em;	}

</style>
	
	
</head>

<body>

<div id="layerOne">
11 adsf adsf asdf asdfasdf asdfasdf asdf
</div>

<div id="layerTwo">
<select>
<option selected="selected">Choose a topic...</option>
<option>
DECORATING</option>
<option>
All Rooms</option>
</select>
</div>
</body>
</html>

After i set the height of the text box, when viewing it in firefox, not only does it look like the font size is over 100 before typing the norm-sized text, but it starts in the middel-left of the box instead of the top left what do i do to correct this?

When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background?

Has anyone seen hidden inputs being rendered as periods or dots under FF? I am using FF 3.5.4. Is this normal? Thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-language" content="en">
<title>Funny Dots</title>
<style type="text/css">
input
{
    border:1px solid blue;
    display:inline-block;
}
</style>
</head>
<body>
<form action="index.php" method="post" name="mainForm">
<input type="hidden" name="aaa" value="5" />
<input type="hidden" name="bbb" value="" />
<input type="hidden" name="ccc" value="" />
</form>
</body>
</html>

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

Hi guys,

Let's say I have 2 inputs:

<input ... />

and

<input type="submit" ... :>



How do I grap the type="submit" input in CSS?

For example:

input submit {....}

I know this does not work...


Thank you