CSS - Css Styled Buttons (disabled)

Hi guys

I'm in the process of getting my site together, and it's coming along fairly well. I've been using Firefox for testing, and haven't noticed anything wrong. However, when I checked it in IE8, text that I have explicitly left-aligned is now sitting centred on my page. I have validated the code, and there are no problems. I'm just confused...

Here is my code:

Code:

<span style="text-align:left;">Jarryd Pearson</span><br /><br />
        <table align="left">
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
         <tr>
          <td class="contact">
           Phone:
          </td>
          <td class="contact">
           ####
          </td>
         </tr>
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
         <tr>
          <td class="contact">
           Mobile:
          </td>
          <td class="contact">
           ####
          </td>
         </tr>
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
         <tr>
          <td class="contact">
           Email:
          </td>
          <td class="contact">
           ####
          </td>
         </tr>
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
         <tr>
          <td class="contact">
           Postal Address:
          </td>
          <td class="contact">
           ####
          </td>
         </tr>
         <tr class="rule">
          <td colspan="2">
           <hr />
          </td>
         </tr> 
        </table>

And here's my CSS:

Code:

@charset "utf-8";
/* CSS Document */

body {
	background: #0d1866;
	color: #CCCCCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	}
a 	{
	color: #FFFFFF;
	text-decoration: underline;
	}
a:hover {
	color: #FFFFFF;
	text-decoration: none;
	}
paypal {
	border: none;
	}
img.footer {
	border: none;
	width: 88px;
	height: 31px
	}
td.contact {
	vertical-align:top;
	}
tr.rule {
	padding: 0px;
	}
	
/* DIVS */
div#main {
	padding: 2px;
	margin: 2px;
	}
div#text {
	width: 650px;
	height: 370px;
	vertical-align: top;
	overflow: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	}

I apologise if this has been posted before. I did a search, and couldn't seem to find this particular issue. If someone has already posted this, please point me in their direction!

Thanks

Jarryd

Hey guys, When i apply a stylesheet to this page. http://jessup.oraclestudio.com.au/i...p?page=coporate the link on the left hand side 'Forensic Accounting' doesnt appear to work in IE but work fine with no style sheet. By not work i mean it gets styled but doesnt function as a link. any ideas ???

Code:

a:link {
	color: #333333;
	font-size: 11px;
}
a:hover {
	color: #333333;
	font-size: 11px;
}
a:visited {
	color: #333333;
	font-size: 11px;
}

Hi guys,
sorry if its newbie question, don't work with CSS so long. I've just read a nice article about styling CSS forms (Fancy Form Design) and it looked really nice, so I tried to apply it immediately. However, some problems occured, things are never so easy I guess .
First problems occurs with styling of group of form elements: they are dropped one line down (below its label, resp. legend) in IE 5.5/6.0 and also moved to the right (in IE 5.5-7.0) for some reason. Also, styling of fieldsets' legends works odd: first legend is styled differently than the others (one would guess that all of them will be styled in same way).
Could you give me pls a little hint on these problems?

Here's the test page with applied form styling: http://147.32.122.251/hsh2t/index.php.
General CSS: http://147.32.122.251/hsh2t/forms.css
IE (5.5-6.0) only CSS: http://147.32.122.251/hsh2t/forms-ie.css

My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons.

If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons.

Here is the site:
http:// bradleyrose . net / WaterStreetRestaurant

I am currently working on a new site, and one of the features I was intending to have included was a business card style list for all the articles that will be on this site. I have included two images, want.gif (what I want the final product to look like, and what it looks like in IE) and have.gif (what the current rendering looks like in all other browsers).

Code:

<html>
	<head>
		<title>Business Cards</title>
		<style>
#article	{
		width: 300px;
		padding: 3px;
		background-color: #CCCCCC;
		border: 1px solid #000000;
		text-align: left;
		}
#article IMG	{
		border: 1px solid #000000;
		}

