|
CSS - Auto Complete Menu Appearing Behind Input Field
Hi all,
Im having a great deal of problem trying to get a CSS based autocomplete menu appear above input fields (not select) in IE 7 only. Have tested in Firefox, Safari, Opera etec and it looks good. Am totally stumped on this so any help much appreciated, kind regards matt Similar TutorialsHi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! My javascript pop-up menu is appearing behind my divs. Any idea how to fix this? http://absolute-design.net/websites/GISD/test2.html Thanks! input fields in tabs not appearing in IE7 though it works fine with IE8 and Firefox3 http://www.refinethetaste.com/html/cp/default.asp?Section=orders&Process=AddOrder I'm trying to align a div right after an input text field. div has a background image I want to display, but no text. div is going on the next line after input. how can I keep it to the left of the input text field? Thanks I am using the following code to create a custom input field: Code:
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { outline: 0 none; }
This essentially removes the border from the input field however this does not work in Safari on a Mac (works fine in Safari on Windows). Any one know how to fix this? Hi I am currently having problems changing the size (or width) of INPUT fields within a form when they have a class assigned to them. If I remove the class that is assigned then the size attribute works fine. Do I need to specify the size of the INPUT field within the CSS file that holds the class? And if so how do I do it? Thanks in advance for any help. I have a disabled input field that is managed by PHP scripts. I need the fields to appear to the user but to look like just text. The main problem is that I have a patterned background on the page and I don't know how to create the style so that there is a transparent background on the input field. Can someone help? TIA. 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. Ok, i have this side div thats small. I want to be able to mouse-over (hover) over it or if not that click it. When either action is done, than it will reveal a input field attached to that small tab that was hovered, or clicked. If you need more details or explanation than reply, I cant really explain it but i will try. Hi, I've searched the forums and seen where others had a similar problem, but the suggested solution has not worked for me. What I'm doing: using div tags to create the appearance of a 4 column form. For some reason, after I use the tag <div id='2col_right'> Form fields contained in my next div tag (<div id='2col_left'>) are un editable. If I use my tab key, I can get to them in tab mode. And if they already contain data they can be edited, but the blank fields (see Trustee) will not allow me to click into. My code snippet, with the style sheet included, looks like this: Please see my code snippet: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#pagecontainer {position: relative; top: 0pt; right: 0pt; margin: 0pt;}
#maincontent {position: relative; clear: both; margin: 0pt;}
#2col_left {margin: 0pt 10pt 10pt 4pt; float: left; padding: 4pt; clear: left;}
#2col_right {margin: 0pt 10pt 10pt 4pt; padding: 4pt; clear: right;}
.formcouple {margin: 0pt 5pt 5pt 5pt; font-size: 8pt;}
.formlabel {width: 100pt; border: 1pt solid #003366; font-weight: bold; font-size: 8pt; padding: 2pt; margin: 0pt 0pt 6pt 0pt; background: #ECF5FD}
.formvalue {border: 0pt solid black; font-weight: normal; font-size: 10pt; padding: 2pt; margin: 0pt 0pt 6pt 0pt;}
</style>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bottommargin="0" margin="0">
<div id="pagecontainer">
<div id="maincontent">
<form name="fCustForm" action="default.cfm?fuseaction=custCreate" method="post">
<div id="2col_left">
<span class="formcouple">
<span class="formlabel">Customer Name</span>
<input type="text" name="name" value="john doe" size="30" maxlength="60">
</span>
</div>
<div id="2col_right">
<span class="formcouple">
<span class="formlabel">Address</span>
<input type="text" name="address" value="126 Some Rd " size="30" maxlength="255">
</span>
</div>
<div id="2col_left">
<span class="formcouple">
<span class="formlabel">Trustee</span>
<input type="text" name="trustee" value="" size="20" maxlength="25">
</span>
<br>
<span class="formcouple">
<span class="formlabel">City2</span>
<input type="text" name="city2" value="" size="30" maxlength="30">
</span>
<br>
</div>
</div>
</div>
</body>
</html>
BTW - I am doing this in IE6.x I have made this input field so people can place their name in there but noticed that when you type into it, the writing begins too close to the left side and I would like to place like a left margin on it by about 5px. This is my input field code on my form: Code: <input type="text" class="field" name="title" size="45" maxlength="200"/> On my stylesheets I placed this: Code: input.field {background-color:#333333; border:none; margin-left:5px; font-family: Arial, Helvetica, sans-serif; font-weight: none; font-size: 11px; color: #000000;}
Doesn't work?? I can't figure out why. 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. I'm going round and round without getting any head way so hopefully someone can give me a hand... I'm creating a mail form using a background image for the input fields. What I don't want is a border. If I don't add a border: solid black, for instance, I get a default white. Is there a way to have no border? Code: INPUT.email {
background-image: url(images/bg_email.jpg);
width:206px;
height:21px;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #ffffff;
border: 1px solid black;
margin: 0 0 0 10px;
padding: 0 0 0 6px;
}
Thanks in advance! Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think). Just one example: https://www.gmx.net (a commercial email service provider in Germany). How can this be done? Ciao, Meph I've been fighting with CSS popup menus for a while now, and finally got everything looking ... close enough ... in every browser at my disposal (even IE). Now, I've started filling my page with content and all hell's breaking loose again. *sigh* For some background info, this page has a menu at the top, and the content area directly below it. In the content area, I have two divs that generate what's supposed to look like a dialog window. The titlebar div has class "title", the main window area div, class "window" and ID'd "dlg1". The idea being that the "title" div can be clicked to make the "window" div display: none and fold up in a window-shade fashion via a JavaScript function. The script works flawlessly, astonishingly enough, and can be used so that several "dialogs" can exist on the page, independently expandable just by giving them different IDs. Now for the details: The menu is a CSS UL -> LI:hover -> UL { display: block } sort (with a cheat script to make IE a little less retarded.) I've set the z-index of the submenu UL to 1000, hoping nothing in the Z-stack would have a higher display precedence than THAT. Firefox displays everything perfectly. The menus stay on top, the scripts work, life is good. Opera 7 works pretty much the same way. The rollover effects are kind of slow, at least in the Linux version, but no big deal. KDE's Konqueror 3.3.1 has no problem with the title and window divs, but always hides the menu under the <textarea> form element inside the window div. This is not acceptable, but since I will be probably the only one who will use this page in KDE, I can even live with that. MSIE... god bless it... it can't help itself. The menu will draw over the title div, but not the window div. So: 1) Regarding Konqueror's problem, the CSS-over-Flash post below suggests that some elements are too specialized to expect reliable z-index support. Am I to understand that my <textarea> tag will probably never sit correctly in the Z-stack unless the user agent draws them from scratch (like Firefox and Opera seem to do)? ..and, most importantly... 2) Is there ANY reason anyone can see why my menu is weaving behind those divs in IE? Here is a link to all of my content. (It's seperated into a few files to ensure efficient use of the cache, and to make changes easier.) Main CSS file (holds common properties to all pages, regardless of content. Controls the menu, for example.) http://www.mtaonline.net/~nwallette/test/ttmsmain.css Secondary CSS file (holds properties common to all pages that use the window architecture described above.) http://www.mtaonline.net/~nwallette/test/ttmsdlg.css Main JavaScript file (holds code to activate the window-shade function, and some other stuff yet to come.) http://www.mtaonline.net/~nwallette/test/ttmsmain.js MSIE patch JavaScript file (called in an IE conditional statement to fix support for :hover over LI's.) http://www.mtaonline.net/~nwallette/test/stupidie.js ...and finally, the HTML that illustrates the problems. http://www.mtaonline.net/~nwallette/test/argh.html To see what I mean, you'll need to make sure the two "dialogs" are expanded (click on the title bars) and then hover over the Admin menu. Make sure your window size is small enough so the Admin menu dropdown covers part of the dialogs below it. To see the Konqueror problem, contract the first dialog and make sure the 2nd one is expanded, and the Admin menu covers part of the multi-line text box. Any ideas, anyone? Please?? I want to change the "flashing cursor" color in an input field in my css. This field has a dark background, the text over it is white but when you click in it, the flashing cursor is darkgray an almost invisible. Look in my login and password box, you will understand: http://www.jeudebourse.com. I'm mostly speaking in French and I don't know what is called this cursor. I don't mean the mouse pointer but the cursor that is flashing in the field to indicate your position in this field. Thanks. I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear. Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
function initPage()
{
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
}
input {
width: 200px;
background: #f4f4f4;
border: 1px solid #999;
font-size: .9em;
/*
*/
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cAutoCompleteCtl {
position: relative;
/*
border: 3px solid red;
*/
}
.cAutoCompleteCtl input {
margin: 0 5px 0 0;
display: block;
float: left;
}
.cAutoCompleteCtl a.dwnarrow {
width: 15px;
height: 15px;
border: 1px solid #999;
background: url(images/downarrow.gif)
no-repeat;
background-position: center center;
background-color: #efefef;
float: left;
display: block;
font-size: 1px;
text-decoration: none;
}
.cAutoCompleteCtl .acCtlDropdwn {
position: absolute;
top: 20px;
left: 0px;
z-index: 100;
visibility: visible;
min-width: 300px;
max-width: 600px;
height: auto;
max-height: 200px;
background: #fff;
padding: 5px;
border: 1px solid #999;
overflow: auto;
/*
width: 400px;
*/
}
* html .cAutoCompleteCtl .acCtlDropdwn {
width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}
.cAutoCompleteCtl .acCtlDropdwn a {
white-space: nowrap;
display: block;
text-decoration: none;
padding: 2px 5px;
color: #000;
border: 1px solid #fff;
}
.cAutoCompleteCtl .acCtlDropdwn a.lastOption {
}
.cAutoCompleteCtl .acCtlDropdwn a:hover {
background: #f5f5f5;
border: 1px solid #b3b3b3;
}
-->
</style>
</head>
<body onload="initPage();">
<div class="cAutoCompleteCtl clearfix">
<input type="text" /><a href="" class="dwnarrow"> </a>
<div class="acCtlDropdwn">
<!--<a href="#">options here options here options here options here options here options here options here options here options here options here options here</a>-->
<a href="#">options here</a>
<a href="">Boulder Logic</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
</div>
</div>
</body>
</html>
I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected. The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour. Can anyone see where I'm going wrong? I'm sure this is a ridiculously simple question, but hope someone will help anyway. I keep a "current news" box on the right-hand side of my page (rishton.info). The box is present on all pages in the site and links to the appropriate pages giving fuller information about the news items. At the moment I've simply turned the news into a single graphic, linked by means of mapping - but this is a ridiculous way of doing it, not least because to change the news links means going through every page on the site (which means in practice that I never change my "news"). What I'd like to do is of course to have something (preferably text-based rather than a graphic) that I could change using the css. Is there a way to write text into the "news" box directly from the style sheet, or is there some other sensible way to do this? Thanks for your help! Tim The guys in html told me to post this here instead. Basically I have this table that Should be at the bottom of the page, but if theres a lack of content it gets pulled up. The red highlights area in the attachment is what Im talking about - note Ive tried bottom : 0px; and height : 100%; Any ideas? |
|||||||