CSS - Why Does Ie Display The Color Box?

Hi,
Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of:

Code:

body {
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 15px;
}
#header {
  clear: both;
}
#topmenu {
  width: 100%;
  height: 30px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: normal;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  clear: both;
}
#topmenu a {
  width: 150px;
  height: 28px;
  color: #ffffff;
  background-color: #990000;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #ffffff;
  padding-top: 2px;
  float: left;
}
#topmenu a:hover {
  width: 150px;
  color: #990000;
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-right: 1px solid #990000;
  float: left;
}

#body {
  color: #000000;
  background-color: #ffffff;
  margin: 10px 0px 10px 0px;
  clear: both;
}
#footer {
  width: 100%;
  color: #000000;
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  border-top: 2px solid #990000;
  padding-top: 5px;
  clear: both;
}
#footer a {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: none;
}
#footer a:hover {
  color: #990000;
  background-color: #ffffff;
  font-weight: normal;
  text-decoration: underline;
}








#leftmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-right: 0.5%;
  float: left;
}
#contents {
  color: #000000;
  background-color: #ffffff;
  width: 58.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  float: left;
}
#rightmenu {
  color: #000000;
  background-color: #ffffff;
  width: 19.5%;
  padding-left: 0.5%;
  float: right;
}




.contentbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}


.menubreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 10px;
  clear: both;
}



.footerbreaker {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 2px;
  clear: both;
}


.menutoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}
.contenttoptitle {
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #990000;
  font-family: sans-serif;
  font-size: 19px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ffffff;
  padding-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}


.menu {
  width: 100%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  float: left;
}
.menu a {
  width: 98%;
  height: 19px;
  color: #000000;
  background-color: #eeeeee;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}
.menu a:hover {
  width: 98%;
  height: 19px;
  color: #ffffff;
  background-color: #990000;
  font-weight: normal;
  text-decoration: none;
  border-bottom: 1px solid #990000;
  padding-left: 2%;
  float: left;
}




.menucontent {
  width: 96%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  float: left;
}
.menucontent a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}
.menucontent a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}




.subcontentright {
  color: #000000;
  background-color: #ffffff;
  text-align: right;
}

.content {
  width: 98%;
  color: #000000;
  background-color: #eeeeee;
  font-family: sans-serif;
  font-size: 15px;
  border-left: 1px solid #990000;
  border-right: 1px solid #990000;
  border-bottom: 1px solid #990000;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 5px;
  float: left;
}
.content a {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: none;
}
.content a:hover {
  color: #990000;
  background-color: #eeeeee;
  font-weight: bold;
  text-decoration: underline;
}



.input {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  height: 13px;
}


.menuformcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  clear: both;
}

.menuformsubcontainer {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  clear: both;
}

.menuformlabels {
  color: #000000;
  background-color: #ffffff;
  width: 50%;
  padding-top: 2px;
  padding-bottom: 2px;
  float: left;
}
.menuformfields {
  color: #000000;
  background-color: #ffffff;
  width: 48%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 2%;
  float: left;
}


.menuformsubmit {
  color: #000000;
  background-color: #ffffff;
  width: 100%;
  text-align: right;
  padding-top: 2px;
  padding-bottom: 2px;
  clear: both;
}

http://jigsaw.w3.org/css-validator/...ut+with_options

Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings...

Thanks!
Yours sincerely,
speedbooster!

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either.

http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm

Hi!

Is is vicious to display a table as "display: block" to force margin-collapsing?

Otherwise there's no margin collapsing with other elements.

Thanks

Hey everyone,

I am using a template, and I thought i changed all of the colors, however, i am still getting blues and i want them gone. Help me please!

Sarah

CSS:
/* Global Styles */

body {
margin:0px;
}

td {
font:11px arial;
color:#333333;
}

a {
color: #cc0000;
text-decoration:none;
font-weight:bold;
}

a:hover {
color: #990000;
text-decoration:underline;
}

/* ID Styles */

#navigation a {
font:10px arial;
color: #ffffff;
text-decoration:none;
letter-spacing:.1em;
}

#navigation a:hover {
color: #99CCFF;
}

#padding {
padding:20px 5px 20px 5px;
}

#calendar td {
border: 1px solid rgb(0,51,153);
}

#noborder td {
border: 0px;
}

#weekdays th {
font:11px arial;
color: #ffffff;
font-weight:bold;
border: 0px;
padding:2px;
}

#calheader td {
font-weight:bold;
}

/* Class Styles */

.logo {
font:18px times new roman;
color: #990000;
letter-spacing:.3em;
font-weight:bold;
line-height:22px;
}

