Random Line Generated after rendering in browser

[skater102]

I am creating a website for my church in my spare time. There is a line gray that is being generated when I load the page from the Server. But when I preview the page locally the line is not generated. You can view the page here: http://northgatechurch.org/newsite/index.html

The Html

Code:

• home
• about us
• programs
• kids/youth
• links
• contact

• visitors
• nga
• gwhs
• calendar
• podcast

• Tues- Pray Down
  

  11:00-12:00a

• Tues – Word Up
  

  12:00-1:00p

• Wen – Mid-week Celebration
  

  7:00-8:00p

• Sun – Deep Walk Study
  

  9:00-10:15

• Sun – Weekly Celebration
  

  10:30-12:00a

NorthGate Church.
All rights reserved.

The CSS

Code:

* {
margin:0;
padding: 0;
}
body {
font-family:ariel;
background: #221E1F;
height:100%;
}
.floatleft{
float:left;
}
.floatright{
float:right;
}

.clear {clear:both}

h3{
font-size:small;
font-style:italic;
}

#center {
margin:0 auto;
}

#events{
padding:0 0 0 20px ;
}

#header {
height: 178px; width: 950px;
background: url(images/header.jpg) no-repeat;
}
#page-wrap{
width: 950px;
margin:0 auto;
}
#main-content {
width: 950px;
min-height: 530px;
}
#footer{
background: #333333;
width: 950px;
height:65px;
margin:0px 0 0 0;

}
#left-col{
width: 675px;
margin:1px 0 0 0;
float: left;
background: url(images/leftcol_bg.jpg) repeat-x #201C19;
min-height:530px;
}
#right-col{
padding:43px 0 0 0px;
width:275px;
float: right;
background: url(images/rightcol_bg.jpg) repeat-x #62804E;
border-style:none;
min-height:490px;

}

div#events {
margin:10px 0px 0px 0px;
}

ul#events{

font-family: Helvtica, Gadget, sans-serif;
list-style:circle;
list-style-image:url(images/dot.png);
text-decoration:none;
padding:0px 0 0 0px;
margin:0 0 0px 25px;

}
ul#events li a {
color:#4B0F11;
font-size:medium;
}
ul#events li :hover{
color: #000000;
}
/* menu */
ul#menu {
list-style: none;
padding:128px 0 0 330px;
}
ul#menu li{
display:inline;
}
ul#menu li a{
text-indent: -9999px;
display:block;
height: 51px;
float:left;
}
ul#menu li a.home{
background: url(images/menu_home.jpg) no-repeat bottom center;
width:107px;
}
ul#menu li a.home:hover ,ul#menu li a.home:active{
background-position: top center;
}

ul#menu li a.about{
background: url(images/menu_about.jpg) no-repeat bottom center;
width:95px;
}
ul#menu li a.about:hover ,ul#menu li a.about:active{
background-position: top center;
}
ul#menu li a.programs{
background: url(images/menu_programs.jpg) no-repeat bottom center;
width:95px;
}
ul#menu li a.programs:hover ,ul#menu li a.programs:active{
background-position: top center;
}
ul#menu li a.kids{
background: url(images/menu_kids.jpg) no-repeat bottom center;
width:97px;
}
ul#menu li a.kids:hover ,ul#menu li a.kids:active{
background-position: top center;
}
ul#menu li a.links{
background: url(images/menu_links.jpg) no-repeat bottom center;
width:95px;
}
ul#menu li a.links:hover ,ul#menu li a.links:active{
background-position: top center;
}
ul#menu li a.contact{
background: url(images/menu_contact.jpg) no-repeat bottom center;
width:129px;
}
ul#menu li a.contact:hover ,ul#menu li a.contact:active{
background-position: top center;
}
body#home ul#menu li a.home
body#home ul#menu li a.about
body#home ul#menu li a.programs
body#home ul#menu li a.kids
body#home ul#menu li a.links
body#home ul#menu li a.contact {
background-position: top center;
}

/* nav */
ul#nav {
list-style: none;
padding:5px 0 0 47px;
}
ul#nav li{
display:inline;
}
ul#nav li a{
text-indent: -9999px;
display:block;
height: 176px;
float:left;
}
ul#nav li a.visitors{
background: url(images/nav/nav_visitors.png) no-repeat bottom center;
width:110px;
}
ul#nav li a.visitors:hover ,ul#nav li a.visitors:active{
background-position: top center;
}

ul#nav li a.nga{
background: url(images/nav/nav_nga.png) no-repeat bottom center;
width:110px;
}
ul#nav li a.nga:hover ,ul#nav li a.nga:active{
background-position: top center;
}
ul#nav li a.gwhs{
background: url(images/nav/nav_gwhs.png) no-repeat bottom center;
width:110px;
}
ul#nav li a.gwhs:hover ,ul#nav li a.gwhs:active{
background-position: top center;
}
ul#nav li a.calendar{
background: url(images/nav/nav_calendar.png) no-repeat bottom center;
width:109px;
}
ul#nav li a.calendar:hover ,ul#navli a.calendar:active{
background-position: top center;
}
ul#nav li a.podcast{
background: url(images/nav/nav_podcast.png) no-repeat bottom center;
width:111px;
}
ul#nav li a.podcast:hover ,ul#nav li a.podcast:active{
background-position: top center;
}

[skater102]

"Robskiwarrior" wrote:

Hey dude,

Yea its your bg images… overwrite em for these…

http://www.svgonline.co.uk/northgate/rightcol_bg.jpg

http://www.svgonline.co.uk/northgate/leftcol_bg.jpg

should be fine then :)

Nope, unfortunately that did not fix it. Thanks though.

[spencer.creasey]

Confirmed that the images provide a fix.

Make sure you clear your cache.

[ScottMacD]

The grey line appears in FF3, IE7, IE6, Opera, Safari (windows),

think it might be your images

[skater102]

"Robskiwarrior" wrote:

yea it really is the images dude, I checked them before I posted :) you can input the image location on firebug too if you want to test it :D

Yep. You were right. After switched the images and then deleted my browsers cache and then refreshed the page, no more line. Thanks a lot. :D

[Author]

Posts