CSS - Css Not Working For Text Input Boxes

Not sure if this is an HTML or CSS related question but here goes... googling gives me nothing.

I have a form that I've built and on occasion one or two of the text fields may have text in side them but I've sent the text field to 'disabled' so that the user cannot change the information inside.

The problem is is that some of my users are a little bit older and have a hard time seeing what is inside of the disabled text field because its already grayed out and the text inside is gray.

Does anyone know if there is a way to change this or is it just a default with internet explorer?

Thanks!

I recently put a section on my web page that allows people to submit data to database, and it works but it looks kind of plain. And I had seen this web page (http://textsfromlastnight(dot)com/Submit-a-Text.html) and saw how they seem to use a custom text box for their submit form. Can anyone explain to me how they did this? Or if its done with something other than CSS possibly point me in the right direction to learn?

Thanks in advance!!

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'm pretty new to CSS so bear with me if this is a silly question.

I want to go totally CSS and 0 tables. 1 problem that I've been having with my site is that I have several forms for data entry. These are of course done in 2 column tables, label in the 1st column, text box in the right.

The problem I'm having is that I cannot get the text boxes to line up properly using CSS. I am trying a test page simulating a login page. But since the words Username and Password are different lengths, the left edges of the text boxes don't line up evenly.

What is the best technique to get CSS to display 2 columns like a 2 column table where the first 'column' contains a text label and the 2nd column has the input boxes aligned nice and neat?

I came across this site with a google search. I have been trying to make a website for my new business and I've been trying to learn CSS. Everything went fine until I tested resolutions out yesterday, I noticed they changed. I've been trying to place a text box in middle of an image but I can't get it to work correctly... a perfect example of what I'm trying to achieve is found he http://www.myspace.com/nourotika

I have tried and tried and this is the website that came closest to my problem...

My code would be:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
   background-color: #000;
}
-->


</style></head>


<body><center>
<p style="position: absolute; top: 735px; right: 314px; width: 537px; padding: 4px; background-color: #000; font-weight: bold; font-size: 11px; font-xolor: #F00; height: 548px; color: #909; overflow: visible; z-index: 1;">content goes here</p>
</div>

http://i158.photobucket.com/albums/t108/Katouuffxi/regular.jpg
This would be the regular resolution I'm looking for

http://i158.photobucket.com/albums/t108/Katouuffxi/resproblem.jpg
And this would be my screen resolution problem Sad

I really don't know how in the world to do it and I'm just so close from finishing everything... help would be much much appreciated.