.tagline {
font:11px times new roman;
color: #CC3300;
letter-spacing:.2em;
}

.smallText {
font:12px times new roman;
color: #CC3300;
line-height:18px;
}

.pageHeader {
font:30px times new roman;
color: #CC3300;
letter-spacing:.1em;
line-height:38px;
}

.bodyText {
font:11px arial;
color:#333333;
line-height:24px;
}

.pageName {
font:20px georgia;
color: #8F0000;
letter-spacing:.1em;
line-height:26px;
}

.subHeader {
font:14px times new roman;
color: #990000;
font-weight:bold;
line-height:20px;
letter-spacing:.1em;
}

.navText {
font:10px arial;
color: #333300;
letter-spacing:.1em;
}

I am looking a sitting for Peach color like this #000000 not the word. Dose anyone know how to do this or know the sitting for it?

any ideas why this page : http://tampabay-online.org/avaacc/

has blue borders around the images in IE

it looks like it should in firefox.

is there some work around for this?

thanks

Hi,

I'm just learning css and need some help. I am attaching an html page that has a navigation bar that changes the background color of the table cell when you mouse over the text link. It works OK but I would like to have the bg color change when you mouse over the td cell. I am currently making it look like it changes the td background by adding Code:

display: block;
line-height: 32px;

to the "td.navbar a:hover" class.
Is it possible to change the td background when mousing over it using only css?

Here's the code that I have now:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-color: #000000;
}
td.navbar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
td.navbar a:link{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
td.navbar a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
td.navbar a:hover{
	background-color: #000000;
	height: 33px;
	width: 88px;
	display: block;
	line-height: 32px;
}
td.navbar a:active{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	
	}
-->
</style></head>

<body>
<table width="780" height="35" border="0" cellpadding="0" cellspacing="0" bgcolor="#000099">
  <tr>
    <td width="41">&nbsp;</td>
    <td width="2"></td>
    <td width="88" height="33" class="navbar"><div align="center"><font><a href="http://www.mysite.com/">Home</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><a href="#about">About</a></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/support.php">Support</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/contact.php">Contact</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/services.php">Services</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/shop.php">Products</a></font></div></td>
    <td width="2"></td>
    <td width="88" class="navbar"><div align="center"><font><a href="inc/links.php">Links</a></font></div></td>
    <td width="2">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


</body>
</html> 

i am trying to get rid of the border in IE9 or have the border color to match with the background color so that it doesn't look like there is one. This code works on google chrome but doesn't work on IE9.

on the css i have:
div.menu ul li a, div.menu ul li a:visited
{
background-color:#3a4f63;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
border-color:#3a4f63;
}
on the asp page I have:

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="About Us">
</asp:MenuItem>

<asp:MenuItem Text="Freight Services" Value="Freight Services"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Selectable="False"></asp:MenuItem>
<asp:MenuItem Text="Customers" Value="Customers"></asp:MenuItem>
<asp:MenuItem Selectable="False" Text="Carrier Corner" Value="Carrier Corner">
<asp:MenuItem Text="Carrier Setup" Value="Carrier Setup"
NavigateUrl="~/Account/Register.aspx?ReturnUrl=~/Carrier.aspx&TypeOfUser=Carrier"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Contact Us" Value="Contact Us"></asp:MenuItem>
</Items>
</asp:Menu>

Hi,

Is their any way to change the cursor color in css or javascript?

Thanks
Rishu

Having an issue with the background color in a div.

The color shows up in I.E. but not in Firefox.

I have a div with a width of 100%. Inside the div is an unordered list with two list items.

Here is the css:

div#nav {
width: 100%;
margin: 0;
background-color: #EAE9E4;
}

#nav ul {margin: 0; padding: 0; }

#nav li {
list-style: none;
float: left;
margin: 0;
padding: 0;
width: 15%;
font-size: 11px;
line-height: 20px;
white-space: nowrap;
}

Essentially this will be a navigation aid below the banner of the webpage. The list items will contain anchors which will appear as "buttons". The containing div extends to the end and I want it to have a background color.

Any help appreciated.

Hey Guys!

I'm going absolutely bonkers trying to find out how to change the color of the background of a certain element on my site. I installed Vanilla forums on my site and am trying to customize the css script.

If you look at the page, you will see an annoying white in the body. I am trying to make the background of that #F6F6F2. Could you guys possibly put me in the right direction?

Thanks!

Here is a link to my page:
shipswatchdotcom/forum/vanilla/aaa.html

Here is the css script:
Code:

