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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post

    Layout Break in Firefox

    With the help of you guys I've fixed the two biggest kinks in my layout, but I'm now having a problem with the layout breaking in Firefox 2 when it's resized too far. I experienced it in Firefox 1.5 as well, but not in IE. header_bottom.png bumps down and overlaps castle_bottom.png. Any help would be appreciated.

    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;
    }
    
    iframe {
    display:none;
    }
    
    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 */
    
    .floatleft {
    float:left;
    }
    
    .floatright {
    float:right;
    }
    
    .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 */
    
    .gallerythumb {
    width: 184px;
    height: 160px;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    font-weight: bold; 
    float:left;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px
    }
    
    /*-----------------------------------------------------------------------------------------------*/
    /* 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("http://jimmydief.bravehost.com/hpe/header_top.png");
    background-repeat: no-repeat;
    background-color:#0E0F22;
    }
    
    #header_bottom {
    margin:0px;
    padding:0px;
    height:20px;
    background-image: url("http://jimmydief.bravehost.com/hpe/header_bottom_bg.png");
    background-repeat: repeat-x;
    }
    
    .right {
    float:right;
    }
    
    #castle_bottom {
    margin-bottom:6px;
    margin-top:0px;
    padding-top:0px;
    float:left;
    }
    
    #container {
    min-width:780px;
    }
    
    #interior {
    margin-left:156px;
    margin-top:0px;
    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;
    margin-bottom:10px;
    }
    
    #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;
    }
    
    #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;
    }
    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="file:///C:/Documents%20and%20Settings/Mark%20Diefenderfer/Desktop/HPE%20CSS.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="http://www.jimmydief.bravehost.com/hpe/header_text.png" class="right"  alt="The Harry Potter Encyclopedia" /></div>
    <div id="header_bottom"><img src="http://www.jimmydief.bravehost.com/hpe/header_bottom.png" alt="Logo Top"  /></div>
    <div id="castle_bottom"><img src="http://www.jimmydief.bravehost.com/hpe/castle_bottom.png"  alt="Logo Bottom" /></div>
    
    <!-- Navigation (Currently Manually Added but Will be Automated) //-->
    <!-- =========================================================== //-->
    
    <div id="menu"><ul>
    <li class="navtitle">SITE NAVIGATION</li>
    <li><a href="../hpe/home.html">Home</a></li>
    <li><a href="../hpe/aboutus.html">About Us</a></li>
    <li><a href="../hpe/infosources.html">Sources of Information</a></li>
    <li><a href="../hpe/jobopenings.html">Job Openings</a></li>
    <li><a href="../hpe/links.html">Links</a></li>
    <li class="navtitle">THE BOOKS</li>
    <li><a href="../hpe/books/book1.html">Sorcerer's Stone</a></li>
    <li><a href="../hpe/books/book2.html">Chamber of Secrets</a></li>
    <li><a href="../hpe/books/book3.html">Prisoner of Azkaban</a></li>
    <li><a href="../hpe/books/book4.html">Goblet of Fire</a></li>
    <li><a href="../hpe/books/book5.html">Order of the Phoenix</a></li>
    <li><a href="../hpe/books/book6.html">Half-Blood Prince</a></li>
    <li><a href="../hpe/books/book7.html">Book 7 (Untitled)</a></li>
    <li><a href="../hpe/books/FB.html">Fantastic Beasts</a></li>
    <li><a href="../hpe/books/QTA.html">Quidditch Through The Ages</a></li>
    <li><a href="../hpe/books/covers.html">Book Covers</a></li>
    <li><a href="../hpe/books/mistakes.html">Mistakes</a></li>
    <li><a href="../hpe/books/quotes.html">Memorable Quotes</a></li>
    <li><a href="../hpe/books/excerpts.html">Funny Excerpts</a></li>
    <li><a href="../hpe/books/littlethings.html">The Little Things</a></li>
    <li class="navtitle">ENCYCLOPEDIAS</li>
    <li><a href="../hpe/encyclopedias/people.html">Wizards and Muggles</a></li>
    <li><a href="../hpe/encyclopedias/spells.html">Magical Spells</a></li>
    <li><a href="../hpe/encyclopedias/items.html">Wizarding Items / Devices</a></li>
    <li><a href="../hpe/encyclopedias/places.html">Places</a></li>
    <li><a href="../hpe/encyclopedias/creatures.html">Creatures</a></li>
    <li><a href="../hpe/encyclopedias/potions.html">Potions</a></li>
    <li><a href="../hpe/encyclopedias/completewizard.html">Complete Wizarding World</a></li>
    <li class="navtitle">OTHER INFORMATION</li>
    <li><a href="../hpe/infoindex.html">Complete Information Index</a></li>
    <li><a href="../hpe/magic/main.html">Magical Theory</a></li>
    <li><a href="../hpe/magic/darkarts.html">The Dark Arts</a></li>
    <li><a href="../hpe/places/hogwarts.html">Hogwarts</a></li>
    <li><a href="../hpe/places/ministry.html">The Ministry of Magic</a></li>
    <li><a href="../hpe/places/diagon.html">Diagon Alley</a></li>
    <li><a href="../hpe/organizations.html">Wizarding Organizations</a></li>
    <li><a href="../hpe/wizardmoney.html">Wizarding Money</a></li>
    <li><a href="../hpe/items/wands.html">Wands</a></li>
    <li><a href="../hpe/wizardbooks.html">Wizarding Books</a></li>
    <li><a href="../hpe/wizardportraits.html">Wizard Portraits / Photos</a></li>
    <li><a href="../hpe/JKRinfo.html">J.K. Rowling</a></li>
    <li><a href="../hpe/marygrandpreinfo.html">Mary Grandpr&eacute;</a></li>
    <li><a href="../hpe/JKRsite.html">J.K. Rowling.com Site Info</a></li>
    <li class="navtitle">THE MOVIES</li>
    <li><a href="../hpe/movies/movie1.html">Sorcerer's Stone (Movie)</a></li>
    <li><a href="../hpe/movies/movie2.html">Chamber of Secrets (Movie)</a></li>
    <li><a href="../hpe/movies/movie3.html">Prisoner of Azkaban (Movie)</a></li>
    <li><a href="../hpe/movies/movie4.html">Goblet of Fire (Movie)</a></li>
    <li><a href="../hpe/movies/movie5.html">Order of the Phoenix (Movie)</a></li>
    <li><a href="../hpe/movies/actors.html">Actors / Actresses</a></li>
    <li><a href="../hpe/movies/crew.html">The Crew</a></li>
    </ul></div>
    
    <!-- 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)</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">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 mjaor 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 //-->
    </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>
    Last edited by boko; 05-13-2007 at 05:07 PM. Reason: Added some more information.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    We need a link. Its not like we have the images on hand or anything.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by boko View Post
    I'm now having a problem with the layout breaking in Firefox 2 when it's resized too far. I experienced it in Firefox 1.5 as well, but not in IE. header_bottom.png bumps down and overlaps castle_bottom.png.
    Compare the height of your header image and the height of its container. By inspection of the image athttp://www.jimmydief.bravehost.com/hpe/header_text.png one finds that it has an intrinsic height of 122px. But its container only has a height of 117px. You should fix this.
    Code:
    #header_top {
    margin:0px;
    padding:0px;
    height:117px;
    background-image: url("http://jimmydief.bravehost.com/hpe/header_top.png");
    background-repeat: no-repeat;
    background-color:#0E0F22;
    }
    Code:
    /* the image has intrinsic height: 122px */
    <div id="header_top"><img src="http://www.jimmydief.bravehost.com/hpe/header_text.png"
    class="right"  alt="The Harry Potter Encyclopedia" /></div>
    If you are interested it knowing why you don't see the problem in IE7, then the explanation is that IE7 suffers from a float bug where floats sticking out do not always displace contents in adjacent divs (as they should). Firefox's rendering is correct. I remember seeing this bug mentioned in a reader comment on the IEBlog while IE7 beta testing was still going on, but now I can't find the reference. It was never fixed. Example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head>
    <title>IE7: A float sticking out a div with explicit height does not correctly displace content in an adjacent div</title>
    <style type="text/css">
    body {
    	margin: 0;
    	font-family: Arial, sans-serif;
    }
    #top {
    	background: red;
    	height: 100px;
    }
    #bottom {
    	background: yellow;
    }
    #flt {
    	float: left;
    	width: 200px;
    	height: 200px;
    	background: green;
    }
    </style>
    </head>
    <body>
    <h1>IE7: A float sticking out a div with explicit height does not correctly displace content in an adjacent div</h1>
    <div id="container">
    <div id="top">
    <div id="flt"></div>
    The red div has an explicitly set height of 100px. It is followed by a yellow div that does not have layout.
    The red div contains a green float that sticks out at the bottom. In IE7 this does not cause text in the yellow div to be displaced.
    Instead there is overlap.
    </div>
    <div id="bottom">
    <h2 style="margin-top: 0">IE6 has been improved, but IE7 is still buggy</h2>
    Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
    </div>
    </body>
    </html>
    I assume that you are testing in IE7 and not IE6. Because here I see more rendering issues. There is also a problem with your transparent png which does not display correctly in IE6.

    Edit: Context: Aerospace_Eng posted while I was typing this.
    @Aero, the images have absolute URL's.
    @boko: A link would be helpful anyway.
    Last edited by koyama; 05-13-2007 at 07:04 PM.

  • #4
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks once again, koyama. I sliced the header into two pieces and must have forgotten about shrinking the text.


  •  

    Posting Permissions

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