Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Nov 2006
    Posts
    11
    Member #
    14235
    I incorporated Lightbox2 (what an awesome gallery script/layout!) into my website and found the pages work perfectly in IE7 and Firefox.

    http://www.evanwiener.com

    However, my alignment is off in IE6. Since so many are still using IE6, I'd like to fix this and I have a feeling it has something to do with the broken box model, but due to my limited CSS skills, I can't figure out what specifically is wrong.

    It's clear something is wrong with how I've coded these three div tags and how IE6 is displaying them:
    <div id="container">
    <div id="content">
    <div class="gallerycontainer_apparel">

    I've included the relevant CSS and HTML from the page if anyone is kind enough to shine the light on why this is happening.

    Selected CSS:
    Code:
    /*---- LAYOUT ----*/
    
    body { 
    
        margin: 0;
    
        padding: 0;
    
        font-family:Verdana, Arial, Helvetica, sans-serif;
    
        background:#000;
    
        text-align:center;
    
        }
    
    
    
    #container {
    
        width: 840px;
    
        height: auto;
    
        margin: 10px auto;
    
        padding: 0px;
    
        color:#E4BC96;
    
        font-family:Verdana, Arial, Helvetica, sans-serif;
    
        font-size: 10pt;
    
        line-height: 12pt;
    
        text-align: left;
    
        }
    
    
    
    #content {
    
        width:700px;
    
        height:auto;
    
        margin: 0px auto;
    
        padding: 10px 70px 30px 70px;
    
        background:  url(../images/repeat.gif) top center repeat;
    
        }
    
    .gallerycontainer_design {
    
    position: relative;
    
    width:700px;
    
    height: 500px;
    
    text-align:center;
    
    margin:0;
    
    padding-left:25px;
    
    padding-right:25px;
    
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    
    }
    
    .thumbnail{
    
        padding: 4px 4px 8px 4px;
    
        background-color: #730000;
    
        border: 0px solid #E4BC96;
    
        float: left;
    
        margin-left: 10px;
    
        margin-right: 10px;
    
        margin-bottom: 10px;
    
        }    
    
    .thumbnail img {
    
        border: 1px solid #E4BC96;
    
        }
    HTML:
    Code:
    <div id="container">
    <div id="header_section"><a href="http://www.EvanWiener.com"><img src="images/header-design.jpg" alt="Evan Wiener Design - Design Portfolio" name="Header" width="840" height="150" border="0" id="Header" /></a></div>
    
    
    <div id="nav">
        <ul>
        <li><a href="http://www.evanwiener.com">Home</a></li>
        <li><a href="http://www.evanwiener.com/about.html">About</a></li>
        <li><a class="viewing" href="http://www.evanwiener.com/design.html">Design</a></li>
    
        <li><a href="http://www.evanwiener.com/apparel.html">Apparel</a></li>
        <li><a href="http://www.evanwiener.com/illustration.html">Illustration</a></li>
        <li><a href="http://www.evanwiener.com/contact.html">Contact</a></li>
        </ul>
    </div>
    
    <div id="content">
    <p>Click on thumbnails below for a larger view. Use the arrow keys on your keyboard, or click on the image to progress through the gallery.</p>
    
    <div class="gallerycontainer_design">
      <!--Row 1-->
        <div class="thumbnail"><a href="images/design/golf-large.jpg" rel="lightbox[design]" title="Client: PricewaterhouseCoopers | Project: Poster Campain"><img src="images/design/thumb/golf-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/preserver-large.jpg" rel="lightbox[design]" title="Client: PricewaterhouseCoopers | Project: Poster Campain"><img src="images/design/thumb/preserver-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
        
            <div class="thumbnail"><a href="images/design/ride-large.jpg" rel="lightbox[design]" title="Client: PricewaterhouseCoopers | Project: Poster Campain"><img src="images/design/thumb/ride-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
    
        <div class="thumbnail"><a href="images/design/Comcast-Invite-large.jpg" rel="lightbox[design]" title="Client: PricewaterhouseCoopers | Project: Invitation"><img src="images/design/thumb/Comcast-Invite-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/Ikea-Proposal-large.jpg" rel="lightbox[design]" title="Client: PricewaterhouseCoopers | Project: Proposal Design"><img src="images/design/thumb/Ikea-Proposal-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
    <!-- Row 2 -->
        <div class="thumbnail"><a href="images/design/PwC-Newsletter-large.jpg" rel="lightbox[design]" title="Client: PricewaterhouseCoopers | Project: Personal Finacial Services Newsletter"><img src="images/design/thumb/PwC-Newsletter-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/Penn-Charter-large.jpg" rel="lightbox[design]" title="Client: Penn Charter School | Project: Proposed Invitation Design/Logo"><img src="images/design/thumb/Penn-Charter-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/Red-Frame-logo-large.jpg" rel="lightbox[design]" title="Client: Red Frame Renovations | Project: Logo Design &amp; Business Card"><img src="images/design/thumb/Red-Frame-logo-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/thome-large.jpg" rel="lightbox[design]" title="Client: Bucks County Courier Times | Project: Sales Promotion Flier"><img src="images/design/thumb/thome-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/san-marzano-large.jpg" rel="lightbox[design]" title="Client: San Marzano | Project: Product Package Design"><img src="images/design/thumb/san-marzano-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
    <!-- Row 3-->
        <div class="thumbnail"><a href="images/design/Engagement-large.jpg" rel="lightbox[design]" title="Project: Custom Engagement Announcement"><img src="images/design/thumb/Engagement-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/ron-lapides-interiors-large.jpg" rel="lightbox[design]" title="Client: Ron Lapides Interiors | Project: Website Design &amp; Development - &lt;a href=&quot;http://www.RonLapidesInteriors.com&quot;&gt;RonLapidesInteriors.com&lt;/a&gt;"><img src="images/design/thumb/ron-lapides-interiors-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
        
        <div class="thumbnail"><a href="images/design/LRAworldwide-large.jpg" rel="lightbox[design]" title="Client: LRA Worldwide, Inc. | Project: Website Design &amp; Development - &lt;a href=&quot;http://www.LRAworldwide.com&quot;&gt;LRAworldwide.com&lt;/a&gt;"><img src="images/design/thumb/LRAworldwide-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
            
        <div class="thumbnail"><a href="images/design/LRA-Mission-Poster-large.jpg" rel="lightbox[design]" title="Client: LRA Worldwide, Inc. | Project: Mission/Vision/Values Poster"><img src="images/design/thumb/LRA-Mission-Poster-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/LRA-B2B-Mail-large.jpg" rel="lightbox[design]" title="Client: LRA Worldwide, Inc. | Project: Business-to-Business Mailer"><img src="images/design/thumb/LRA-BtoB-mail-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/LRA-recruit-large.jpg" rel="lightbox[design]" title="Client: LRA Worldwide, Inc. | Project: Trade Show Booth Poster"><img src="images/design/thumb/lra-recruit-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/LRA-Sports-Bus-large.jpg" rel="lightbox[design]" title="Client: LRA Worldwide, Inc. | Project: Advertisement in Sports Business Journal"><img src="images/design/thumb/LRA-Sports-Bus-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
        <div class="thumbnail"><a href="images/design/postcard-large.jpg" rel="lightbox[design]" title="Client: LRA Worldwide, Inc. | Project: Direct Mail Postcard"><img src="images/design/thumb/postcard-thumb.jpg" alt="Design Sample" width="100" height="100" border="0" /></a></div>
    
    
    </div><!-- End .gallerycontainer_design -->
    
    </div><!-- End #content -->

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Evan ...

    I found a few things.

    I came up with all of this as my first shot at figuring it out ...

    http://www.catpin.com/weiner

    View the HTML and CSS in my example.

    I don't know if all of this will help you, or mess you up.
    So, save a copy of your pages before you over-write anything.

    I think it renders fairly close in all browsers.

    ================

    The major one was in the display of thumbs.
    After 5 thumbs are displayed (a row), you should
    do a "clear:both" to reset the float left. This is
    because one browser will try to put more on a
    line than the other browser.

    I then had to fix the footer, add some width changes.
    In my CSS, I tried to comment-out things I eliminated.

    IE6.0 Navigation colors messed up because of "a:visited" and
    hover colors ... commented out, now it works fine.

    IE sucks! That's the bottom line

    But I think I'm close without any hacks.


  4. #3
    Junior Member
    Join Date
    Nov 2006
    Posts
    11
    Member #
    14235
    Thanks very much for the help. I devised a way to get the rows of thumbnails to be centered pretty well with IE7 and Firefox, and it may be a few pixels off in IE6, but nothing to lose sleep over. Especially considernig IE6's user base will be dwindling.

    The clear floats divs helped a lot and your suggested changes to get the changing nav link colors helped a lot, with some spacing revisions.

    Thanks again! My gallery is pretty close to perfect in IE6, IE7, and FF2 without hacks!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com