#Body {
	margin: 0;
	width: 99.9%;
	position: relative;
	background: #F6F6F2;

}
#Head {
	background: #B8D4B8;
	padding:0;
	margin: 20px 20px 0;
	text-align: left;
	position: relative;
}
div.Popup h1,
div.Popup h2,
div.Connect h1,
div.Connect h2 {
	background: #F6F6F2;
	border-bottom: 1px solid #3b5998;
}
.Banner {
	padding: 10px;
	text-align: left;
	position: relative;
	background: #F6F6F2;
}
.Banner ul {
	background: #B8D4B8;
	padding: 0;
	margin: 0;
}
.Banner ul li {
	display: inline;
	padding: 0;
	margin: 0;
}
.Banner ul li a {
	font-weight: bold;
	padding: 3px 6px;
	font-size: 11px;
	color: #336633;
	display: inline-block;
}
.Banner ul li a:hover {
	background: #E5F0E5;
}
.Banner ul li a.SignOut {
	font-weight: normal;
	position: absolute;
	top: 10px;
	right: 10px;
}
.Banner ul li a span {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 1px 2px 0 1px;
	background: #F6F6F2;
	border-right: 1px solid #F6F6F2;
	border-bottom: 1px solid #F6F6F2;
	color: #F6F6F2;
	font-size: 9px;
	position: relative;
	top: -3px;
}
#Content {
	float: none;
	width: auto;
	margin: 0 280px 0 10px;
	background: #F6F6F2;
}
#Panel {
	float: right;
	margin-right: 10px;
	background: #F6F6F2;
}
#Panel div.SearchBox input.InputBox {
	width: 200px;
	margin-right: 4px;
	background: #F6F6F2;
}
div.SearchBox {
	margin-bottom: 6px;
}
body.Profile div.SearchBox {
	display: none;
}
body.Profile #Content {
	float:none;
	width: auto;
	margin: 0 10px 0 280px;
	background: #F6F6F2;
}
body.Profile #Panel {
	margin: 0 0 0 10px;
	background: #F6F6F2;
}
form.Activity textarea {
	width:99%;
	background: #F6F6F2;
}
#Foot div {
	width: auto;
	background: #F6F6F2;
}
body.Post #Content {
	width: auto;
	margin:0 20px;
	background: #F6F6F2;
}
#ConversationForm textarea.MultiComplete,
#ConversationForm .TextBox,
#MessageForm textarea,
div.Comment div.CommentForm,
div.Comment div.CommentForm textarea,
div.CommentForm textarea,
#DiscussionForm input.InputBox,
#DiscussionForm textarea {
	width:99%;
	background: #F6F6F2;
}
#ConversationForm form {
	border: none;
}
div.Preview div.Message,
ul.MessageList div.Message {
	clear: none;
}
#DiscussionForm form {
	background: #F6F6F2;
	border: 1px solid #ccc;
}
div.MessageForm,
div.Tabs {
	background: #F6F6F2;
	border-bottom:1px solid #ccc;
}

/* Tabs */
div.Tabs {
	background: #F6F6F2;
	padding: 0;
	border-bottom: 1px solid #aaa;
}
div.Tabs ul {
	padding: 0 8px;
	white-space: nowrap;
}
div.MessageForm {
	padding: 8px 8px 5px;
}
div.MessageForm div.Tabs {
	padding: 0 8px;
}
div.Tabs li a,
div.Tabs li a:link,
div.Tabs li a:hover,
div.Tabs li a:active,
div.Tabs li a:visited {
	font-size: 11px;
   margin: 0;
   border: none;
   border-radius: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   background: #F6F6F2;
   color: #336633;
   text-decoration: none;
   padding: 8px 10px;
	line-height: 11px;
}
div.Tabs li a:hover {
   text-decoration: underline;
}
a.Active,
div.Tabs li.Active a {
   background: #F6F6F2;
   color: #336633;
   margin: 0;
   border: 1px solid #aaa;
	border-bottom: none;
   border-radius: 3px 3px 0 0;
   -moz-border-radius: 3px 3px 0 0;
   -webkit-border-radius: 3px 3px 0 0;
   display: inline-block;
	font-size: 12px;
	line-height: 12px;
   font-weight: bold;
   text-decoration: none;
   padding: 6px 10px;
	position: relative;
	top: 1px;
}
div.Tabs li a span {
   line-height: 1;
   font-size: 80%;
   padding: 0 3px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   font-weight: normal;
	background: #F6F6F2;
   color: #4A7023;
   margin: 0 0 0 4px;
}
div.DiscussionsTabs div.SubTab {
	font-size: 11px;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-top: 1px solid #aaa;
	background: #F6F6F2;
	margin:0;
	padding:4px 8px;
}
div.HeadingTabs ul {
	margin: 8px 0 0;
}
body.Discussion a.Bookmark {
	margin: 6px 2px;
}
div.Preview {
	border: 1px solid #aaa;
	background: #F6F6F2;
	margin:0 0 8px;
	padding: 8px;
}
.Foot {
	background: #F6F6F2;
	border: none;
}
div.MorePager a,
div.MorePager a:link,
div.MorePager a:visited,
div.MorePager a:active,
div.MorePager a:hover {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	background: #F6F6F2;
	border: none;
	color: #4A7023;
	line-height: 1;
	padding: 0;
	text-decoration: none;	
}
div.MorePager a:hover {
	color: #4A7023;
	text-decoration: underline;
}
body.add #Content {
	margin: 0 10px;
	background: #F6F6F2;
}

