I am relatively new to programing and are creating a site with a photo collection that uses mootools and slimbox for the lightbox effect. I am having a problem with the container and images floating in FireFox, Opera, and IE. The site displays correctly in Safari and Chrome. I know there are a lot of divs but that was the only way I could get the layout I wanted.
I've struggled with this for days and have done numerous searches trying to solve the problem. Any help would be appreciated. Thanks
Here is the html.
Here is the CSS for the styling on this page.
I've struggled with this for days and have done numerous searches trying to solve the problem. Any help would be appreciated. Thanks
Here is the html.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="./js/mootools.js"></script>
<script type="text/javascript" src="./js/slimbox.js"></script>
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link href="css/bodystyles.css" type="text/css" rel="stylesheet">
<link href="css/slimbox.css" type="text/css" rel="stylesheet" media="screen">
<link href="css/sb_styles.css" type="text.css" rel="stylesheet">
<title>Website</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="index.php?page=HOME">HOME</a></li>
<li><a href="index.php?page=ABOUT">ABOUT</a></li>
<li><a href="index.php?page=STORE">STORE</a></li>
<li><a href="index.php?page=COLLECTION">COLLECTION</a></li>
<li><a href="index.php?page=STOCKLISTS">STOCKLISTS</a></li>
<li><a href="index.php?page=BLOG">BLOG</a></li>
<li><a href="index.php?page=PRESS">PRESS</a></li>
<li><a href="index.php?page=CONTACT">CONTACT</a></li>
</ul>
</div>
<br/>
<div id="collectionContainer">
<div id="header">
<h1> Collection</h1>
</div>
<div id="photographs">
<div class="womensText"><h3> <img src="./images/rlogo.tiff" alt="" />Women’s Collection</h3>
<div id="womens">
<div><a href="./images/collection/women/wc1.jpg" rel="lightbox-women" title="BEACH TANK" ><img src="./images/collection/women/wc1_t.jpg" alt=""/></a></div>
<div><a href="./images/collection/women/wc2.jpg" rel="lightbox-women" title="SWALLOWTAIL><img src="./images/collection/women/wc2_t.jpg" alt=""/></a></div>
<div><a href="./images/collection/women/wc3.jpg" rel="lightbox-women" title="SWALLOWTAIL DRESS "><img src="./images/collection/women/wc3_t.jpg" alt=""/></a></div>
<div class="mensText"> <img src="./images/rlogo.tiff" alt="" /> <h3>Men’s Collection</h3>
<div id="mens">
<div><a href="./images/collection/men/mc1.jpg" rel="lightbox-men" title="DRIFTWOOD"><img src="./images/collection/men/mc1_t.jpg" alt=""/></a></div>
<div><a href="./images/collection/men/mc2.jpg" rel="lightbox-men" title="KONA SUNSET"><img src="./images/collection/men/mc2_t.jpg" alt=""/></a></div>
<div><a href="./images/collection/men/mc3.jpg" rel="lightbox-men" title="FRIKI TIKI"><img src="./images/collection/men/mc3_t.jpg" alt=""/></a></div>
<div class="accessories"><h3><img src="./images/rlogo.tiff" alt=""/>Accessories</h3>
<div id="accessories">
<div><a href="./images/collection/accessories/a1.jpg" rel="lightbox-accessories" title=""><img src="./images/collection/accessories/a1_t.jpg" alt=""/></a></div>
<div><a href="./images/collection/accessories/a2.jpg" rel="lightbox-accessories" title=""><img src="./images/collection/accessories/a2_t.jpg" alt=""/></a></div>
<div><a href="./images/collection/accessories/a3.jpg" rel="lightbox-accessories" title=""><img src="./images/collection/accessories/a3_t.jpg" alt=""/></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
<div id="footer">
<div class="footNav">
<ul>
<li><a href="index.php?page=HOME">HOME</a></li>
<li><a href="index.php?page=ABOUT">ABOUT</a></li>
<li><a href="index.php?page=STORE">STORE</a></li>
<li><a href="index.php?page=COLLECTION">COLLECTION</a></li>
<li><a href="index.php?page=STOCKLISTS">STOCKLISTS</a></li>
<li><a href="index.php?page=BLOG">BLOG</a></li>
<li><a href="index.php?page=PRESS">PRESS</a></li>
<li><a href="index.php?page=CONTACT">CONTACT</a></li>
</ul>
</div>
<div class="footer"><p>© | All Rights Reserved | </p></div>
</div>
</body>
</html>
Code:
div#collectionContainer {
overflow: hidden;
margin: 0 auto;
padding: 0 50px;
width: 700px;
background-color: #D3D3D3;
}
div#header {
margin-top: 150px;
margin-bottom: 5px;
padding-left: 15px;
}
div#womens div {
float: left;
width: 100px;
height: 150px;
margin: 12px;
}
.mensText {
clear: both;
}
div#mens div {
width: 48px;
float: left;
margin: 10px;
}
.accessories {
clear: both;
}
div#accessories div {
width: 45px;
float: left;
margin: 10px;
}
Comment