#article #stuff #title	{
			width: 237px;
			float: right;
			border: 1px solid #000000;
			font: normal small-caps normal 8pt Verdana;
			}
#article #stuff P	{
			margin: 0px;
			}
		</style>
	</head>
	<body>
		<center>
			<div id="article">
				<div id="stuff">
					<div id="title">
						<p>Spiderman<br />Last Updated: October 25, 2005.<br />Extensive article on Spiderman. Includes a foreword and preface by the author.</p>
					</div>
					<div id="shade1">
						<div id="shade2">
							<div id="shade3"><img src="i/temp-icon.gif" width="50" height="50" alt="Pot Icon" /></div>
						</div>
					</div>
				</div>
			</div>
		</center>
	</body>
</html>

I know the center tag isn't needed, but this is just a mock-up, hence the Spiderman. I also included the temp-icon.gif file for troubleshooting purposes. My question is, how can I get this to work in Firefox, and other superior browsers, while it still displays the same in IE. I want to try and avoid using seperate style sheets if at possible.

Thanks in advance.

Hi folks.

I am in the process of creating a feature in our Web application to allow users to create and manage a set of simple HTML email templates.

At the bottom of my editor screen I show a preview of the formatted email (with the text and HTML entered into a textarea field).

My problem is that when I output the preview to the Web page, it inherits all the styles from the parent page (for example an <h1> header has colors and special spacing, etc.). Is there a way to temporarily disable then re-enable the CSS styles defined in the header of the page so I can draw the "preview" with default browser CSS styles which will reflect more what an eMail program would look like?

I am not sure if this can be done. If it could, it would be awesome and save me from having to code a special preview page or iFrame for the email template.

Ok, don't blame me if this looks like a bad idea as it's not my code. I just have to make it work. Our navigation is basically a div that has a background which is three times the height of that div (and the background file contains different versions of each button or so I am told).

Our code is below. We want to have a div behind the menu that will obviously show up if images are disabled but I can't get it working. Presumably because the nav div uses a background file and is not actually filled.

Code:

PHP Code:
<div id="mainmenuText">text links to go below...</div>
<div id="mainmenu">
    <ul id="mainmenulist">    
    <li id="menu_homepage"><a href="index.php" title="Homepage" name="Homepage">Homepage</a></li>
    <li id="menu_apartments"><a href="apartments.php" title="Apartments" name="Apartments">Apartments</a></li>
    <li id="menu_villas"><a href="villas.php" title="Villas" name="Villas">Villas</a></li>
    <li id="menu_prices"><a href="prices.php" title="Price Matrix" name="Price Matrix">Price Matrix</a></li>
    <li id="menu_contact"><a href="contact.php" title="Contact Us" name="Contact Us">Contact Us</a></li>
    </ul>
</div> 





CSS:

PHP Code:
#mainmenu {
z-index:1000;
height: 20px;
background: transparent url("../images/layout/navigation.jpg") no-repeat top left;
margin-left: 0px;
}
#mainmenuText {
z-index:10;
width:100%;
height:100%;
position:relative;
top:10px;
display:block;
margin-left: 0px;
} 

Hi I have a page I am putting together and everything is fine until I take off js in ff. Then I get this small gap between the code thats would have gotten replaced by flash if js was enabled. Its right below the menu. If you could take a look at http://www.bostonredhat.com/menu.php with js enabled and with it disabled for me and let me know if you see any problems I am missing I would appreciate it.

Thanks.

Hey -

So I have a page with a disabled multiple select box, which is automatically populated with the relevant selected value. In Firefox, you can still see the value that's been automatically selected even though it's disabled. But in IE, you can't. Is there a way to make IE show that?

Thanks in advance.

Is there a way to detect if the browser have disabled CSS? That way, I can redirect users to another page explaining that website won't function with his/her browser with disabled CSS.