/* Panel Boxes */
#Panel div.Box {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background: #F6F6F2;
	padding: 0;
}
div.Box h4 {
	color: #4A7023;
}
ul.PanelActivity,
ul.PanelInfo {
	border-top:1px solid #ccc;
}
ul.PanelActivity li,
ul.PanelInfo li,
ul.PanelInfo li.Active {
	background: #F6F6F2;
	border-bottom: 1px solid #ccc;
}
ul.PanelInfo li.Active {
	background: #F6F6F2;
}
#Status {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	background: #eee;
	color: #000;
	line-height: 1.6;
	padding: 3px 6px;
	margin: 0 0 8px;
}
body.Profile ul.PanelInfo {
	border: #F6F6F2;
}
body.Profile ul.PanelInfo li {
	margin: 0;
	padding: 0;
}
body.Profile ul.PanelInfo li a {
	font-size: 12px;
	display: block;
	padding: 0 6px;
	background: #F6F6F2;
}
body.Profile ul.PanelInfo li a:hover {
	background: #F6F6F2;
}

/* Sign In Page */
body.Entry #Content {
	text-align: center;
	margin: 0 auto !important;
}
body.Entry #Content div.Box {
	background: #F6F6F2;
	border: 0;
}
div.Methods {
	border-left: 1px solid #ccc;
}

/* Messages */
div.DismissMessage {
	background: #F6F6F2;
	border: 1px solid #ccc;
	padding:6px 8px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
div.DismissMessage a.Dismiss:hover {
	color: #000;
}
div.Warning {
	background: #d00;
	border: 1px solid #b00;
	color: #F6F6F2;
	text-shadow: 1px 1px 1px #444;
}
div.Warning a.Dismiss {
	color: #F6F6F2;
}
#Content div.Box {
	color: #000;
	background: #F6F6F2;
	border: 1px solid #F6F6F2;
}
body#dashboard_entrycontroller_signin div.Box {
	border: none;
}
/* Autocomplete */
.ac_results {
   border: 1px solid #d7d8da;
	color: #000;
   border-top: 0;
   background-color: #F6F6F2;
}
.ac_results li {
   border-bottom: 1px solid #d7d8da;
}
.ac_lastitem {
   border-bottom: 0 !important;
}
.ac_results strong {
   background: #F6F6F2;
}
.ac_over strong {
   background: #F6F6F2;
}
.ac_over {
   background: #3b5998;
   color: #fff;

}

Hi there people,

I have a question about CSS but before I start off asking this question I'll introduce myself.

I'm a new user of this great forum, my name is Dwight and I'm a student on the "Graphical Lyceum Amsterdam" where I follow the education for "Multimedia Designer".

Ok so now you know me a little, I'll start off asking my question.

Question: I have to change the layout for a html page that askes for information from different asp pages, but that's not my problem . The problem is that I have to make some td's a different color -the background that is- but the problem is that I can't change the html page itself (it is automaticly generated and I don't have permission to change it).
So my question is can someone tell me how I can change the color of some (not all!) td's with CSS without making classes?

Tnx, Dwight

i wanted usersto choose their own style sheet by giving them different links like red, green, blue which will take them to different layouts or background color page. the problem was that worked only for that particular page but if they click on any link or menu from that page it will take them back to the default color.
is there any way that i can set so that their choice will stay throught their surfing ?
any thoughts ?

hanks

I have an image that is gray-scale, and I want to dynamically change the color using CSS. Is this possible?

#example {
background-image:url('gray_button.png');
}

I could change the opacity/transparency of the image. How do I "set" a color on Top of this image though?

Any help appreciated.