Solved

Background color not blending on some computers

Posted on 2011-03-08
5
300 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 500 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

747 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

13 Experts available now in Live!

Get 1:1 Help Now