?
Solved

Background color not blending on some computers

Posted on 2011-03-08
5
Medium Priority
?
314 Views
Last Modified: 2012-06-27
Head to http://www.countryshowdown.com/Texaco

On some computers, the background color, rather than blending with the filler image at the bottom of the screen, instead makes a hard line.

It makes no sense in that the filler graphic is a gradient that ends with 604e3e, which is the background color. I'm running on a PC and a Mac and it looks fine. But on a couple of computers at my client's office, it's a hard, irritating looking line and I can't figure out what I can do about it.

Thoughts?
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;
}

Open in new window

0
Comment
Question by:brucegust
  • 2
  • 2
5 Comments
 
LVL 4

Expert Comment

by:dwkd
ID: 35075334
i copied your image in photoshop .. those lines are inside the repeating background. You'd have to re-render the file.. I'd use 100% for repeatable backgrounds since the file size is small anyways.

one other thing.. what use do you have for vertical-align: top; css in your body? just curious
0
 
LVL 6

Expert Comment

by:GregArnott
ID: 35075395
You have 2x </head> tags as well as no<!DOCTYPE> specified.

Try fixing those 2 problems and then test.

There's also a problem with the Montana.jpg and Rachel Hale images.
0
 

Author Comment

by:brucegust
ID: 35076632
OK, Greg! I removed the additional <head> tag, but I'm ignorant as far as the doc type. I went out online to find what it is I need, and I'm lost as far as which one to use. I went out to http://www.w3schools.com/tags/tag_DOCTYPE.asp for some info. Is there one HTML doctype that I need to be using, or how does that work?

dwkd, I have my filler graphic attached. I don't see the lines that you observed. I might be missing something, but could you elaborate on where it is that you're thinking I'm missing the boat? flller for webpage
0
 
LVL 6

Accepted Solution

by:
GregArnott earned 2000 total points
ID: 35080025
This site will explain doctypes:
w3c - doctype

Looking at your code, you'll want the HTML 4.01 Transitional as you have alot of inline styling and other aspects.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Open in new window


Place that on the line before the <html> tag. It helps browsers know what you're throwing at them, such as images etc.

Overall, I feel the double head closing tag may have led to misinterpretation of the image file. It's generally only with MIME types and DOCTYPE errors where I've seen graphics bug out as you've described - and each time it's been on Internet Explorer 6. On all browsers I've tested your site - I have 42 browser screenshots, and no issue with the tiled element.

Perhaps a screenshot from the affected computers, and operating system, browser info, perhaps?
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35124482
for me about 3rd way down the repeatable background would show weird lines
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

600 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