|
CSS - Css Color Problem On Black Ground
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"? Similar TutorialsPlease Help me. I have a some small problems on Css. I used background image. when windows are 1024*786 resulation then everything is okey. but when i changes resulation 1280*1024 now I have see this background problem personal.infinitedesigner.com/table.html See this link and please help me. I want to solve this problem. Thanks. Hi all, I seem to be having some problems between FF & IE i have the background image set at 100% in CSS and it works fine in IE but if you look at it in FF there is some of it missing.. Here is the script If you look at it in IE first you will see what it is meant to look like.. Code:
/*
* Main Background
*/
#main-body {
margin: 0px auto;
width: 999px;
height: 100%;
background: url('./images/bricks.jpg') 100% repeat;
}
So what am i missing ? 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) 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;
Hi, 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 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>
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?! I have finished my transparency box backgrounds.. and, thanks to some help here.. have them working in multiple browsers.. Now, I have received a call.. that one person sees "black lines" through the boxes on the transparent boxes on the attractions and info pages.. (user is using IE and 1024x768) -I cannot recreate this problem on any machine.. is there some little strange bug that causes this on certain browsers? http://www.tkwebbiz.com/Gina2 Thanks so much.. *again*.. *Smiles* 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 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;} } 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! Nevermind, fixed. Changed Pixels into Percentages. Delete thread. 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 ? Hi, I am trying to make a link's text black with a blue underline. Is this possible? Here is my code, which produces black text with a black underline: Code: .link{ text-align:left;
color:#000000;
font-size:14.5pt;
font-family:times new roman,serif;
font-weight:normal;
text-decoration:underline color:#09328a; }
I want to make a css "div-popup", and when it pops up the whole page behind the popup should be covered in 50% transparent black. I suppose this has been done before, but I failed to google it, I don't know what to search for Any ideas? |
|||||||