Just trying to implement a javascript gallery that automatically resizes a div to fit a series of images. For some reason it doesn't work in Firefox, only in Safari (I haven't tested in IE). any ideas whats going wrong? Many thanks in advance.
Mark Below is the code, Ive made the relevant coding 'bold'. <!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=UTF-8" /> <title>Mark Zawila Photography :: Food photography in Berkshire Gallery 1</title> <!-- Favicon --> <link rel="shortcut icon" type="image/x-icon" href="images/favicon-2.ico" /> <meta name="description" content="Creative food photographer, covering Berkshire, Hampshire, Buckinghamshire, Oxfordshire London and the South East"/> <link href='http://fonts.googleapis.com/css?family=lato:200,400,600,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <link href="css/styles.css" rel="stylesheet" type="text/css" /> <!--google analytic--> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12527327-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <script type="text/javascript"> $(document).ready(function () { width = 0; $.each(jQuery('.photo'), function(i, e) { width += $(e).width() width+=20 //this is allowing for margin of 20 px on each image }); $("#photos div").css("width", width+"px"); $("#width").text(width); }); </script> <div id ="content_wrap"> <div id="fb"> <div class="comment_box2"> <ul> <li><a href="https://www.facebook.com/pages/Mark-Zawila-Photographer/171626116311379">facebook</a></li> <p>/</p> <li> <a href="http://www.linkedin.com/profile/view?id=76072438">linkedin</a></li> </ul> </div><!--end comment box2--> </div><!--end fb--> <div id="logo"> <div id="top_nav"> <ul> <li><a href="http://www.markzawila.com/index.php">home</a><img src="images/dash.png" width="18" height="12" alt="dash"/></li> <li><a href="http://www.markzawila.com/about.php">about</a></li> <img src="images/dash.png" width="18" height="12" alt="dash"/> <li><a href="http://www.markzawila.com/clients.php">clients</a></li> <img src="images/dash.png" width="18" height="12" alt="dash"/> <li><a href="http://www.markzawila.com/my_blog">blog</a></li> <img src="images/dash.png" width="18" height="12" alt="dash"/> <li><a href="http://www.markzawila.com/contact.php">contact</a></li> <img src="images/dash.png" width="18" height="12" alt="dash"/> <li><a href="http://www.markzawila.com/portfolio.php">portfolio</a></li> <img src="images/dash.png" width="18" height="12" alt="dash"/> <li><a href="http://www.markzawila.com/the_studio.php">the studio</a></li> </ul> </div> <div id="contact"> <a href="https://www.facebook.com/pages/Mark-Zawila-Photographer/171626116311379" target="_blank"><img src="images/block1.png" width="26" height="26" border="0" alt="email me"/></a> <a href="http://www.markzawila.com/my_blog"><img src="images/block3.png" width="26" height="26" border="0" alt="Linkedin"/></a> <a href="http://www.linkedin.com/profile/edit?trk=hb_tab_pro_top"><img src="images/block4.png" width="26" height="26" border="0" alt="My blog/"/></a> <a href="https://twitter.com/ZawilaPhoto"><img src="../images/block5.png" width="26" height="26" /></a></div> <!--contact end--> <a href="index.php"> <img src="../images/logo_top3.png" width="329" height="110" border="0" alt="Mark Zawila Photographer"/></a> <h1>Creative Advertising Photography</h1> </div><!--end logo--> <div id="sidebar"> <ul id="css_vertical_menu"> <li class="active"><a href="http://www.markzawila.com/food_gallery1.php">food</a></li> <li><a href="http://www.markzawila.com/drinks_and_liquids_gallery1.php">drinks</a></li> <li><a href="http://www.markzawila.com/products_gallery1.php">products</a></li> <li><a href="http://www.markzawila.com/people_gallery1.php">people</a></li> <li><a href="#">motion</a></li> </ul> </div><!--end sidebar--> <div id="port_nav"> <ul id="css_vertical_menu"> <li class="active"><a href="http://www.markzawila.com/food_gallery1.php">food</a></li> <li><a href="http://www.markzawila.com/drinks_and_liquids_gallery1.php"><img src="images/dash2.png" width="18" height="12" />drinks</a></li> <li><a href="http://www.markzawila.com/products_gallery1.php"><img src="images/dash2.png" width="18" height="12" />products</a></li> <img src="images/dash2.png" width="18" height="12" /> <li><a href="http://www.markzawila.com/people_gallery1.php">people</a></li> <img src="images/dash2.png" width="18" height="12" /> <li><a href="#">motion</a></li> </ul> </div><!--end port_nav--> <div id="gallery"> <div id="width"></div><!-- display width for resting--> <div id="photos"> <div> <img src="images/food_portfolio/chinese.jpg" width="505" class="photo"> <img src="images/food_portfolio/egg.jpg" width="584" class="photo"> <img src="images/food_portfolio/tomatoes.jpg" width="885" class="photo"> </div> </div> <!--gallery end--> <div class="textbox_alpha2"> <h1>Food Photography</h1> <p>Our food photography is used for advertising, packaging, menus and cookbooks. The skill of the photographer is in making the food look mouthwatering and make the viewer feel hungry. This is achieved by the skilful use of lighting and props to present the food in an appealing manner. Work is often collaborative, carried out with the assistance of a stylist, art director and chef. </p> </div> <!--end text box alpha--> <div class="tear_sheet"> <h4>Would you like to discuss a project?</h4> <p>Thank you for taking the time to look at my work, if you would like to know more about what we offer or are interested in hiring me, please feel free drop me a line on 0754 8254 530. </p></div> <!--end tear_sheet--><div id="footer"> <div class="footer_left_col"> <h3>© mark zawila</h3> <h4>photography + post-production</h4> <br /> <p> </p> </div><!--end footer_left_col--> <div class="footer_left_col"> <h3>Contact</h3> <h4>Mark Zawila</h4> <h4>+44 (0) 0754-8254-530</h4> <h4>info@markzawila.com</h4> <p> </p> </div><!--end footer_left_col--> <div class="footer_left_col"> <h3>Studio</h3> <h4>The Bull Pen, Money's Farm, </h4> <h4>Mattingley, Basingstoke</h4> <h4>Hampshire RG27 8LJ</h4> <p> </p> </div><!--end footer_left_col--> <div id="footer_right_col"> <a href="https://www.facebook.com/pages/Mark-Zawila-Photographer/171626116311379"><img src="../images/fb.jpg" width="21" height="22" alt="facebook icon"/></a> <a href="http://www.linkedin.com/profile/view?id=76072438"><img src="../images/in.png" width="21" height="22" alt="linkedin icon"/></a> <a href="http://www.markzawila.com/my_blog/"><img src="../images/blog.png" width="21" height="22" alt="blog icon"/></a> <a href="https://twitter.com/ZawilaPhoto"><img src="../images/twitter.png" width="21" height="22" alt="twitter icon"/></a> </div><!--end footer_right_col--> </div><!--footer end--></div><!--end content_wrap--> </body> </html>