Why are the container and floats not working in Firefox Opera, and IE?

6 New Member

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.

Expand|Select|Wrap|Line Numbers

  
<!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&rsquo;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&rsquo;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>&copy; | All Rights Reserved | </p></div>
 
 </div>
 
</body>

</html>

Here is the CSS for the styling on this page.

Expand|Select|Wrap|Line Numbers

  
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;

}

Nov 16 '10 #1

Subscribe Reply

2239

JKing

1,206

Recognized Expert Top Contributor

Could you post a link and/or post a screenshot of both the intended layout and the incorrect layout.

You are missing a double quote on line 53 of your html in the title attribute of your link. Fix that for a start.

Nov 16 '10 #2

Peter Morris

New Member

Thanks for the response. This was an edited version of what I am trying to accomplish. You can see the site at http://beta.theorganik.com

I know there are html validation errors that need to be fixed. The CSS validates.

Nov 16 '10 #3

drhowarddrfine

7,435

Recognized Expert Expert

I entered a formula into my calculator. I know there are a lot of errors but why am I not getting the right answer?

Nov 16 '10 #4

Peter Morris

New Member

I meant I know the html validates with warnings. Most are because I used self closing tags in html 4.01 transitional. The errors are due to facebook, myspace, and twitter buttons and not what I am trying to style.

Nov 16 '10 #5

Death Slaught

1,137

Top Contributor

The problem is line 14 of your HTML. You have text.css instead of text/css. The CSS simply isn't being loaded.

Regards, Death

Nov 16 '10 #6

Peter Morris

New Member

Thank you.

Nov 16 '10 #7

Similar topics

Problem with clearing floats in Firefox

by: Niels | last post by:

Hi group, I have some problems with clearing floated divs. My usual method works fine in Konqueror, but not in Firefox. Here's an example: <html><body> <div id='left' style='float:left;...