Repeat-X Problem

X

Xian

New Member
Hi, I have a problem with a website I'm designing. There's a thin line under the background gradient (the very back background) from the top of the background, as if it repeats across the Y-Axis a little bit, when it should only be repeating across the X-Axis. Any tips would be very helpful.
HTML Source:
Code: 
<!--At Header-->

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>
			abc123</title>
	<link rel = "stylesheet" type = "text/css" href = "css.css" />
	</head>
	<body>
		<div id = "_maindiv">

			<div id = "_titlediv">
				<table>
					<tr>
						<td>
							&nbsp;
							<img src = "images/logo.png" alt = "" />
						</td>
						<td>
							Test
							<p id = "_quotes" class = "_italic">

								&nbsp;&nbsp;"testing"
							</p>
						</td>
					</tr>
				</table>
			</div>
				<table>
					<tr>
						<td>

						</td>
						<td>
						</td>
					</tr>
				<table>

			<h1>&nbsp;CSS</h1>
<!--Going to Main-->
<!-- at main -->
				Test.

<!-- Going to footer -->
<!--at footer-->
			<br />
		</div>
	</body>
</html>

CSS:
Code: 
body,html
{
	background : #4c99d4 url(images/_bg1.png) repeat-x; 	
	margin:			0px;
	padding-top:		6px;
	padding-left:		9%;
	padding-right:		9%;
	padding-bottom:		6px;
	font-size:		12pt;
	font-family:		Verdana,Arial,Tahoma,Sans-Serif;
	position:		relative;
}

a:link
{
	color: 			#8888dd;
	text-decoration:	none
}
a:hover,active
{
	color: 			#444444;
	text-decoration:	none
}

a:visited
{
	color: 			#7777bb;
	text-decoration:	none
}


._center
{
	text-align:		center
}

._left
{
	text-align:		left
}

._right
{
	text-align:		right
}

._italic
{
	font-style:		italic
}

._bold
{
	font-weight:		bold
}

._under
{
	text-decoration:	underline
}

._over
{
	text-decoration:	overline
}

._thru
{
	text-decoration:	line-through
}

p#_quotes
{
	font-size:		12pt;
}

div#_maindiv
{
	background-color:	#f0f6fb;
	background-image:	url();
	width:			100%;
	min-width:		200px;
	max-width:		100%;
	height:			auto;
	min-height:		100px;
	border-width:		1px;
	border-color:		#246495;
	border-style:		solid;
	color:			#000
}

div#_titlediv
{
	background-color:	#f0f6fb;
	background-image:	url();
	width:			100%;
	min-width:		100px;
	max-width:		100%;
	height:			auto;
	min-height:		55px;
	border-bottom-width:	1px;
	border-color:		#246495;
	border-bottom-style:	dotted;
	font-size:		23pt;
	color:			#102D43;
	text-align:		left
}

Any tips?
 
Last edited:
jnjc

jnjc

New Member
It looks fine on my screen.

That said from the image you've posted the problem appears to be where you background image ends and you background-color begins. Your background image is 1 x 500, the quickest way for you to fix this is to make you image say 1 X 1000 and just fill the extra space at the bottom of the image with the background color. The increase in the image size should be next to nothing and I'm guessing it'll solve the issue...

HTH,
JC
 
You must log in or register to reply here.
Top