This was bugging me for a while last week, devshed and google weren't helping much so I wrote my own. Basically if you're trying to get a Javascript enabled site to degrade then instead of writing a clumsy function to walk the DOM and "activate" your funky UI elements just document.write a CSS style block. Mind numbingly simple... and it works:

Link:
http://www.cyclomedia.co.uk/?40

Code:
Code:

<head>
   <link rel="stylesheet" type="text/css" href="javascript_disabled.css">
   <script type="text/javscript">
      if( document.getElementById )
         document.write('<' + 'link rel="stylesheet" type="text/css" href="javascript_enabled.css">');
   </script>
</head>

www.cyclomedia.co.uk - ASP, CSS and AJAX demos, examples and tutorials with free source code download

Hi There- I have a page that I'm making for a friend (with the code below) that's a couple web hosting plans in a CSS styled table. The style.css file is also below.

If you look at the plans page above, the whole table has a giant space/gap from the text block for some reason and I really can't find out why! I'm trying to get the top of the table to be close to the bottom of the text block but all of my styling to fix this isn't working to fix the gap.

I'm wondering if anybody can offer any advice that I can use to fix this. I tried to post the URL to the site but the forums rules prohibit me from putting in a URL to the post. I've tried lots of coding changes with Firebug and the gap still stays.

Thanks for your help.

HTML Page Code:
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>
<title>Personal Hosting Plans</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="phostingstyle.css"></link>
</head>

