|
CSS - Color Problem
I have a css for a sliding menu and cannot get this color to work. Here's the code:
Code: .transMenu .item.hover {
color:white;
background:#F79A00;
}
If i use "white" nothing will show up. I can use red, green, etc, but not white. I tried substituting "#ffffff" but still didn't work. Is it not possible to use white in this circumstance? (I'm a noob with this stuff) Similar TutorialsHi, My code validates apart from some Mozilla specific stuff at the bottom. Basically, in the socialbes-hover' part towards the end i have the background-color set to #F9F7ED which works fine in Firefox however in IE it always reverts back to the earlier code of a:hover { color: #F9F7ED; background-color: #006E2E and i cant seem to get it right whatever it try! please help me its driving me mad arghh lol thanks Code: .style1 a:active {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 a:link {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 a:visited {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1 a:hover {
color: #FFCC00;
font-size: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #D15600; text-decoration:none
}
a:visited {
color: #D15600; text-decoration:none
}
a:hover {
color: #F9F7ED; background-color: #006E2E
}
.style1 {color: #D15600}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: smaller; }
.style9 {color: #D15600; font-size: larger; }
/************Main Menu******************/
.menu a:link {
color: #36393D; text-decoration:none
}
.menu a:visited {
color: #36393D; text-decoration:none
}
.menu a:hover {
color: #D15600; background-color: #F9F7ED
}
/************Comments******************/
.comments :link {
color: #D15600; text-decoration:none
}
.comments :visited {
color: #D15600; text-decoration:none;
}
.comments :hover {
color: #36393D; background-color: #F9F7ED
/************Sociables******************/
}
.sociable-hovers {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
background-color: #F9F7ED;
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
color: #36393D;
background-color: #F9F7ED;
}
I have a horizontal ul: Code: <ul> <li>blah</li> <li>loooooooooooooooooooooong blah blah blah</li> </ul> If I set the background color: Code:
li { background-color: yellow; }
It works fine, but If the long line gets wrapped, the height of the background of that li is higher, and it looks very funny. I want the background to be equally height, independent on the other li:s height. Is that possible? I don't want to have a fixed value for the height Hello, I can't seem to figure out how to get the body of this page to be white... you can see the page at: www.brandontutmarc.com/vlr and the attached CSS is at: www.brandontutmarc.com/vlr/viva.css Here is what I'd like it to look like: http://www.brandontutmarc.com/vlr/vlr1.jpg Any help is GREATLY appreciated... Hi i am using to different styles to preview my links but i want when a link is being visited to return to his starting point.For example it is black and when is being visited i want it again when the second time the user come's to the page to see it black again.I tried a lot of methods but when i put the visited pseudo class it blocks and the the hover pseudo class is not working.Plz help ****the class that i have the problem is "boxes" Code: A:link {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:active {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:visited {
COLOR: #2094E1; TEXT-DECORATION: none
}
A:hover {
COLOR: #ffffff; TEXT-DECORATION: none
}
TD {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
hr{
color: #96A097;
height: 0px;
width: 150px;
}
#title{
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
COLOR: #000000;
}
.mainbox{
FONT-SIZE: 10px; COLOR: #727C8E;
padding-top:5px;
padding-bottom:3px;
}
.boxes {
FONT-SIZE: 10px; COLOR: #000000;
padding-top:3px;
padding-left:3px;
padding-right:3px;
padding-bottom:3px;
}
.boxes a:link {
FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:active {
FONT-SIZE: 10px; COLOR: #000000;
}
.boxes a:hover {
FONT-SIZE: 10px; COLOR: #FFFFFF;
}
.boxes a:visited {
FONT-SIZE: 10px; COLOR: #000000;
I'd like to have a table with a background image that does not repeat, and if the table extends below the height of the image, I want a solid background color. But this does not seem to work. Why? Code:
table.main {
border: 1px solid #01228a;
border-collapse: collapse;
background: url(./images/bluehills.jpg) no-repeat top
background-color: #01228a;
}
[EDIT] Sorry, the problem is while the bg image is there and does not repeat, the solid bg color isn't there... Imagine that the background image is supposed to fade into the background color... Thanks... I have a problem with applying a style for tableborders that is needed at the client I work at. The client works with IE6 / IE7 only. In a portlet (JSF) content is loaded into a table that is automatically generated on the basis of CSS. The "house-style" in this company for using tables is set to the following: - The outer borders for the table are not visible - The border under the top-row is orange (#F60) - The borders under all other rows are grey (#808080) - The vertical borders are all orange (#F60) An example of what I mean is seen here (sketch from MS paint, poor quality and wrong colors!!!) : URL Anyone with suggestions on how to tackle this? I have found one solution that seems to work, but as soon as I change it (size, nr of rows etc) the right border shows again. I do not fully understand the code and there are no comments added. See below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table with css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{text-align:center;}
* {margin:0;padding:0;}
html{font-size: 75%;}
body{background:#ccccff;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
.tbla caption,.tbla,.tbla th,.tbla td{
border-color:#0099cc;
border-style:solid;
font-size:1em;
}
.tbla{border-collapse:collapse;}
.tbla th,.tbla td{padding:.5em;}
.tbla caption{background:#9999ff;border-width:1px 1px 0 1px;font-weight:600;padding-top:.7em;padding-bottom:.3em;}
.tbla th{text-align:center;font-weight:600;font-style:italic;}
.tbla{border-width:1px 0 1px 1px;width:100%;}
.tbla td{border-width:1px 1px 0 0;font-style:normal;}
.tbla th{border-width:0px 1px 0 0;color:#000000;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
.tbla col{width:33.3%;}
.tbla .a{background:#ffccff;text-align:right;}
.tbla .b{background:#99ccff;text-align:left;}
.tbla .c{background:#ccffff;text-align:center;color:#ff0000;font-family:"Comic Sans MS", sans-serif;}
head+body .tbla tr td {background:#ffccff;text-align:right;}
head+body .tbla tr td + td {background:#99ccff;text-align:left;}
head+body .tbla tr td + td + td {background:#ccffff;text-align:center;color:#ff0000;font-family: "Comic Sans MS", Geneva, sans-serif;}
.x{width:64em;margin:1em auto;}
.tbla th:first-letter {color:#fe7807;}
.tbla th{text-transform:capitalize;}
</style>
</head>
<body>
<div class="x">
<table cellspacing="0" summary="aa" class="tbla">
<caption>table</caption>
<col class="a" /><col class="b" /><col class="c" />
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one x</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>FF needs a Div to center ?</td>
<td>it detaches the </td>
<td>caption ?</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
hi. i created a menubar that has different properties when you hover, visited, etc in css. it's pretty much your standard menubar with different colors you see on the net. it works fine on my pages who's background colors are white, off-white, blue... everythinb BUT BLACK. for some reason, on the black ground, it goes to the standard purple/blue/text-underline schemes. is there a way to get around that? also, in css, do you treat a "mailto" the same as a normal "href"? So I know that tables are a no-no now-a-days, but I am trying to help troubleshoot this problem without having to rebuild the site. So this problem only occurs in IE, of course! When you go to this page: http://dysonracing .com/company/news/archive.php?archive_year=2010 The grey box on the left that displays the news/events nav get a bit out of wack. What I mean by that is that the grey background on the table does not totally flow anymore. The left and right edges of the table dislay white at the top, then the grey about 1/2 way down and then black at the bottom, when the whole thing should be grey. It has a repeating background image. Even if I remove the image and just us the #333333 for the background color, issue is not solve. It is strange because this problem only happens if you are viewing one of the archive links at the bottom of the page. If you just click News+Events from the main nav, it looks fine. But go to an archive link and it get funky. Any ideas why this is displaying this way...and only in IE?! when the colour is changed by a function, using the above, can it be changed later in the same function if a different option is picked? this is really bugging me as when it changes to one colour, it will not change to another! I have my "global" a:link color set to WHITE, but the WEATHER.COM module's background color that I want to use is also white, so the links are not visible. How do I change the color of JUST the WEATHER.COM module, given the code that I'm using below? Any help is HUGELY appreciated! /*-- global settings --*/ a { color: #FFFFFF; text-decoration: none;} a:hover { text-decoration: none; color: #FF5134; /*-- module settings --*/ #ads { float: right; width: 160px; padding: 0 0 0 20px; .ads a {color: #1200FF;} .ads a:hover {color: #1200FF;} } /*-- Weather --*/ #weather { .weather a:link {color: #1200FF;} .weather a:hover {color: #1200FF;} } hello mates, for the "footer" of my webpage, i need to have the left part holding a transparent gif image (can be background image or html object, don't care as long as it shows correctly the background image of the page), and the right part to extend to the rest of the containing "footer" div, with a background-color. But i can't make the two cohabitate peacefully. :'( i've tried with divs, span and p, no matter what it does not work. here is the way i first thought it would work: Code: <div id="footer" style="clear:both;width:100%">
<div id="transparentImg" style="width:460px;height:22px;background:url(image.gif) no-repeat"></div>
<div id="colorstripe" style="width:inherit;height:22px;background-color:red;text-align:right">disclaimer</div>
</div>
any idea how to make this happen ? Nevermind, fixed. Changed Pixels into Percentages. Delete thread. I made this administration system in php.. its a site php site with a table with a menu, under it is a iframe.. the code for the iframe = Code: <iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" width="524" height="100%" src="news.php"></iframe> then the news.php seems to fail when i scroll in firefox, since the bg in the iframe changes from #F4F4F4 to #FFFFFF in the new space thats uncovered when i scroll.. the bgcolor and bgimage is defined by css, heres the code: Code:
.bodyiframe {
background-color: #F4F4F4;
background-image: url(../images/bgiframe.gif);
background-repeat: repeat-x;
background-position: top;
background-attachment: fixed;
}
It works fine in explorer 7, but firefox 0.8 cant handle it!.. plz help Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed! 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! 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 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; } |
|||||||