Problem with divs my images are overlapping on Firefox but look great in IE?

[jennj28]

Problem with divs my images are overlapping on Firefox but look great in IE?
I am using IE 8 and on there the images appear fine but on firefox and chrome etc. they are overlapping Can someone please help me with this???



Here is the webpage...
http://www.peppergoodrich.com/books.html



Here is the CSS sheet...


body {
background: #F9EDDB url('body.jpg') top left;
font-size: 11px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
color:#7B3307;
padding:0px;
margin:0px;
}
a {color: #DB7093;}
a:visited {color:#c43300;}
a:hover {color: #c43300;}
a:active { color:#000000;}

h1 {
font-size: 11px;
text-transform:uppercase;

/*border-top:1px solid #564b47;
border-bottom:1px solid #564b47;*/
/*padding:5px 15px;*/
margin:0px }

h2 {
color: #9A1212;
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container to center the layout-------------- */
#container {
width: 760px;

margin-left: auto;
margin-right: auto;
height:100%;
background: #F9EDDB url('menubottom.jpg') no-repeat bottom left;
border:2px solid #987D27;
}

/* ----------banner for logo-------------- */
#banner {
height:174px;
text-align: center;
background: url('header.jpg') no-repeat bottom center;
background-color: #e1ddd9;

padding: 0px;
margin: 0px;
}
#banner img {padding:10px 0px;}
#bannertitle{padding-top:50px;font-siz…

/* -----------------content----------------… */
#content {

background:#ffffff url('content.jpg') no-repeat top right;
border-left:1px solid #987D27;
padding: 0px;
margin-left: 150px;
margin-right: 0px;

}
div#content {
height:100%;
/*height:expression(this.scrollHeight > 600 ? "auto":"600px"); */
}

p, pre{
padding: 5px 10px;
margin:0px;
}

/* --------------left navi------------- */
#left {
float: left;

width: 150px;
margin: 0px;
padding: 0px;
background:#F9EDDB;
height:90%;
}

/* -----------footer-----------------------… */
#footer {
clear: both;
margin: 0px;
padding:0px;

height:45px;
text-align: right;
background: url('footer.gif') repeat-x ;
}
#footer h1 a{
color:#FFFFFF;
}
#footer h1{
padding:5px 5px 0px 0px;
}
/**********vertical menu***************/
.verticalmenu ul{
list-style:none;
/*list-style-image: url("bullet.gif")*/


padding: 10px;
margin: 0px;
}

.verticalmenu li, a:link, .verticalmenu a:visited, .verticalmenu a:hover {
display: block;
font: bold 1.2em Times New Roman, Verdana, Arial, Helvetica, sans-serif;
color: #9A1212;
text-decoration: none;
text-align: left;

width: 140px;
height: 32px;
/*background: url('menuhover.gif') no-repeat;*/
}

.verticalmenu a:hover{
background: url('menuhover.gif') no-repeat;
color: #987D27;
}


/* -----------box--------------------------… */


}

#boxcontent {

width: 700px;
height:100%;
(makes the image stretch to the text height)
}

#boxbottom {
width: 100px;
height: 300px;
}

I'm trying to fix this for someone but I don't understand why it's fine in IE but messed up in Firefox. HELP please!

[Beverleyh]

Take down the login authentication first and then someone may be able to help.

[jennj28]

Hi Beverleyh,

I don't mean to sound stupid but I'm sure I'm going to here but what login authentication are you refering too?

Thanks for your help by the way I really appreciate it.

JennJ

[Beverleyh]

When I clicked on the link this morning I kept getting an .htpasswd login prompt. It seem to be gone now though.

In your vertical menu CSS there seems to be an extra comma;
.verticalmenu li, a:link, .verticalmenu a:visited, .verticalmenu a:hover {
should be;
.verticalmenu li a:link, .verticalmenu a:visited, .verticalmenu a:hover {
(the display:block part is throwing off the alignment in the boxcontent div - take the comma out and it fixes things)

Next, change the boxcontent div code to this;

<div id="boxcontent">
<p style="text-align:center;">
	<a href="http://www.peppergoodrich.com/melt.html">
		<img src="images/barbarycoast.jpg" style="height:309px; width:283px; border:0;">
	</a>
</p>
<p style="text-align:center;">
	<a href="http://www.peppergoodrich.com/barbary.html">
		<img src="images/meltdown2.jpg" style="height:304px; width:279px; border:0;">
	</a>
</p>
<p style="text-align:center;">
	<a href="http://www.peppergoodrich.com/merry.html">
		<img src="images/xmas.gif" style="height:301px; width:277px; border:0;">
	</a>
</p>
</div>

Images should no longer overlap and still be aligned centrally.

One thing, I guess you added the extra white space on the right hand side of the book images to fix the alignment? You wont need it anymore so either crop that off the 3 images and change the width value accordingly or add a left-margin to push the images back towards the right of the screen. About 25px should do it - eg;
<img src="images/xmas.gif" style="height:301px; width:277px; border:0; margin-left:25px;">

[jennj28]

Hi Beverleyh,

God bless you and thank you so so much for your help! That fixed it! YAY!!!!!!!!! I can't tell you how much I appreciate it. Have a great rest of the week!

Big Hugs,
JennJ

[Beverleyh]

My pleasure