<body>
<span class="toptext">
NextGen's personal hosting plans offer a broad variety of features for creating anything from a simple family blog or photo album to an advanced personal portfolio or blog site. Our Fantastico auto-installer allows you to install a variety of blogging, photo album, wiki or forum tools with the just click of your mouse. Or, choose from the hundreds of easy-to-edit, professional site templates in the signature RVSiteBuilder to make your website.<p> The features included on NextGen personal hosting accounts allow you to have all the tools you need right at your fingertips to create exactly the site you're looking for- what are you waiting for? Contact NextGen Sales if you have questions, or take a look at our selection of personal plans below.<p> Looking for business hosting that includes advanced eCommerce, blogging and website creation tools? Click here.
</span>

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="personalhostingplans">
  <tr class="planheaders">
    <th width="174" height="147" scope="col">&nbsp;</th>
    <th width="154" class="planheaderslite" scope="col"><span class="plantitles"><strong>LITE</strong></span>      <p class="price">$3<span class="subprice">49</span></p></th>
    <th width="159" class="planheadersdeluxe" scope="col"><span class="plantitles"><strong>DELUXE</strong></span>      <p class="price">$4<span class="subprice">99</span></p></th>

    <th width="154" height="50" class="planheaderssuper" scope="col"><span class="plantitlessuper"><strong>SUPER</strong></span>      <p class="pricesuper">$6<span class="subpricesuper">99</span></p></th>
    <th width="159" class="planheaderspremier" scope="col"><span class="plantitles"><strong>PREMIER</strong></span>      <p class="price">$10<span class="subprice">99</span></p></th>
  </tr>
  <tr>
    <th class="featurelistmainfeature" scope="row">main features</th>

    <td class="toplitesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=7"><img src="images/lite_signup.png" alt="Lite Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="topdeluxesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=11"><img src="images/deluxe_signup.png" alt="Deluxe Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="topsupersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=12"><img src="images/super_signup.png" alt="Super Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="toppremiersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=13"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=13"><img src="images/premier_signup.png" alt="Premier Sign Up" width="117" height="29" align="center" /></a></a></div></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Disk Space</th>
    <td class="individualfeatsdark"><strong>.</strong>3GB</td>

    <td class="individualfeatsdark">1.7GB</td>
    <td class="individualfeatsdarksp">2.8GB</td>
    <td class="individualfeatsdark">3.5GB</td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">Bandwidth/Data Transfer</th>
    <td class="individualfeatslight">1.5GB</td>

    <td class="individualfeatslight">2.8GB</td>
    <td class="individualfeatlightsp">3.6GB</td>
    <td class="individualfeatslight">4.3GB</td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row"><strong>Website Builder</strong></th>
    <td class="individualfeatsdark">-</td>

    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">FREE Domain Name</th>
    <td class="individualfeatslight">-</td>

    <td class="individualfeatslight">-</td>
    <td class="individualfeatlightsp">-</td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Advanced Email Accounts</th>
    <td class="individualfeatsdark">2</td>

    <td class="individualfeatsdark">4</td>
    <td class="individualfeatsdarksp">Unlimited</td>
    <td class="individualfeatsdark">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row"><strong>cPanel Control Panel</strong></th>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row"><strong>Fantastico Auto-Installer</strong></th>
    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatlightsp">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>

  </tr>
  <tr>
    <th class="featurelistmainfeature" scope="row">OTHER FEATURES</th>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatlightsp">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
  </tr>

  <tr>
    <th class="featurelistdark" scope="row"><strong>Satisfaction Guarantee</strong>*</th>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>

    <th class="featurelistlight" scope="row">phpMyAdmin</th>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">MySQL Databases</th>

    <td class="individualfeatsdark">1</td>
    <td class="individualfeatsdark">3</td>
    <td class="individualfeatsdarksp">Unlimited</td>
    <td class="individualfeatsdark">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">FTP Accounts</th>

    <td class="individualfeatslight">1</td>
    <td class="individualfeatslight">3</td>
    <td class="individualfeatlightsp">Unlimited</td>
    <td class="individualfeatslight">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Subdomains Allowed</th>

    <td class="individualfeatsdark">1</td>
    <td class="individualfeatsdark">5</td>
    <td class="individualfeatsdarksp">Unlimited</td>
    <td class="individualfeatsdark">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">Parked/Addon Domains Allowed</th>

    <td class="individualfeatslight">1</td>
    <td class="individualfeatslight">5</td>
    <td class="individualfeatlightsp">Unlimited</td>
    <td class="individualfeatslight">Unlimited</td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">eCommerce Enabled</th>

    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td class="individualfeatslight">&nbsp;</td>

    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatlightsp">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
  </tr>
  <tr>
    <th class="featurelistmainfeature" scope="row">DEVEloper features</th>
    <td class="individualfeatslight">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>

    <td class="individualfeatlightsp">&nbsp;</td>
    <td class="individualfeatslight">&nbsp;</td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Hotlink Protection</th>
    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">Password Protection</th>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Unlimited Redirects</th>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>

  <tr>
    <th class="featurelistlight" scope="row">IP Address Denial</th>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>

    <th class="featurelistdark" scope="row">Custom Site Error Pages</th>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">SSH/Shell/SFTP Access</th>

    <td class="individualfeatslight">-</td>
    <td class="individualfeatslight">-</td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Full Ruby on Rails and RubyGem Support</th>

    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdark">-</td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistlight" scope="row">Advanced Visitor Statistics and Logging</th>

    <td class="individualfeatslight">-</td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatlightsp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatslight"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th class="featurelistdark" scope="row">Latest Server Modules, Software and Configuration</th>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>

    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdarksp"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
    <td class="individualfeatsdark"><img src="images/Checkmark.png" width="19" height="15" alt="Yes" /></td>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td class="bottomlitesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=7"><img src="images/lite_signup.png" alt="Lite Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="bottomdeluxesignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=11"><img src="images/deluxe_signup.png" alt="Deluxe Sign Up" width="117" height="29" align="center" /></a></div></td>
    <td class="bottomsupersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=12"><img src="images/super_signup.png" alt="Deluxe Sign Up" width="117" height="29" align="center" /></a></div></td>

    <td class="bottompremiersignupbg"><div class="signup"><a href="http://www.nextgenwebhosting.com/frontdesk/cart.php?a=add&pid=7"><img src="images/premier_signup.png" alt="Premier Sign Up" width="117" height="29" align="center" /></a></div></td>
  </tr>
