Forums

matt25

On my sitehttp://swyl.110mb.com/, on the home page it shows the notice box fine in all browsers apart from IE, in IE it has a small break between the top of the box and the middle; I have tried playing with the padding loads as well as some other things and I can't get it to go away, can someone help be diagnose this problem? this is my code:

* {margin: 0; padding: 0}
html {overflow-y: scroll;}
body { font:62.5% arial;}
p { font-size: 1.5em; line-height: 1.2em; margin-bottom: 1.2em;}
h1 { padding: 20px 0px 0px 0px}
img {padding:0px 0px 0px 0px}
body
{
background:url('images/header.jpg') repeat-x top;
background-color: #ffffcc
}

div#page-wrap {
margin: 0 auto;
width: 920px;
}

ul#nav {
    height: 200px; width: 900px;
    background: url('/images/banner_ctr.gif') no-repeat;
    margin: 0px 0px 0px 40px; 
    list-style: none;
    }
    ul#nav li {
    display: inline;
    }
        ul#nav li a {
        display: block;
        height: 98px;
        float: left;
        text-indent: -9999px;
        }
            ul#nav li.home a {
            width: 319px;
            background: url(/images/nav_home.jpg) bottom center no-repeat;
            margin: 150px -20px -6px -40px;
            }
            ul#nav li.forum a {
            width: 286px;
            background: url(/images/nav_forum.jpg) bottom center no-repeat;
            margin: 150px 0px 0px 20px;
            }
            ul#nav li.contact a {
            width: 315px;
            background: url(/images/nav_contact.jpg) bottom center no-repeat;
            margin: 150px 0px 0px 0px;
                    }
                ul#nav li a:hover {
                   background-position: center center;
                   }
            body#home ul#nav li a.home,
            body#forum ul#nav li a.forum,
            body#contact ul#nav li a.contact {
			background-position: top center;   
             }
             
#main-content {
padding: 30px 50px 30px;
background:url(images/page_bg.jpg);
background-repeat: repeat-y
}

#notice-content {
padding: 5px 50px 5px 40px;
background:url(images/notice_middle.jpg);
background-repeat: repeat-y
}

#footer {
min-height:57px;
background:url(images/footer_bg.jpg) no-repeat;
margin-bottom:40px
}

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
    <head>
		<title>South west THT Young Leaders|Home</title>
		<link rel=\"stylesheet\" type=\"text/css\" href=\"/layout.css\" />
	</head>
    <body id=\"home\">
        <div id=\"page-wrap\">
        
        <?php include_once ('header.html'); ?>
        
        <div id=\"main-content\">
            <img alt=\"notice header\" src=\"images/notice_top.jpg\"/>
            <div id=\"notice-content\">
            <p>Hello and welcome to the site! This is just the beginings of the site and expect to see many more features coming soon; the main thing that will hopefully be done soon is that the forum will be embeddinto the site.</br> I hope you like thw site and its design, if you have any questiions, suggestions or problems please post in the relavant forum.</br>Enjoy!</p>
            </div>
            <img alt=\"notice footer\" src=\"images/notice_bottom.jpg\"/>
        </div>
        <div id=\"footer\">
        </div>
		</div> <!-- END page-wrap-->
    </body>
</html>

cybershot

maybe your image size is off by one pixel. try adding a background color so that you can see which image is causing the problem. check the dimensions of the images that form the whole thing

Jonz

.topimg {
vertical-align: bottom;
width: 804px;
}

<img class="topimg" alt="notice header" src="images/notice_top.jpg" border="0" width="804px" height="34px" />

treehouse : what would you like to learn today?

Forums

Problems veiwing in IE