Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Background color not blending on some computers

Posted on 2011-03-08
5
Medium Priority
?
312 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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 explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

926 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