</table>

</body>

</html>

CSS Page Code:
Code:

@charset "utf-8";
/* CSS Document */

body {
	font-family:Arial, Helvetica, sans-serif;
}

personalhostingplans {
	border-collapse:collapse;
}

.toptext {
	font-family:"Lucida Grande",Tahoma,Arial,Verdana;
	line-height:150%;
	font-size:11px;
	color: #666666;
}

.planheaderslite {
	background-color: #FFFFFF;
	background-image:url(images/lite_header.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.planheadersdeluxe {
	background-color: #FFFFFF;
	background-image:url(images/deluxe_header.png);
	background-repeat:no-repeat;
	background-position:bottom;
}

.planheaderssuper {
	background-color: #FFFFFF;
	background-image:url(images/superheaderdeal.png);
	background-repeat:no-repeat;
	background-position:bottom;
}

.planheaderspremier {
	background-color: #FFFFFF;
	background-image:url(images/premier_header.png);
	background-repeat:no-repeat;
	background-position:bottom;
}

.price {
	position:relative;
	top:52px;
	font-size:48px;
	font-weight:bold;
	text-transform:uppercase;
	color: #FFFFFF;
}

.subprice {
	position:relative;
	font-size:20px;
	font-weight:bold;
	text-transform:uppercase;
	color: #FFFFFF;
	vertical-align:super;
}

.pricesuper {
	position:relative;
	top:32px;
	font-size:60px;
	font-weight:bold;
	text-transform:uppercase;
	color: #FFFFFF;
}

.subpricesuper {
	position:relative;
	font-size:25px;
	font-weight:bold;
	text-transform:uppercase;
	color: #FFFFFF;
	vertical-align:super;
}

.individualfeatsdark {
	background-color: #C5E7ED;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:center;
}
.individualfeatslight {
	background-color:#DEF6F7;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:center;
}

.featurelistdark {
	background-color:#E9E9E9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:right;
	font-weight:normal;
	padding:6px 14px 6px 0px;
}

.featurelistlight {
	background-color: #F4F4F4;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:right;
	font-weight:normal;
	padding:6px 14px 6px 0px;
}

.featurelistmainfeature {
	background-color: #FFFFFF;
	text-transform:uppercase;
	font-size:14px;
	font-weight:bold;
	color: #14A5E1;
	padding:6px 6px 6px 6px;
}

.individualfeatsdarksp {
	background-color: #B4E3E9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:center;
}

.individualfeatlightsp {
	background-color: #C3EFEF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:center;
}

.signup {
	text-align:center;
	padding: 3px 3px 3px 3px;
}

img {
	border-style:none;
}

.plantitles {
	position:relative;
	color: #000000;
	top:105px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:21px;
	font-weight:normal;
	color: #FFFFFF;
	left:5px;
}

.plantitlessuper {
	position:relative;
	color: #000000;
	top:91px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:21px;
	font-weight:normal;
	color: #FFFFFF;
	left:5px;
}

.toplitesignupbg {
	background:url(images/litetoprounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.topdeluxesignupbg {
	background:url(images/deluxetoprounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.topsupersignupbg {
	background:url(images/supertoprounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.toppremiersignupbg {
	background:url(images/premiertoprounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.bottomlitesignupbg {
	background:url(images/litebottomrounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.bottomdeluxesignupbg {
	background:url(images/deluxebottomrounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.bottomsupersignupbg {
	background:url(images/superbottomrounded.png);
	background-position:bottom;
	background-repeat:no-repeat;
}

.bottompremiersignupbg {
	background:url(images/premierbottomrounded.png);
	background-position:right;
	background-repeat:no-repeat;
}

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!

Hi,
if i test my website with javascript disabled i don't see any colors or styles(it automatically disables css too).

i don't know if its normal or not??

i din't disable css rather i disabled javascript only. all suggestions and recommendations are most welcome.

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?