Results 1 to 2 of 2

Thread: page won't display properly in IE

  1. #1
    Join Date
    Mar 2006
    Posts
    3

    page won't display properly in IE

    hey guys, i'm really new to web design and coding with CSS, so bear with me here.. basically I created a page based on a template online. i'm trying out some different things but basically this is what i have (a few things i'll be changing).

    here is how i want it to look (works fine in Firefox) http://img.photobucket.com/albums/v5.../problemFF.jpg

    here is the problem in IE: http://img.photobucket.com/albums/v5.../problemIE.jpg

    here is my HTML code. keep in mind that i'm a pretty big newbie here..

    <HTML>
    <HEAD>
    <style>
    #wrapper {
    text-align: left;
    margin: 0px;
    padding: 0px;
    border:0px;
    width: 757px;

    }


    #header {
    width: 757px;
    height: 79px;
    background: url("images/template026.new.slices_01.jpg");
    }
    #header2{
    height: 93px;
    width: 757px;
    background: url("images/template026.new.slices_02.jpg");
    }

    #side-a {
    background: url("images/template026.new.slices_03.jpg");
    height:378px;
    width:110px;
    float: left;

    }

    #side-b {
    background: url("images/template026.new.slices_04.jpg");
    margin: 0;
    float: left;
    width: 647px;
    height: 3788px; /* Holly hack for Peekaboo Bug */
    }

    #footer {
    clear: both;
    background: #A2A2A2;
    }
    </style>
    <TITLE>template026.new</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    </HEAD>
    <BODY bgcolor="#FFFFFF" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    <center>

    <!-- ImageReady Slices (template026.new.psd) -->
    <div id="wrapper">
    <div id="header"><img src="images/template026.new.slices_01.jpg" width=757 height=79></img>
    </div>
    <div id="header2"><img src="images/template026.new.slices_02.jpg" width=757 height=93></img>
    </div>
    <div id="container">
    <div id="side-a"><img src="images/template026.new.slices_03.jpg" width=110 height=378></img></div>

    <div id="side-b">
    SIDE-B</div>
    </div>
    <div id="footer">
    <center>Copyright PanelsandPipes.com</center>
    </div>
    </div>
    </center>
    <!-- End ImageReady Slices -->
    </BODY>
    </HTML>


    any idea what could be causing the problem? thanks

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    I notice that you have given the height for each div. Sometimes it isn't necessary to give a height if there are only images in a div, they just expand as necessary.
    It may be that different browsers are giving a bit more or less padding around an image so causing a gap to show.

    Or decrease the heights until the gap disappears in IE6 and you may find that FF is still alright.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •