|
CSS - '''innerhtml = "<font Color''' Problem
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!
Similar TutorialsHere'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, Interesting problem... I have a span tag with a small font in it. When I don't specify a doctype, there is no red "padding" for lack of a better word. When I specify a strict xhtml doctype, I do get "red padding". I tried setting the padding to zero, but it didn't help. How can I get rid of the "red padding"? 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" dir="ltr" lang="en"> <table cellspacing="0" cellpadding="0"> <tr> <td style="background: red; padding: 0px;"> <span style="font-size: 50%; background: blue; padding: 0px;"> How can I get rid of the red space? </span> </td> </tr> </table> Thanks! Ok I simply cannot figure this one out. All I'm trying to do is change the font color so that the text like "Choose a Username" is not black but white. Here is the link to the page http://www.technicalhypnotherapy.com/wordpress/?page_id=128 This is my CSS. I think the more relevant tags are the last ones. Code: /*
Theme Name: Pixel
Theme URI: http://85ideas.com/public-releases/wordpress-theme-pixel/
Description: Dark WP theme with 2-3 column layout, dropdown categories menu, multiple widget-ready placement and Feedburner email form integrated, easy to customize. Enjoy!
Author: Sam @ 85ideas.com
Author URI: http://85ideas.com/
Version: 2.0.2
Tags: black, blue, three-columns, two-columns, threaded-comments, fixed-width, theme-options, right-sidebar, sticky-post
.
Released under <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>.
.
*/
/* Defaults */
* {
margin: 0;
padding: 0;
}
:focus {
outline:0;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 10px 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana;
}
hr {
color: #333;
border: 1px solid #121212;
}
pre {
height: auto;
overflow-x:scroll;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
dd {
padding-left: 15px;
}
p {
font-size: 9pt;
}
a {
color: #6598b8;
text-decoration: none;
}
a:hover {
color: #222;
text-decoration: underline;
}
a img {
border: none;
}
blockquote {
background: #070707;
border: 1px solid #060606;
padding: 5px 15px;
margin: 10px 10px 5px 15px;
font-style: italic;
color: #fff;
}
code {
color: #3366cc;
font-style: italic;
}
strong {
font-size: 110%;
}
body {
text-align: center;
margin: 0;
padding: 0 0 15px 0;
font-family: trebuchet ms, arial, helvetica, sans-serif;
background: #000 url(images/bgbody.jpg) top center no-repeat;
color: #eee;
}
/* Header and wrapper */
#wrapper {
margin: 0 auto;
width: 960px;
text-align: left;
padding: 0;
}
#header {
padding: 0;
margin: 0;
height: 80px;
text-shadow: 0 0 4px #555;
}
#header #topright {
text-align: right;
float: right;
width: 930px;
margin: 3px 0 0 0;
}
#header #topright ul {
list-style: none;
padding: 0;
margin: 0;
}
#header #topright li {
display: inline;
}
#header #topright li a {
color: #fff;
font-size: 9pt;
padding: 0 0 0 25px;
text-transform: lowercase;
}
#header #topright li a:hover {
color: #ccc;
text-decoration: none;
}
#header #logo {
margin: 0;
padding: 0;
}
#header h1 {
padding: 0;
margin: 0;
}
#header h1 a {
color: #fff;
font-size: 17pt;
text-decoration: none;
}
#header h1 a:hover {
color: #eee;
text-decoration: none;
}
#header span {
padding: 0;
color: #eee;
font-size: 10pt;
}
/* Menu */
#catnav {
margin: 20px 0 0 0;
padding: 0;
clear: both;
height: 44px;
width: 960px;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
margin: 0;
padding: 0;
}
#nav a {
display: block;
line-height: 44px;
margin: 0;
padding: 0 20px 0 15px;
font-size: 10pt;
color: #fff;
letter-spacing: -1px;
}
#nav li a:hover {
color: #6598b8;
text-decoration: none;
display: block;
}
#nav li ul {
list-style: none;
position: absolute;
width: 150px;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li li {
float: left;
margin: 0;
padding: 0;
width: 150px;
}
#nav li li a {
width: 150px;
height: 24px;
line-height: 24px;
color: #fff;
border-top: 1px solid #131f27;
background: #040404;
margin: 0;
padding: 5px 20px 5px 15px;
}
#nav li li a:hover {
border-top: 1px solid #131f27;
background: #000;
padding: 5px 20px 5px 15px;
}
#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
position: static;
}
#toprss {
float: right;
margin: 10px 15px 0 0;
display: inline;
width: 65px;
line-height: 41px;
}
/* Top Content */
#main {
margin: 5px 15px 0 15px;
clear: both;
width: 930px;
padding-bottom: 5px;
}
#contentwrapper {
float:left;
width: 560px;
margin: 0 0 15px 0;
padding: 0;
}
#contentwrapper2 {
float:left;
width: 900px; margin: 0 0 15px 0;
padding: 0;
}
#contentwrapper .pageTitle, #contentwrapper2 .pageTitle {
margin: 15px 0 10px 0;
font-size: 14pt;
letter-spacing: -1px;
color: #fff;
font-weight: normal;
background: url(images/bg-trans.png) repeat;
padding: 5px;
}
.topPost {
margin: 0;
padding: 0;
font-size: 9pt;
}
.topPost h2.topTitle a {
font-size: 15pt;
font-weight: normal;
color: #fff;
letter-spacing: -2px;
}
.topPost h2.topTitle a:hover {
text-decoration: none;
color: #abd1ea;
}
.topPost p.topMeta {
padding: 0;
margin: -10px 0 0 0;
font-size: 9pt;
color: #cdcdcd;
}
.topPost p.topMeta a {
text-decoration: none;
color: #fff;
}
.topPost p.topMeta a:hover {
color: #ccc;
text-decoration: underline;
}
.topPost div.topContent {
font-size: 9pt;
color: #efefef;
margin: 8px 0;
}
.topPost div.topContent p {
font-size: 1.05em;
line-height: 1.6em;
}
.topPost div.topContent a {
text-decoration: underline;
color: #fff;
}
.topPost div.topContent a:hover {
text-decoration: underline;
color: #ff9933;
}
.topPost div.topContent ul, .topPost div.topContent ol {
padding: 0 0 0 30px;
}
.topPost div.topContent ul li, .topPost div.topContent ol li {
font-size: 1.05em;
color: #eee;
}
.topPost span.topComments, .topPost span.topMore, .topPost span.topTags {
font-size: 9pt;
font-style: italic;
background: url(images/bg-trans.png) repeat;
padding: 8px 10px;
margin-right: 5px;
line-height: 27pt;
color: #fff;
border: 1px solid #111;
}
.topPost span.linkpages {
font-size: 9pt;
font-style: italic;
color: #fff;
margin-bottom: 10px; display:block;
}
.topPost span.linkpages a:hover {
color: #ddd;
}
.topPost span.topComments:hover, .topPost span.topMo hover, .topPost span.topTags:hover {
background: #040404;
}
.topPost span.topComments a {
color: #fff;
background: url(images/comments.gif) left no-repeat;
padding-left: 20px;
line-height: 27pt;
vertical-align: middle;
}
.topPost span.topMore a {
color: #fff;
background: url(images/more.gif) left no-repeat;
padding-left: 20px;
line-height: 27pt;
vertical-align: middle;
}
.topPost span.topTags em {
background: url(images/tags.gif) left no-repeat;
padding-left: 20px;
line-height: 27pt;
vertical-align: middle;
color: #0a0a0a;
}
.topPost span.topTags a {
color: #fff;
line-height: 27pt;
vertical-align: middle;
}
.topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover {
color: #fff;
text-decoration: underline;
}
#nextprevious {
margin: 10px 0 5px 0;
}
#nextprevious a {
color: #eee;
text-transform: lowercase;
border: 1px solid #111;
padding: 5px 8px;
font-size: 10pt;
line-height: 1.4em;
}
#nextprevious a:hover {
color: #fff;
}
/* Comments */
#comments {
margin-bottom: 10px;
margin-top: 15px;
background: #040404;
width: 530px; /* fixes bug in IE7 where putting focus on the text makes it disappear behind the background. yeah, weird. they call it a dimensional bug. */
border: 1px solid #090909;
padding: 0px 15px 10px 15px;
color: #fff;
}
#comments h3 {
font-size: 10pt;
font-weight: normal;
color: #fff;
margin: 15px 0;
padding: 0;
}
#comments p a {
color: #6598b8;
}
#comments p a:hover {
color: #fff;
}
#comments p {
padding:0;
margin: 7px 0;
}
ul.commentlist, ul.trackback {
list-style-type: none;
margin: 10px 0;
font-size: 9pt;
}
.commentlist li, .trackback li {
margin: 10px 0 15px 0;
padding: 10px;
background: #080808;
border: 1px solid #040404;
list-style-type: none;
}
.commentlist li.alt {
background: #000;
border: 1px solid #020202;
border: none;
margin-top:10px;
}
.commentlist li.cleared {
background: transparent;
border: none;
}
.commentlist a:hover {
color: #eee;
}
.commentlist a.gravatar {
float: left;
margin: 0 15px 10px 0;
width: 60px;
}
.commentlist .commentbody {
margin: 0;
padding: 0;
}
.commentlist .commentbody p a {
text-decoration: underline;
}
.commentlist cite {
font-size: 10pt;
font-style: normal;
color: #ddd;
}
.commentlist small.commentmetadata a {
color: #666;
}
.commentlist p {
color: #dedede;
}
#respond {
clear: both;
margin-top: 15px;
}
textarea#comment {
width: 450px;
background: #fff;
color: #111;
padding: 10px;
}
#comments #submit {
margin: 0;
}
#extrastuff a {color:#999; font-size:0.8em;}
#extrastuff a:hover {color:#6598b8; text-decoration:none;}
#extrastuff #rssleft {float:left; width:250px;}
#extrastuff #trackright {float:right; width:180px; text-align:right;}
/* Welcome section */
#main #welcome {
margin: 0 0 20px 0;
padding: 0 0 5px 0;
background: url(images/bg-trans.png) repeat;
}
#main #welcome h2 {
font-size: 14pt;
font-weight: normal;
color: #fff;
letter-spacing: -2px;
margin: 0 10px;
padding: 10px 0 3px 0;
}
#main #welcome p {
font-size: 9pt;
color: #eee;
margin: 0 10px;
padding: 6px 0;
}
#main #welcome a {
text-decoration: underline;
color: #ff9933;
}
#main #welcome a:hover {
color: #6598b8;
}
#main #welcome form {
margin: -5px 0 0 0;
background: transparent; /* required for IE */
}
#main #welcome #feedbox {
border: 1px solid #ccc;
padding: 2px 1px;
width: 180px;
}
.submitbutton {
margin: -5px 0 0 5px;
background: #010101;
color: #fff;
font-size: 8pt;
padding: 3px 6px;
vertical-align: middle;
border: 1px solid #111;
}
.submitbutton:hover {
cursor: pointer;
background: #050505;
}
/* Sidebars */
#sidebars {
margin: 15px 0 0 0;
float: right;
width: 340px;
color: #eee;
}
#sidebars .sidebarbox {
background: url(images/bg-trans.png) repeat;
padding: 8px 15px;
}
#sidebar_full {
padding: 0;
margin: 0;
}
#sidebar_left {
float: left;
width: 160px;
}
#sidebar_right {
float: right;
width: 160px;
}
#sidebars h2 {
margin: 0;
padding: 0 0 8px 0;
font-weight: normal;
font-size: 11pt;
color: #fff;
letter-spacing: -1px;
}
#sidebars table {
width: 130px;
}
#sidebars ul {
margin: 0;
padding: 0 0 5px 0;
}
#sidebars li {
margin-bottom: 20px;
list-style: none;
font-size: 9pt;
}
#sidebars li ul {
padding: 0;
}
#sidebars ul ul li {
margin: 0;
padding: 2px 2px 2px 16px;
color: #eee;
background: url(images/bullet.gif) left 8px no-repeat;
line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
}
#sidebars a {
display: inline;
color: #eee;
}
#sidebars a:hover {
color: #6598b8;
text-decoration: underline;
}
#sidebars p {
padding: 2px 0;
font-size: 9pt;
color: #eee;
}
#tag_cloud a {
display: inline;
}
#sidebars ul.children li {border-bottom:none;}
#sidebars ul.children {margin-bottom:0;}
/* Before footer */
#morefoot {
background: #000 url(images/bggrad.jpg) top left repeat-x;
border: 1px solid #070707;
padding: 15px;
color: #dfdfdf;
margin: 0 0 10px 0;
}
#morefoot p {
margin: 5px 0;
padding: 5px 0;
}
#morefoot ul {
list-style-type: none;
margin-top: 5px;
}
#morefoot ul li, #morefoot p {
font-size: 9pt;
}
#morefoot a {
text-decoration: underline;
color: #ddd;
}
#morefoot a:hover {
text-decoration: underline;
color: #6598b8;
}
#morefoot h3 {
font-size: 12pt;
font-weight: normal;
color: #dfdfdf;
letter-spacing: -1px;
border-bottom: 1px dotted #444;
margin: 0;
padding: 0 0 2px 0;
}
#morefoot #searchbox {
padding: 1px;
width: 180px;
}
#morefoot .col1 {
float: left;
width: 340px;
}
#morefoot .col2 {
margin: 0 25px;
}
#morefoot .col2, #morefoot .col3 {
float: left;
width: 260px;
}
#morefoot li {
padding-left: 20px;
margin-bottom: 5px;
background: url(images/more.gif) left 2px no-repeat;
line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
}
/* footer*/
#footer {
clear: both;
background: #000;
border: 1px solid #070707;
padding: 15px 15px 10px 15px;
}
#footer p {
font-size: 9pt;
color: #bbb;
padding: 0;
}
#footer a {
color: #bbb;
text-decoration:none;
}
#footer a:hover {
color: #fff;
}
#footerleft {
float: left;
width: 500px;
}
#footerright {
float: right;
width: 300px;
text-align: right;
}
/* Misc */
.highlight {
color: #222;
font-weight: bold;
}
.cleared {
margin: 0;
padding: 0;
clear: both;
}
.alignleft {
float: left;
margin: 10px 15px 5px 0;
}
.alignright {
float: right;
margin: 10px 0 5px 15px;
}
.aligncenter,
div.aligncenter {
margin: 10px auto;
text-align: center;
display: block;
}
img.alignleft {
float: left;
margin: 10px 15px 5px 0;
}
img.alignright {
float: right;
margin: 10px 0 5px 15px;
}
img.aligncenter {
margin: 10px auto;
text-align: center;
display: block;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
color: #111;
}
#reg-form .formleft { background: none !important;
color: #fff;}
#account-form { background: none !important;
color: #fff;}
Hi, I am relatively new to css but experimenting all the time but I am trying to add white text to a black background in the footer but can't seem to get my head round it. Any advice welcome. Thanks John Hi.... I am just finishing off an assignment for uni and i need to make it look good now... I am using an external css. And need some cool background color and different fonts also some images... Thanx guy! I have a group of buttons which when one is clicked its color changes and the others if any have been clicked revert back to the default color. Am I right in thinking the defualt html font color is black? Hi! i want to create textblock titles which consist of more than one color.... like this: hello per son ! so i want a certain part of the users name to be green and a certain part red.... first 30 % of the name and last 70% something like that... or is this only doable by breaking up the username and apply 2 classes to it? would be nice if doable in CSS, saves a lot of work.... thanks!!! How do i set a font outline color as red and the fill with white using css. Does anyone know? Code: <style type="text/css">
blue{color:blue}
red{ color:red;
font-weight:bold}
green{color:green}
</style>
</head>
<body>
<table border="1">
<caption>Baseball Uniforms</caption>
<tr>
<td><img src="yankees.jpg" alt="Yankees Uniform" /></td>
<td> <blue>New York Yankees Two button Placket Team Uniform</blue><br />
<red>Free Shipping!</red><br />
<green>Our Price: $20.99</green></td>
</tr>
You get the idea.... I'm trying to get each individual line in a <td> to be a separate color from the other. But, it won't validate this way. HELP!!!!! I'm not sure if this belongs in the javascript or Css forum. because it uses both. But my problem is that on mouseover my background color changes to what I want, but the font-color is not changing. Here is a snippet of my code: Code: <tr class="clickableTROpt1" onmouseover="this.className='cellover'" onmouseout="this.className='clickableTROpt1'" onClick='location.href="searchResults.php?id=2"'> <td><a href="#">Some data cells</a></td> </tr> my css file looks like this: Code:
.clickableTROpt1{
font-weight: bold;
cursor: pointer;
background-color: #FFFFFF;
}
.cellover{
color: #FFFFFF;
background-color: #CCCCCC;
font-weight: bold;
}
it looks like my css needs to be told to apply the changes to <a> tags as well? I want to change the "flashing cursor" color in an input field in my css. This field has a dark background, the text over it is white but when you click in it, the flashing cursor is darkgray an almost invisible. Look in my login and password box, you will understand: http://www.jeudebourse.com. I'm mostly speaking in French and I don't know what is called this cursor. I don't mean the mouse pointer but the cursor that is flashing in the field to indicate your position in this field. Thanks. Hey Guys I am new to CCS. I started a blog about 2 weeks ago and I am using a domain/host with WordPress installed. I have a premium theme. I am very happy with the theme but I do not like the color/type/size of the contents font. I went into theme editor > stylesheet and began looking for something that would tell me where the code for the content would be. I changed the first few colors, refreshed the page and nothing changed. I did this about 20 times.... and I still can't find the code for the font! Please Help! Original Style Sheet Code: Code: body { background:#083550 url(images/bg_main.jpg) repeat-x top; font:12px Arial, Helvetica, sans-serif; padding:0; margin:0; color:#101010;}
html { padding:0; margin:0;}
a { text-decoration:none; color:#292929; border:0;}
a:hover { text-decoration:underline; color:#292929; border:0;}
a:focus { outline:none;}
.clr { clear:both;}
h1, h2, h3, h4 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
img { padding:0; margin:0; border:none; text-align:center;}
hr1 { border-left:0 solid #000000; border-right:0 solid #000000; border-top:0 dotted #000000; border-bottom:1px solid #000000; height :1px;}
hr { border-left:0 solid #7f262e; border-right:0 solid #7f262e; border-top:0 dotted #7f262e; border-bottom:1px solid #7f262e; height :1px;}
form { padding:0; margin:0;}
input { font-family:'Verdana'; color:#282b31; font-size:11px;}
textarea { font-family:'Verdana'; color:#282b31; font-size:11px;}
select { font-family:'Verdana'; color:#282b31; font-size:11px;}
/* Header +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#bgcontainer { margin:0; padding:0; background:url(images/bg_top.jpg) no-repeat top;}
.bgRasize { width:1024px; margin:0 auto; padding:0;}
/**/ * html .Header { height:197px;} /* */
.Header { width:1024px; margin:0; padding:0; height:197px;}
/* Menu ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.Menu { padding:0; margin:0; height:50px; width:1024px; float: left;}
.Menu ul { list-style:none; margin:0; padding:0; height:50px;}
.Menu ul li { padding:17px 0 0 0; margin:0; float:left; line-height:14px;}
.Menu ul li a { padding:5px 15px 5px 20px; margin:0; outline:0; background:none; font:normal 12px Georgia, "Times New Roman", Times, serif; color:#50bed2; text-transform:uppercase;}
.Menu ul li a:hover { font:normal 12px Georgia, "Times New Roman", Times, serif; color:#d9d9d9; text-decoration: underline;}
.Logo { width:1024px; height:147px; margin:0; padding:0;}
.LogoText h1 {letter-spacing:-2px; padding:15px 0 5px 0; margin:0; font:normal 36px Georgia, "Times New Roman", Times, serif; color:#fff; text-align:center; text-transform:uppercase;}
.LogoText a { color:#ffffff; text-decoration:none;}
.LogoText a:visited { color:#ffffff; text-decoration:none;}
.LogoText a:hover { color:#ffffff; text-decoration:none;}
.Desc { color:#92dffd; line-height:12px; font:normal 14px Georgia, "Times New Roman", Times, serif; padding:0; margin:0; text-align:center; text-transform:uppercase;}
/* Syndicat ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.Syn { width:325px; height:51px; padding:0; margin:0 0 0 10px; background: url(images/rss.gif) 0px 5px no-repeat; float:left; border-right:1px solid #fff;}
.Syn ul { margin:0; padding:5px 0 0 50px;}
.Syn li { margin:0; padding:0; list-style-type:none; color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif;}
.Syn li.text { color:#fffefe; font:normal 10px Arial, Helvetica, sans-serif;}
.Syn li a { color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif; text-decoration:underline;}
.Syn li a:visited { color:#1e8baa;}
.Syn li a:hover { color:#1e8baa;}
/* Syndicat ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.twit { width:300px; height:51px; padding:0; margin:0 0 0 10px; background: url(images/twitter.gif) 0px 5px no-repeat; float:left; border-right:1px solid #fff;}
.twit ul { margin:0; padding:5px 0 0 50px;}
.twit li { margin:0; padding:0; list-style-type:none; color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif;}
.twit li.text { color:#fffefe; font:normal 10px Arial, Helvetica, sans-serif;}
.twit li a { color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif; text-decoration:underline;}
.twit li a:visited { color:#1e8baa;}
.twit li a:hover { color:#1e8baa;}
/* Search ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/**/ * html .Search {} /**/
.Search { width:300px; padding:0; margin:0 0 0 10px; float:left; height:51px; border-right:1px solid #fff;}
.Search form { padding:10px 5px 0 5px;}
.Search h2 { padding:5px 20px; color:#979797; font:bold 18px Tahoma, Arial; margin:0; background:url(images/bg_searth_h2.gif) left no-repeat;}
.Search input { color:#ffffff;}
.Search input.keyword {border:1px solid #b4b4b4; width:190px; color:#b4b4b4; padding:6px 10px; height:15px; float:left;}
.Search input.search { border:none; background: url(images/search.gif) top no-repeat; height:30px; width:30px; padding:0; margin:0 5px; float:left;}
/* Container +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.CON { width:1024px; padding:0; margin:0; background:#fff;}
/* Side Central +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SC { width:570px; padding:20px; margin:0; float:left; font:normal 11px Georgia, "Times New Roman", Times, serif; color:#888888;}
.SC p { padding:5px; margin:5px 0;}
/* Post +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.pagetitle { color:#848484; font:normal 26px Georgia, "Times New Roman", Times, serif;}
.Post {padding:10px; margin:0 0 10px 0; border:1px solid #ededed; background:#f6f6f6;}
.PostHead { padding:0; margin:0;}
.PostHead h2 {color:#2e2e2e; font:bold 20px Arial, Helvetica, sans-serif; margin:0; padding:10px 0;}
.PostHead h2 a { color:#2e2e2e; text-decoration: none;}
.PostHead h2 a:visited { color:#2e2e2e; text-decoration:none;}
.PostHead h2 a:hover { color:#2e2e2e; text-decoration: none;}
/**/ * html .PostTime {} /**/
.PostTime { padding:5px 0 5px 10px; font:normal 11px Georgia, "Times New Roman", Times, serif; color:#fff; margin:0; background:url(images/bg_post_time.gif) top repeat-x;}
.PostTime strong { font:normal 11px Georgia, "Times New Roman", Times, serif; color:#fff;}
.PostTime .day { font-size:11px;}
.PostTime .month { font-size:11px;}
.PostTime .year { font-size:11px;}
.PostTime a { font:bold 11px Georgia, "Times New Roman", Times, serif; color:#fff; text-decoration:underline;}
.PostContent a { color:#989898; text-decoration:underline;}
.PostContent a:hover { color:#989898; text-decoration:none;}
.PostContent img { margin:0; padding:0;}
.PostContent ol { padding:10px 0 10px 25px; margin:0;}
.PostContent ol li { padding:2px 0 2px 0; font-size:12px; line-height:15px; color:#989898;}
.PostContent ul { padding:5px 0; margin:0; float:left; width:45%;}
.PostContent ul li { padding:2px 0 2px 15px; list-style-type:none; font-size:11px; line-height:15px; color:#989898;}
.PostContent blockquote { padding:10px; margin:0; color:#989898; background:#000;}
.PostContent blockquote p { font-size:12px; padding:0; margin:0; line-height:15px;}
.PostContent blockquote li { padding:2px 0 2px 15px; list-style-type:none; font-size:12px; line-height:15px;}
.PostContent blockquote a { color:#989898;}
.PostContent blockquote a:visited { color:#989898;}
.PostContent blockquote a:hover { color:#989898; text-decoration:underline;}
.PostContent strong { color:#373737; font:normal 12px Arial, Helvetica, sans-serif; text-transform:uppercase;}
/**/ * html .PostContent p img {} /* */
.PostContent p img { max-width:350px;}
.PostContent img { margin:0 10px 10px 0; float:left; background:#0d0e09; padding:3px; border:1px solid #a3a3a3;}
.PostCom { padding:10px; font:normal 11px Arial, Helvetica, sans-serif; color:#797979; margin:0; background:url(images/bg_com.gif) left no-repeat;}
.PostCom ul { padding:0 10px; margin:0;}
.PostCom li { padding:5px 0; margin:0; list-style-type: none; color:#797979; font: normal 11px Arial, Helvetica, sans-serif; display: inline;}
.PostCom li a { font-weight:normal; text-decoration:none; color:#797979;}
.PostCom li a:hover { font-weight:normal; text-decoration: underline; color:#797979;}
.PostCom .Com {}
.PostCom .Tags { padding-left:10px;}
/* Note ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.Note { padding:0; margin:0;}
.Note li { padding:3px 0 3px 15px; margin:0; list-style-type:none; font-size:12px;}
/* TrackbackList ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.TrackList { background:#848484; padding:15px; margin-top:20px; position:relative;}
.TrackListTop { background:#848484; position:absolute; top:0; left:0; width:455px; height:10px;}
.TrackList h3 { font-size:14px; font-weight:bold; margin:0 0 5px 0; padding:0 0 5px 0; color:#333366; letter-spacing:-1px; border-bottom:dashed 1px #beb4c1;}
.TrackList ul { padding:0; margin:0;}
.TrackList li { padding:0 0 0 10px; margin:0; list-style-type:none; font-size:11px;}
.TrackList li a { color:#cc3366;}
/* Navigation - PlugIn +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Nav { font-size:11px; padding:10px 0; color:#848484; font-family:'Verdana';}
.Nav a { padding:1px 6px 1px 4px; border-right:solid 1px #666; font-size:11px;}
.Nav a:visited { padding:1px 6px 1px 4px; border-right:solid 1px #666;}
.Nav a:hover { padding:1px 6px 1px 4px; border-right:solid 1px #666; text-decoration:none;}
.Nav span { padding:1px 6px 1px 4px; color:#666; border-right:solid 1px #666;}
.Nav .on { padding:1px 6px 1px 4px; border-right:solid 1px #666; font-size:11px; color:#003366;}
/* Comments ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Comments { margin:20px 0 0 0; position:relative;}
.Comments h3 { font-size:16px; letter-spacing:-1px; margin:0 0 5px 0; padding:10px 0; color:#848484; border-bottom:solid 2px #660000;}
/* Comments List ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.List ol { padding:0; margin:0;}
.List li { position:relative; padding:5px 0; margin:10px 0; list-style-type:none;}
/**/ * html .List .LGrav { right:30px;} /* */
.List .LGrav { position:absolute; right:0; top:10px;}
.List .LGrav img { border:solid 1px #ccc; padding:2px; background:#fff;}
.List .LUsr { margin:0; padding:0; font-size:11px; line-height:12px; color:#999;}
.List .LUsr a { color:#999; text-decoration:none;}
.List .LUsr strong { font:bold 16px "Trebuchet MS", sans-serif; letter-spacing:-1px; color:#666;}
.List .LUsr strong a { color:#cc0000; text-decoration:none;}
.List .LCon { margin:10px 0 0 0 ; padding:0; font-size:12px; line-height:16px; border-top:solid 1px #ccc;}
.List .LCon p { margin:0; padding:5px 0 ; font-size:12px; line-height:16px;}
.List .Author { background:#fff;}
/* Comments Form ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Form .Email {}
.Form { padding:0 0 10px 0 ; position:relative; margin:0; font-family:'Verdana';}
.Form form { margin:0; padding:0;}
.Form a { text-decoration:underline;}
.Form p { padding:0 0 2px 0 ; margin:0; color:#666;}
.Form p small strong { font-weight:bold; color:#FF3300;}
.Form p small { font-size:11px; display:block; padding:6px 0 ; color:#000;}
.Form .TextField { color:#003366; background:#e9f8ff; border:solid 1px #d5e7f0; padding:6px 6px 6px 30px; font-size:12px; display:block;}
.Form .TextArea { color:#003366; background:#e9f8ff; border:solid 1px #d5e7f0; padding:6px; font-size:12px;}
/* Side Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SR { width:394px; padding:20px 20px 20px 0; margin:0; float:right;}
/* Banners ADs ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.banner {padding:10px; margin:0; border:1px solid #ededed; background:#f6f6f6;}
.banner h2 { text-transform:uppercase; text-decoration:underline; border-bottom: 1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 20px;}
.banner ul { margin:0; padding:0 0 0 10px; list-style:none;}
.banner li { margin:0; padding:5px 10px; float:left;}
.banner li img { }
/* Side Right Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SRR {padding:0; margin:10px 0;}
.SRR div.categories, .SRR div.archives, .SRR div.meta { width:50%; float:left; margin:0; padding:0;}
.SRR h2 { text-transform:uppercase; text-decoration:underline; border-bottom: 1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 20px;}
.SRR ul { padding:5px 15px; margin:0; list-style:none;}
.SRR li {padding: 5px 0 5px 20px; font:normal 12px Georgia, "Times New Roman", Times, serif; color: #b4b4b4; border-bottom:1px solid #ededed; background:url(images/categories_li.gif) left no-repeat;}
.SRR a { font:normal 12px Georgia, "Times New Roman", Times, serif; color: #b4b4b4; text-transform:uppercase;}
.SRR a:hover { text-decoration:underline; color:#10547e;}
/* Flickrrss ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.widget { padding:10px; margin:10px 0; border:1px solid #ededed; background:#f6f6f6;}
.widget h2 { text-transform:uppercase; text-decoration:underline; border-bottom:1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 10px;}
.widget ul { padding:10px; margin:0;}
.widget li { margin:0; padding:5px 10px 4px 20px; list-style-type:none; border-bottom:1px solid #ededed; color:#999999; background:url(images/categories_li.gif) left no-repeat;}
.widget li a { margin:0; padding:0; border:0; background:none; color:#10547e; text-decoration:underline;}
.widget li a:hover { text-decoration:none;}
/* Flickrrss ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.widget_flickr { border:0; background:none;}
.widget_flickr h2 { }
.widget_flickr ul { margin:0; padding:0 0 10px 5px; text-align:center;}
.widget_flickr li { margin:0; padding:0 5px 0 0; list-style-type:none; display:inline; background:none;}
.widget_flickr li a img { background:#000; padding:0; margin:0 5px 5px 0; width:65px;}
.widget_flickr li a:hover img { padding:0;}
/* Footer ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.FBG { margin:0; padding:0; }
.Footer { padding:10px 0; margin:0; text-align:center; background:none;}
.Footer p { color:#56b1d5; padding:0; margin:0; font:normal 11px Arial, Helvetica, sans-serif;}
.Footer a { color:#56b1d5; text-decoration:underline;}
New to this but with due diligence, will learn this......I have built asp update form to allow users to enter new data into the database. They are wanting to change new text entries into blue rather than using the default color (black). This highlights those new entries for those reviewing the data. I have googled for methods ranging from radio buttons to check boxes to define a new font color with no luck so far....any help is greatly appreciated............best case I think, would be a font tool bar added to the form, but have not found that method thanks Hi All, I'm new to the forum. My website's Index page is losing all my body font and color settings, though layout is correct. All of the subfolders' index pages and other pages throughout my website remain unaffected. I've sanity checked it all, and it validates OK. I have an email in to the webhost for some input, but I hoped to get some advice from other CSS-ers who might be in the know. My website is: NickiGreenwood.com I am a romance author and sideline-web-design-junkie. Any help, advice, or even a point in the right direction would be a huge, huge help. Thanks, all. Nicki Greenwood - Romance Author I am baffled on this one, please visit http://osake.garychus.com/menu.asp and look the main menu. I have this in the head code - a#nav_menu{ color:#f00 !important; } but for the life of me it is not working... I'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks Hi, I'm still new to CSS and have been learning for the past couple of days now. I'm having trouble getting a two-column layout working correctly. Using the faux method, I have a background set so the right-column has a different background color. This works fine. But I'm having trouble placing the elements inside of the container to work correctly. When the left-column has more content than the right, instead of the container (and thus the background) moving to fit it, the column just extends down by itself. However if the right column has more content than the left, it works correctly. I think it might be because of the float: left, but I'm still new and not exactly sure what the problem is. The URL to view this is http://serve5.net/extend/ - the CSS is right in the source for you to look at. Could someone point me in the right direction as far as getting the left-column to extend down correctly? It seems to work fine in Internet Explorer - but I use Mozilla Firefox and it's having this issue. However, in Mozilla, the left-column's background extends to the border fine, but in IE, it overlaps it. What can I do to fix this also? Thanks. Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right. I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance! Code: .clearfix-tabs{
clear: both;
}
.gk_tab_item_space{
padding: 10px;
}
div.gk_tab-style3 {
position: relative;
}
div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}
div.gk_tabmenu-style3 {
overflow:hidden;
}
ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}
ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}
ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}
ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}
div.gk_tab_container0-style3 {
clear: both;
}
div.gk_tab_container1-style3 {
overflow: hidden;
}
div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}
div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}
div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}
div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}
div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}
.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;
}
I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it? I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped Deb Hi there, I'm back again I'm afriad with another minor problem with my new site design. Have a look at the test version of my website he http://www.eveythingfree.buildtolearn.net/classifieds/ If you are looking at it in Internet Explorer it should look fine, but if you try it in Mozilla Firefox or Netscape it looks badly messed up. The problem is with the 2 boxes near the top of the page, the "latest forum posts" one and the "search box". The whole page (from bellow the navbar) is laid out by the php script that generates most of the content of the site. Thus I am limited in what I can adjust but I can use .css to layout these two boxes. Here is the css that controls the forum and search boxes: Code:
.forums {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
border: 1px solid #666666;
padding: 5px 10px 10px;
background-color: #F9F9F9;
position: relative;
width: 453px;
height: 100px;
left: 10px;
top: 10px;
vertical-align: top;
margin-bottom: 10px;
float: left;
}
.searchbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
border: 1px solid #666666;
background-color: #F9F9F9;
width: 230px;
height: 100px;
left: 20px;
vertical-align: top;
margin-bottom: 10px;
padding-top: 15px;
top: 10px;
position: relative;
}
.listings {
position: relative;
top: 10px;
}
Now I'm pretty sure that the problem lies with the "float" property in .forums. I seem to recall Mozilla and Netscape don't recognise this in the same way IE does. Is there a way of making the site look the same in other browsers as it does in IE? Without the "float" property I have failed to get it to look right, but there must be some way around this problem. I'd really appreciate any help, as this one thing has been holding me back for ages! Thanks, Robert |
|||||||