website is coming up strange in firefox [Archive] - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

Remixninja

04 Dec 2008, 05:16 PM

the site is located at www.pvpproject.com/lodge at the moment, and it seems to come up fine in IE, but in firefox it shows up jumbled, when I double click the top bar to resize the FF window, it fixes itself.

Anyone have any idea why this is happening?

ill paste the code below, I used a picture navbar which is contained in a table, but I removed it before pasting below b/c its rather lengthy and im pretty sure unimportant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css"
href="styles.css" />
<style type="text/css">

</style></head>

<body background="images/backdrop.jpg"onLoad="MM_preloadImages('images/Untitled-1_r1_c2_f2.jpg','images/Untitled-1_r1_c2_f4.jpg','images/Untitled-1_r1_c2_f3.jpg','images/Untitled-1_r2_c4_f2.jpg','images/Untitled-1_r2_c4_f4.jpg','images/Untitled-1_r2_c4_f3.jpg','images/Untitled-1_r2_c14_f2.jpg','images/Untitled-1_r2_c14_f4.jpg','images/Untitled-1_r2_c14_f3.jpg','images/Untitled-1_r3_c6_f2.jpg','images/Untitled-1_r3_c6_f4.jpg','images/Untitled-1_r3_c6_f3.jpg','images/Untitled-1_r3_c8_f2.jpg','images/Untitled-1_r3_c8_f4.jpg','images/Untitled-1_r3_c8_f3.jpg','images/Untitled-1_r3_c10_f2.jpg','images/Untitled-1_r3_c10_f4.jpg','images/Untitled-1_r3_c10_f3.jpg','images/Untitled-1_r3_c12_f2.jpg','images/Untitled-1_r3_c12_f4.jpg','images/Untitled-1_r3_c12_f3.jpg');">
<div class="container">
<img class="logo" src="images/logo.png" /><br />

<div class="sideimages">
<img src="images/image11.jpg" alt="tahuampa lodge amazon" height="135" width="165"/><br />
<img src="images/image14.jpg" alt="tahuampa lodge amazon" height="135" width="165"/><br />
<img src="images/image12.jpg" alt="tahuampa lodge amazon" height="135" width="165"/><br />
<img src="images/image13.jpg" alt="tahuampa lodge amazon" height="135" width="165"/><br />
</div>
<div class="content">
<div align="left">
<p>Iquitos Tahuampa Lodge
<br />
<br />
<span class="style2">Come with us and enjoy an incredible voyage through <br />
Peru’s Amazon Jungle. Take advantage of guided tours <br />
of the city and the Amazon river, one of the most beautiful and peaceful get away locations.</span><br />
<br />
<br />
<br />
</p>
</div>

</div>
</div>
</body>
</html>

here is the CSS

div.container
{
position:relative;
height:800px;
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
text-align:center;
background-image:url(images/Mainfixit.png);
background-position:center;
background-repeat:no-repeat;
}

img.logo
{
position:relative;
top:-40px;
z-index:99;
behavior: url(iepngfix.htc);
left:10px;
}

img.house
{
right:3px;
position:relative;
float:right;
behavior: url(iepngfix.htc);
z-index:1;
}

div.nav
{
position:relative;
behavior: url(iepngfix.htc);
z-index:100;
}

table.nav
{
position:relative;
left:auto;
right:auto;
top:-5px;
z-index:100;
padding:0em;
min-width:auto;
}

div.content
{
position:relative;
float:left;
width:400px;
z-index:100;
padding:1em;
text-align:left;
font-family:Centaur;
font-size:25px;
}

div.sideimages
{
background-color:#BF945A;
position:relative;
top:-5px;
left:3px;
float:left;
width:160px;
}

any input would be appreciated, thanks

Wickham

05 Dec 2008, 03:23 AM

I used the code and stylesheet from your online link which is different from what you posted.

The only difference I can see between IE7 and Firefox is that Firefox shows the footer .botnav over on the right when IE7 shows it central.

You have <div class="content"> above .botnav which is affecting it. Delete the content div and one of the div closing tags:-

............ </p>
</div>



</div>
<div class="botnav">
<div align="center"><a href="index.html">Home</a><a
href="activities.html"> Activites </a><a href="contact.html">Contact
</a><a href="links.html">Links </a><a
href="gallery.html">Gallery</a><a href="packages.html"> Packages
</a><a href="map.html">Map </a><a href="wildlife.html">Wildlife</a>
</div>
</div>

</div>

</body>
</html>