Click to See Complete Forum and Search --> : CSS: border color and text color
I am having a problem specifying the a separate border color and text color for a div.
http://www.canadianyouthworker.com/index.php?module=Topics&theme=Karl
On the left you will see the first two colored banners have a black border around them, the second two appear to have a white border around them.
I have set my css for the last two (the ones with with the white text) like this (snippet):
border-color: #000000;
color: #FFFFFF:
You can view my whole style sheet here:
http://www.canadianyouthworker.com/themes/Karl/style/style.css
thanks.
overgroove
09-14-2006, 01:51 PM
Could you please provide the html of the banners, and the css that relates to those two banners. The css that you declared does indeed make text white and borders black. You should also specify a border-width and border-style, if not already specified.
I posted the link to my css sheet
You can view the html by "viewing source" in your web browser
overgroove
09-14-2006, 03:24 PM
Your classes don't have border-color set in them:
.green {
float: left;
height: 29px;
width: 192px;
padding-top: 6px;
padding-left: 15px;
text-align: left;
font-weight: bold;
border-top: 1px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;
border-style: solid;
background-image: url(http://www.canadianyouthworker.com/themes/Karl/images/green-bg.jpg);
background-repeat: no-repeat;
}
.orange {
float: left;
height: 27px;
width: 192px;
padding-top: 6px;
padding-left: 15px;
text-align: left;
font-weight: bold;
border-top: 1px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;
border-style: solid;
background-image: url(http://www.canadianyouthworker.com/themes/Karl/images/orange-bg.jpg);
background-repeat: no-repeat;
}
.blue {
float: left;
height: 26px;
width: 192px;
padding-top: 4px;
padding-left: 15px;
text-align: left;
font-weight: bold;
color: #FFFFFF;
border-top: 1px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;
border-style: solid;
background-image: url(http://www.canadianyouthworker.com/themes/Karl/images/blue-bg.jpg);
background-repeat: no-repeat;
}
.red {
float: left;
height: 25px;
width: 192px;
padding-top: 4px;
padding-left: 15px;
text-align: left;
font-weight: bold;
color: #FFFFFF;
border-top: 1px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;
border-style: solid;
background-image: url(http://www.canadianyouthworker.com/themes/Karl/images/red-bg.jpg);
background-repeat: no-repeat;
}
It doesn't make a difference either way :( I have added them again though as I guess this is the proper way to do it.
.green {
float: left;
height: 29px;
width: 192px;
padding-top: 6px;
padding-left: 15px;
text-align: left;
font-weight: bold;
border-color: #000000;
border-top: 1px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;
border-style: solid;
background-image: url(http://www.canadianyouthworker.com/themes/Karl/images/green-bg.jpg);
background-repeat: no-repeat;
}
.orange {
float: left;
height: 27px;
width: 192px;
padding-top: 6px;
padding-left: 15px;
text-align: left;
font-weight: bold;
border-color: #000000;
border-top: 1px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;
border-style: solid;
background-image: url(http://www.canadianyouthworker.com/themes/Karl/images/orange-bg.jpg);
background-repeat: no-repeat;
}
.blue {
float: left;
height: 26px;
width: 192px;
padding-top: 4px;
padding-left: 15px;
text-align: left;
font-weight: bold;
color: #FFFFFF;
border-color: #000000;
border-top: 1px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;
border-style: solid;
background-image: url(http://www.canadianyouthworker.com/themes/Karl/images/blue-bg.jpg);
background-repeat: no-repeat;
}
.red {
float: left;
height: 25px;
width: 192px;
padding-top: 4px;
padding-left: 15px;
text-align: left;
font-weight: bold;
color: #FFFFFF;
border-color: #000000;
border-top: 1px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;
border-style: solid;
background-image: url(http://www.canadianyouthworker.com/themes/Karl/images/red-bg.jpg);
background-repeat: no-repeat;
}
overgroove
09-14-2006, 04:07 PM
Quote your urls. I don't know if that'll make a difference. But they should be
background-image:url("http://stuff"). The only thing that could be doing something like is a) if there is some invalid syntax in the css, or b)if there some class that overrides it. Try renaming your 'red' div or placing it outside the div it's in. Do any of those make a difference?
ray326
09-14-2006, 04:41 PM
You have 0px borders in .links-bg.
Quote your urls. I don't know if that'll make a difference. But they should be
background-image:url("http://stuff"). The only thing that could be doing something like is a) if there is some invalid syntax in the css, or b)if there some class that overrides it. Try renaming your 'red' div or placing it outside the div it's in. Do any of those make a difference?
a) the CSS validates
b) made no difference
You have 0px borders in .links-bg.
This shouldn't matter, this div is the background for the block that shows
Home
Training
Forum
Article Topics
Web Links
Jobs
Bookstore
Ministry Exchange
Contact Info
About Us
Regardless, I have removed it and it still doesn't work :confused:
Take a look at the site now. It looks much better in firefox (perfect except for the border white border) than in IE. the widths are all messed up
WebJoel
09-14-2006, 06:17 PM
Wow. nice. :)
Just five 'warnings' (four of which are bgcolor="", -needs a value in "foo").
The one that needs to be fixed:
<a href="Ministry Exchange.html">Ministry Exchange</a><br>.
Malformed URI referance. "Ministry Exchange" needs to be either one word (no spaces), or use and underscore between "Ministry" and "Exchange" to make it valid.
Yay Canada.
Oops, spelling mistake. I'll fix that right away.
I still don't know what to do about this HUGE discrepancy between IE and FF
Ok, I got the border colors now as black and the text as white. After much trial and error I found out that I had to set the border color in my style sheet and then put my text inside a small div that just specified the text color.
Still working on the column width differences between IE and FF
I think I figured out these column differences
Take a look at the page in firefox and I'll explain what's happening
http://www.canadianyouthworker.com/index.php?module=Topics&theme=Karl
- The grey boxes (under search and donate) are 192 px wide.
- The green, yellow, red and blue title div's are 192px wide (notice how the line goes past where it should?)
- Each of the divs has a padding-left of 15px, however I removed it on the red one so you can see what it does there - it lines up correctly!!!
So I guess now I have to set all the text inside another div that only includes the padding that I want on the text and remove the padding from the div that contains all those background images.
Well that's for another day. :D
P.S. Internet explorer doesn't have a problem with the padding inside the div, but FF does. Perhaps it's something that needs to be addressed for the next update of FF?