Bruce Gust
asked on
Background colors not matching
I've got a gradient that fades into the background color at the bottom. Head out to http://www.countryshowdown.com and you'll see what I'm working with.
Problem is, with some machines, there's a hard line break towards the bottom. It's not happening on my computer. Both Mac and PC render it fine. Nevertheless, the client has a couple of machines on their site where it doesn't look right.
One suggestion was to use a background image. instead of simply defining the color (background-color: #whatever). In other words, create a 1X1 pixel image that's the color I'm struggling with and just repeat that. Problem is, I'm already using a background image to facilitate the gradient.
I don't know if layering could help in this situation but I wanted to run it by some minds greater than my own. Bottom line: Despite the code being sound (I have my css doc attached), on some machines it doesn't look right. What options do I have to get rid of the hard line break at the bottom of the page?
Problem is, with some machines, there's a hard line break towards the bottom. It's not happening on my computer. Both Mac and PC render it fine. Nevertheless, the client has a couple of machines on their site where it doesn't look right.
One suggestion was to use a background image. instead of simply defining the color (background-color: #whatever). In other words, create a 1X1 pixel image that's the color I'm struggling with and just repeat that. Problem is, I'm already using a background image to facilitate the gradient.
I don't know if layering could help in this situation but I wanted to run it by some minds greater than my own. Bottom line: Despite the code being sound (I have my css doc attached), on some machines it doesn't look right. What options do I have to get rid of the hard line break at the bottom of the page?
body {
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #000000;
text-align: left;
vertical-align: top;
padding: 0px;
height: 100%;
width: 100%;
margin: 0;
background-color: #604e3e;
background-image: url(images/filler.jpg);
background-repeat: repeat-x;
}
table.songwriting {
border: solid white 1px;
}
td {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
}
td.main_body {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-align:center;
}
td.standard {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-align:left;
}
td.black_body {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
text-align:left;
}
td.body {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
line-height:200%;
text-align:left;
}
td.video {
font-family: Arial, Microsoft Sans Serif;
font-size: 10px;
color: #ffffff;
}
td.header {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #ffffff;
background-color: #000000;
text-align:left;
}
td.date_contestant {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
}
td.contestantPage {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px; color: #000000;
background-image: url(images/LogoBackground.jpg);
background-repeat: no-repeat;
vertical-align: center;
}
td.songwriting_countdown {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px; color: #ffffff;
background-image: url(images/songwriting_countdown.jpg);
background-repeat: no-repeat;
vertical-align: center;
text-align:center;
}
td.mainText {
background color:#FFFFFF;
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
}
td.news {
background color:#FFFFFF;
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
}
td.winnerTitle {
background color:#000000;
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
}
td.winnersubtitle {
background color:#CCCCCC;
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
}
td.quote {
font-family: Verdana;
font-size: 12px;
font-style: italic;
color: #ffffff;
}
td.TitleText {
background color:#FFFFFF;
font-family: Verdana, Microsoft Sans Serif;
font-size: 20px;
color: #000000;
}
td.contestant_homepage{
background color:#FFFFFF;
font-family: Impact, Microsoft Sans Serif;
font-size: 24px;
color: #000000;
}
td.RadioTitle {
font-family: Verdana, Microsoft Sans Serif;
font-size: 18px;
color: #ffffff;
}
td.RadioDescription {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-align:right;
border-color:#F42D23;
}
td.radio_description_logo {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
}
td.Footer {
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #ffffff;
}
td.Contestant {
border-color: #ffffff;
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #ffffff;
width: 165px;
}
td.Contestant_Bio {
border-color: #ffffff;
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #ffffff;
}
td.songwriting {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
background-image:url('images/songwriters_plate.jpg');
background-repeat:no-repeat;
}
td.logout {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #ffffff;
background-image:url('images/logout.jpg');
background-repeat:no-repeat;
}
td.contestant_title {
font-family: Verdana, Microsoft Sans Serif;
font-size: 20px;
color: #ffffff;
}
TEXTAREA {
width:700px;
height:250px;
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #000000;
float:left:
}
TEXTAREA.admin {
width:750px;
height:250px;
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #000000;
float:left:
}
TEXTAREA.covers {
width:750px;
height:75px;
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
float:left:
}
TEXTAREA.Contestant {
width:592px;
height:250px;
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
float:left:
}
TEXTAREA.Mail {
width:450px;
height:200px;
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
float:left:
}
TEXTAREA.MyShowdown {
background-color: black;
width:150px;
height:250px;
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #ffffff;
float:left:
}
form {
display: inline;
margin-top: 2px;
margin-bottom: 0;
}
.login_box{
background-image:url('images/text_field.jpg');
border:0px;
width:109px;
height:21px;
font-size: 10px;
color: #b1a18f;
}
#twitter_update_list li a {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration: underline;
}
#twitter_update_list li a:hover {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration: underline;
}
A
{
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
text-decoration:underline;
}
A:Hover {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
text-decoration:underline;
}
A:Visited {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
text-decoration:underline;
}
A.body
{
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:underline;
}
A.body:Hover {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:underline;
}
A.body:Visited {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:underline;
}
A.RadioTitle {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:none;
}
A.RadioTitle:Hover {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:none;
}
A.RadioTitle:Visited {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:none;
}
A.radio_description_logo {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
}
A.radio_description_logo:Hover {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
}
A.radio_description_logo:Visited {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
}
A.Featured {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:underline;
}
A.Featured:Hover {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #cccccc;
text-decoration:underline;
}
A.Featured:Visited {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #ffffff;
text-decoration:underline;
}
A.RadioTitleBlack {
font-family: Verdana, Microsoft Sans Serif;
font-size: 18px;
color: #ffffff;
text-decoration:underline;
}
A.RadioTitleBlack:Hover {
font-family: Verdana, Microsoft Sans Serif;
font-size: 18px;
color: #7BC0FA;
text-decoration:underline;
}
A.RadioTitleBlack:Visited {
font-family: Verdana, Microsoft Sans Serif;
font-size: 18px;
color: #ffffff;
text-decoration:underline;
}
A.Footer {
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #ffffff;
}
A.Footer:hover {
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
text-decoration:underline;
color: #ffffff;
}
A.Footer:visited {
font-family: Verdana, Microsoft Sans Serif;
font-size: 9px;
color: #808080;
}
A.header {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #ffffff;
background-color: #000000;
text-decoration: none;
}
A.header:hover {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #ffffff;
background-color: #000000;
text-decoration: none;
}
A.header:visited {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #ffffff;
background-color: #000000;
text-decoration: none;
}
A.black_body {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
A.black_body:hover {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
A.black_body:visited {
font-family: Arial, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
A.radio_description_logo {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
A.radio_description_logo:hover {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
A.radio_description_logo:visited {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
Can you post the screenshot of the problematic machine ? It might be not the colors but just elements owerlowing. Also - the color depth settings.
ASKER
I'm having to get a screenshot from an office that's out of state. That's what makes this problem so exapsperating is that I can't recreate it, so it's hard to solve it.
In the interim, I'm not familiar with color depth settings. What is that and what do I need to be looking for?
In the interim, I'm not familiar with color depth settings. What is that and what do I need to be looking for?
Well it's hard to diagnose as it is "not visible". I'm not sure what is hard break line is in that case.
ASKER
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Actually, I don't have a background color specified on my css. Reason being is because while I did have the darkest color specified initially, it didn't make and difference.You still saw the line break.
So what I did was I made the body use a repeating 1X1 gif of an image that was colored using 604e3e, which the darkest color of the gradient that you see in the image. Then I used the gradient that you see in the first cell of a table that's 100% wide and 100% high, yet only repeats horizontally.
So, there you have it.
What do you think?
So what I did was I made the body use a repeating 1X1 gif of an image that was colored using 604e3e, which the darkest color of the gradient that you see in the image. Then I used the gradient that you see in the first cell of a table that's 100% wide and 100% high, yet only repeats horizontally.
So, there you have it.
What do you think?
ASKER
Here's what I did:
I made a repeating background graphic that was enormously high and so on the random machines that insisted on misbehaving, the problem was no longer discernible.
Thanks for the input!
I made a repeating background graphic that was enormously high and so on the random machines that insisted on misbehaving, the problem was no longer discernible.
Thanks for the input!