Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post

    Image Gallery Troubles

    I'm having trouble with an image gallery that I'm coding using xHTML and CSS. In IE7, IE6, and FF2, the images and their captions drop down out of the containing DIVs (#interior and #main). Both my xHTML and CSS are valid. Here's my CSS:
    Code:
    /*-----------------------------------------------------------------------------------------------*/
    /*Main Styles*/
    
    body {
    margin:0px;
    padding-left:10px;
    padding-right:10px;
    background-color:#000000;
    font-family:arial,helvetica,sans-serif;
    color:#000000;
    font-size:14px;
    }
    
    DIV {
    }
    
    SPAN {
    }
    
    P {
    font-size:14px;
    }
    
    img {
    border-width:0px;
    display:block;
    }
    
    form {
    display:block;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /*Header Styles*/
    
    h1,h2,h3,h4,h5,h6 {
    font-weight:bold;
    }
    
    h1 {
    font-size:28px;
    text-align:left;
    }
    
    h2 {
    font-size:26px;
    text-align:left;
    }
    
    h3 {
    font-size:24px;
    text-align:left;
    }
    
    h4 {
    font-size:22px;
    text-align:left;
    }
    
    h5 {
    font-size:20px;
    text-align:left;
    margin-bottom:0px;
    }
    
    h6 {
    font-size:18px;
    text-align:left;
    margin-bottom:10px;
    margin-top:10px;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Link Styles */
    
    a:link {
    color:#800000;
    text-decoration:underline;
    }
    
    a:visited {
    color:#800000;
    text-decoration:underline;
    }
    
    a:active {
    color:#800000;
    text-decoration:none;
    }
    
    a:hover {
    color:#000000;
    text-decoration:underline;
    }
    
    a:visited:hover {
    color:#000000;
    text-decoration:underline;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Basic Styles */
    
    .clear {
    clear:both;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Page-Specific Styles */
    
    /* -- -- -- -- -- -- -- -- -- -- -- -- -- */
    /* Home Page */
    
    .mainheader {
    text-align:center;
    margin-top:0px;
    padding-top:0px;
    }
    
    #updates p {
    margin-top:2px;
    margin-bottom:2px;
    }
    
    .updatetitle {
    font-weight:bold;
    text-align:left;
    border-bottom:1px solid black;
    margin-bottom:2px;
    padding-bottom:1px;
    }
    
    .updateinfo {
    text-align:right;
    font-style:italic;
    }
    
    /* -- -- -- -- -- -- -- -- -- -- -- -- -- */
    /* Book Pages */
    
    .lgbookcover {
    border:2px black solid;
    float:right;
    }
    
    /* -- -- -- -- -- -- -- -- -- -- -- -- -- */
    /* Image Galleries */
    
    .gallery { /* The .gallery tag is empty for now, but is being used in the galleries to allow future changes. */ }
    
    .imgthumb {
    width: 184px;
    height: 160px;
    margin-right: 5px;
    text-align: center;
    font-weight: bold; 
    float:left;
    padding-bottom:2px;
    }
    
    .imgthumb span {
    padding:0px;
    margin:0px;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Right Menu Styles */
    
    .rightmenu {
    font-size:12px;
    margin-left:5px;
    border:2px black solid;
    background-color:#CCCCCC;
    width:200px;
    float:right;
    clear:both;
    }
    
    .rightmenu .title {
    font-weight:bold;
    color:white;
    border-top: 1px white solid;
    border-bottom: 1px white solid;
    background-color:#000066;
    padding-left: 2px;
    padding-right: 0px;
    }
    
    .rightmenu .searchbox {
    margin: 2px;
    }
    
    .rightmenu p {
    font-size: 12px;
    margin-left:2px;
    margin-right:2px;
    }
    
    .poll {
    font-weight:bold;
    font-size: 12px;
    }
    
    .validation {
    display: inline;
    list-style: none;
    margin-left: 2px;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Content Formatting */
    
    #header_top {
    margin:0px;
    padding:0px;
    height:117px;
    background-image: url("../img/layout/header_top.png");
    background-repeat: no-repeat;
    background-color:#0E0F22;
    }
    
    #header_bottom {
    margin:0px;
    padding:0px;
    height:20px;
    background-image: url("../img/layout/header_bottom_bg.png");
    background-repeat: repeat-x;
    }
    
    .right {
    float:right;
    }
    
    #castle_bottom {
    margin-bottom:6px;
    margin-top:0px;
    padding-top:0px;
    padding-bottom:0px;
    float:left;
    }
    
    #container {
    min-width:750px;
    }
    
    #interior {
    margin-left:156px;
    margin-top:0px;
    margin-bottom:10px;
    padding-top:0px;
    padding-right:0px;
    }
    
    #main {
    padding:5px;
    padding-top:0px;
    margin-bottom:7px;
    margin-top:0px;
    margin-right:0px;
    background-color:#FFFFFF;
    }
    
    #main p {
    margin-top:10px;
    margin-bottom:10px;
    }
    
    #copy {
    background-color:#FFFFFF;
    text-align:center;
    padding:1px;
    }
    
    #copy P {
    font-size:12px;
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* Navigation Styles */
    
    #menu {
    background-color:#000033;
    width:148px;
    font-size:11px;
    clear:left;
    float:left;
    padding-left:2px;
    margin-bottom:10px;
    margin-top:0px;
    }
    
    #menu a:link {
    font-size:11px;
    color:#FFFFFF;
    text-decoration:none;
    }
    
    #menu a:visited {
    font-size:11px;
    color:#FFFFFF;
    text-decoration:none;
    }
    
    #menu a:active {
    font-size:11px;
    color:#99ccff;
    text-decoration:none;
    }
    
    #menu a:hover {
    font-size:11px;
    color:#99ccff;
    text-decoration:none;
    }
    
    #menu a:visited:hover {
    font-size:11px;
    color:#99ccff;
    text-decoration:none;
    }
    
    #menu ul {
    margin-left:0px;
    padding-top:0px;
    margin-top:0px;
    padding-left:0px;
    margin-bottom:0px;
    list-style:none;
    }
    
    #menu li {
    border-bottom:1px solid black;
    padding-left:2px;
    color:#FF9900;
    }
    
    .navtitle {
    font-weight:bold;
    }
    And my xHTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
        <title> The Harry Potter Encyclopedia - The Comprehensive Compendium of All Things Harry Potter!</title>
        <link rel="stylesheet" type="text/css" href="../hpe.css" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        </head>
        <body>
    
    <!-- Container (Currently Manually Added but Will be Automated)     //-->
    <!-- =========================================================== //-->
    
    <div id="container">
    
    <!-- Header (Currently Manually Added but Will be Automated)     //-->
    <!-- =========================================================== //-->
    
    <div id="header_top"><img src="../img/layout/header_text.png" class="right" alt="The Harry Potter Encyclopedia" /></div>
    <div id="header_bottom"><img src="../img/layout/header_bottom.png" alt="Logo Top"  /></div>
    <div id="castle_bottom"><img src="../img/layout/castle_bottom.png"  alt="Logo Bottom" /></div>
    
    <?php include("menu.txt"); ?>
    
    <!-- Main Content Area (Some Parts to Be Automatically Generated)//-->
    <!-- =========================================================== //-->
    
    <div id="interior">
    <div id="main">
    <h1 class="mainheader">Welcome to The Harry Potter Encyclopedia!</h1>
    <p>Welcome to the Harry Potter Encyclopedia, your one-stop reference for everything Harry Potter. The Harry Potter Encyclopedia, also known as HPE, is home to 
    
    many features, including complete and up-to-date encyclopedias, in-depth sections on each book and movie, an editorial section to share your theories or read 
    
    other people's, and fun games and quizzes, to name a few.</p>
    <p>As the site grows and new books and movies come out, new features and information will be added. These features may include a discussion forum and chat 
    
    room, as well as other new things that will become possible as the site gets up and running. This page may eventually contain Harry Potter News, but for now, 
    
    because there are so many great news sites, (including <a href="http://www.the-leaky-cauldron.org">The Leaky Cauldron</a> and <a 
    
    href="http://www.hpana.com">HPANA</a>), the News Section is being put on hold. There are so many great sites, including the two listed above, that a news 
    
    feature on our information-themed site is not on the top of our list to add. features such as pages for each of the books, organizations, major characters, and our 
    
    encyclopedias are the highest on our list of things to get done.</p>
    <p>We are currently looking for staff members, as we are a new and growing site. Below are the open positions and what is required to apply. As I have 
    
    undoubtfully referred you to this site, please contact me wherever you can (The email accounts aren't up yet).</p>
    <p>The staff can be contacted about the site, a job position, an editorial submission, or anything else anywhere you can find them. As we are a new and developing 
    
    site, the communications department is not up and we can't be reached by normal means.</p>
    <h6>Staff Checklist</h6>
    <p>The Staff Checklist is a list of what the staff is currently working on and the status of the project. It will be updated and added to as we finish and start new 
    
    projects.</p>
    <ul>
    <li>The Encyclopedia of Wizards and Muggles (Status: Character list being compiled, layout designed)</li>
    <li>The Death Eater page (Status: Information compiled, page to be completed)</li>
    <li>The Animagi page (Status: Information completed, page to be completed)</li>
    <li>Pages for Books 1-6. (Status: Books 1-3 completed except for a list of awards for each one, Books 4-6 in progress)</li>
    <li>Book Cover page for Book 1 (Status: 34 covers compiled, page layout designed, page in progress)</li>
    </ul>
    <h6>Site Updates</h6>
    <p>Updates to the site will be logged here. Updates will come whenever possible, and I try to be very thorough with the description. Old updates will be backlogged 
    
    when necessary.</p>
    <div id="updates">
    <div class="updatetitle">I Lied...</div>
    <p>I lied last night. There was still one kink with the layout, which had to do with the images having display types of inline. This adds space at the bottom of the 
    
    images which is neither padding nor margins, and which cannot be removed without changing the display type of the images. I changed them to block, which 
    
    thankfully had no effect on the layout. It did, however, affect the wallpaper gallery at the bottom of this page, which resulted in me implementing my image gallery 
    
    styles on that section of this page. It did fix a lfew discrepencies in spacing, and the layout is now exactly where I want it to be.</p>
    <div class="updateinfo">Posted by Jimmy on 5/17/2007 at 6:00 PM</div>
    <div class="updatetitle">Lots of Work Being Done</div>
    <p>Big news this update. Hosting has changed to <a href="http://www.007ihost.com">007iHost.com</a>, which is free, gives you 700MB of space and 7000MB of 
    
    bandwidth, and requires no ads and no text link to their site. I fixed all kinks with the layout (excluding a problem with the header image in IE6, because IE6 doesn't 
    
    support .png transparency), got it to be fluid, and integrated PHP (another free feature of my new host) to make changing my menus so much easier. Content-wise, I 
    
    have been working on getting images lined up for the EWM (Encyclopedia of Wizards and Muggles), and I spent two hours or so tonight cropping and resizing. I'll 
    
    definitely get a finished page up this weekend; it'll either be the animagi or Death Eater page. I've also gotten final layouts done for a couple of different parts of the 
    
    site, including both the EWM index and letter pages, and the book cover pages. I do need to rewrite the intro paragraphs; I don't know what I was thinking when I 
    
    wrote those. I'm definitely getting back into this.</p>
    <div class="updateinfo">Posted by Jimmy on 5/16/2007 at 9:00 PM</div>
    <div class="updatetitle">Work Being Restarted</div>
    <p>I got a great Deathly Hallows wallpaper done and worked on a sidebar for the right. I made significant progress on a model that I made around the last update. 
    
    You can see a sample of the sidebar <a href="http://www.jimmydief.bravehost.com/hpe/tester2.html">here</a>. It will have a weekly poll, the search function, and 
    
    some other things. I also added a little sample of the wallpaper gallery on the home page for kicks. Enjoy!</p>
    <div class="updateinfo">Posted by Jimmy on 14/17/2007 at 9:30 PM</div>
    <div class="updatetitle">Book Pages Almost Complete</div>
    <p>Information for Book Pages 4-6 has been compiled, and progress on actual pages ia about to begin. Book Covers page for Book 1 not up yet, but it's coming. 
    
    The Encyclopedia of Wizards and Muggles is under progress, as are the Animagi and Death Eater pages. From now on, only important updates, such as major 
    
    layout changes, site milestones, or additions to the site, will be posted here, and  what we're working on will be listed with the status of the project in the Staff 
    
    Checklist.</p>
    <div class="updateinfo">Posted by Jimmy on 11/15/2005 at 4:45 PM</div>
    <div class="updatetitle">The Harry Potter Encyclopedia Is Underway and Looking Fine!</div>
    <p>Pages for Books 1 to 6 have been added and mostly completed. Progress on Book 1 Covers page slow, but there. Animagi and Death Eaters pages doing 
    
    very well, although not online yet. This Update section was added to the homepage, and I cleared up some of that confusing text in the introduction paragraphs. 
    
    More stuff added to the Open Positions section. New Staff section of home page canned, the staff really isn't that new, and the information on staff will be moved to 
    
    the About Us section on the menu. I added the Staff Checklist to the homepage as well, so visitors can see what projects are underway.</p>
    <div class="updateinfo">Posted by Jimmy on 11/4/2005 at 8:59 AM</div>
    </div> <!-- Updates //-->
    <h6>Wallpaper Gallery</h6>
    <div class="gallery">
    <div class="imgthumb"><a href="../img/wallpapers/dh1.png"><img src="../img/wallpapers/dh1thumb.png" alt="Deathly Hallows Wallpaper" />
    <span>Deathly Hallows Wallpaper</span></a></div>
    <div class="imgthumb"><a href="../img/wallpapers/sirius1.png"><img src="../img/wallpapers/sirius1thumb.png" alt="Sirius Wallpaper" />
    <span>Sirius Wallpaper</span></a></div>
    <div class="imgthumb"><a href="../img/wallpapers/quidditch.png"><img src="../img/wallpapers/quidditchthumb.png" alt="Quidditch Wallpaper" />
    <span>Quidditch Wallpaper</span></a></div>
    <div class="imgthumb"><a href="../img/wallpapers/hpetext.png"><img src="../img/wallpapers/hpetextthumb.png" alt="HPE Wallpaper" />
    <span>HPE Wallpaper</span></a></div>
    <div class="imgthumb"><a href="../img/wallpapers/OotPmovie.png"><img src="../img/wallpapers/OotPmoviethumb.png" alt="OotP Cast Wallpaper" />
    <span>OotP Cast Wallpaper</span></a></div>
    </div> <!-- Image Gallery //-->
    </div> <!-- Main Content Area //-->
    
    <!-- Copyright Message (Currently Manually Added but Will be Automated) //-->
    <!-- =========================================================== //-->
    
    <div id="copy">
    <p>The Harry Potter Encyclopedia is an unofficial fan site, and only exists to be a complete reference for Harry Potter fans. Harry Potter and related trademarks are 
    
    property of J.K. Rowling and Warner Bros. Not me. Original Content &copy; The Harry Potter Encyclopedia 2005, All Rights Reserved.</p>
    </div> <!-- Copyright Message //-->
    </div> <!-- Interior //-->
    </div><!-- Container //-->
    	</body>
    </html>
    And here's the page on the internet.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello boko,
    Try this:
    Code:
    #main {
    padding:5px;
    padding-top:0px;
    margin-bottom:7px;
    margin-top:0px;
    margin-right:0px;
    background-color:#FFFFFF;
    overflow: hidden;
    }

    And here is how that works.



    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks Excavator.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •