PDA

View Full Version : page won't display properly in IE


teamgod13
09 Mar 2006, 02:13 AM
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/v517/teamgod/problemFF.jpg

here is the problem in IE: http://img.photobucket.com/albums/v517/teamgod/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
Wickham
10 Mar 2006, 06:20 AM
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.