Grow your CSS skills. Land your dream job.

Random Line Generated after rendering in browser

  • # December 4, 2008 at 7:30 pm

    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:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



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

    Rob
    # December 4, 2008 at 8:05 pm

    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 :)

    # December 4, 2008 at 10:18 pm
    "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.

    # December 5, 2008 at 12:06 am

    Confirmed that the images provide a fix.

    Make sure you clear your cache.

    # December 5, 2008 at 10:33 am

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

    think it might be your images

    Rob
    # December 5, 2008 at 12:08 pm

    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

    # December 5, 2008 at 7:04 pm
    "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

    Rob
    # December 5, 2008 at 7:23 pm
    "skater102" wrote:
    "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

    ah cool, glad you’re sorted :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".