Solved

Background colors not matching

Posted on 2011-03-16
8
242 Views
Last Modified: 2012-06-21
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?
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;
}

Open in new window

0
Comment
Question by:brucegust
  • 5
  • 3
8 Comments
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
Comment Utility
Can you post the screenshot of the problematic machine ? It might be not the colors but just elements owerlowing. Also - the color depth settings.
0
 

Author Comment

by:brucegust
Comment Utility
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?
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
Comment Utility
Well it's hard to diagnose as it is "not visible". I'm not sure what is hard break line is in that case.
0
 

Author Comment

by:brucegust
Comment Utility
Here's the screen shot.

And again the URL is http://www.countryshowdown.com/Texaco
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:brucegust
Comment Utility
Trying again.

I'm not sure what the operating system is that's having trouble, but I can validate XP and Mac OSX on IE as well as Safari.

The box that's having issues is running Safari and Firefox. picture of line break
0
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 500 total points
Comment Utility
OK, it seems that the body has the background color of the top of the gradient. Try setting css for the body exactly as the bottom of the gradient (the darkest color).
0
 

Author Comment

by:brucegust
Comment Utility
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?
0
 

Author Comment

by:brucegust
Comment Utility
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!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 46
jQuery Time Off Event 20 42
Menu Inconsistent 3 19
Open a div with click on an image 7 39
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now