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

    Different Margins in Firefox and IE

    #header_top, #header_bottom, and #interior (a container for #main and #copy) all have 10px right margins, but #interior appears 1px farther in than the other two <DIV> elements in Firefox 2. Making #interior's margin 11px fixes it in Firefox but screws it up in IE7. I'd greatly appreciate any help, it's driving me nuts. Both my xHTML and CSS are valid.

    Here's 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="http://jimmydief.bravehost.com/hpe/HPE2.css" />
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        </head>
        <body>
    
    <!-- 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 (To Be Completely Dynamically Generated)  //-->
    <!-- =========================================================== //-->
    
    <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 //-->
    	</body>
    </html>
    And here's the CSS:
    Code:
    /* Welcome to the CSS Document of the Harry Potter Encyclopedia. */
    /*-----------------------------------------------------------------------------------------------*/
    
    /*Main Styles*/
    body {
    margin:0px;
    padding-left:10px;
    padding-right:0px;
    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;
    margin-right:10px;
    padding:0px;
    height:117px;
    background-image: url("http://jimmydief.bravehost.com/hpe/header_top.png");
    background-repeat: no-repeat;
    background-color:#0E0F22;
    min-width:624px;
    }
    
    #header_bottom {
    margin:0px;
    margin-right:10px;
    padding:0px;
    height:20px;
    background-image: url("http://jimmydief.bravehost.com/hpe/header_bottom_bg.png");
    background-repeat: repeat-x;
    min-width:624px;
    }
    
    .right {
    float:right;
    }
    
    #castle_bottom {
    margin-bottom:6px;
    margin-top:0px;
    padding-top:0px;
    float:left;
    }
    
    #interior {
    position:absolute;
    left:166px;
    margin-right:10px;
    margin-top:0px;
    padding-top:0px;
    padding-right:0px;
    min-width:624px;
    }
    
    #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;
    }
    Thanks again!
    Last edited by boko; 05-12-2007 at 11:22 PM. Reason: Forgot to mention something.

  • #2
    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
    #header_top, #header_bottom, and #interior (a container for #main and #copy) all have 10px right margins, but #interior appears 1px farther in than the other two <DIV> elements in Firefox 2. Making #interior's margin 11px fixes it in Firefox but screws it up in IE7. I'd greatly appreciate any help, it's driving me nuts. Both my xHTML and CSS are valid.
    Comparing Firefox and IE7 I don't see the issue. On the other hand I see a problem with your page in both browsers: The right edge of content does not always coincide with the right edge of the header as one resizes the window. I suspect that this is related to the issue that you are complaining about.

    This problem is your use of absolute positioning. You have this for your main content:
    Code:
    #interior {
    position:absolute;
    left:166px;
    margin-right:10px;
    margin-top:0px;
    padding-top:0px;
    padding-right:0px;
    min-width:624px;
    }
    Since you haven't specified a width for the above element, the computed width becomes shrink-to-fit. This means that it will not necessarily extend all the way to the right, but generally there may be a small gap of varying size as one resizes the window in the horizontal direction.

    A better solution would be to drop the absolute positioning:
    Code:
    #interior {
    margin-left: 156px;
    margin-right:10px;
    min-width:624px;
    }
    Another suggestion: Use a wrapper to enclose all your content and instead impose a min-width only to this element. You wouldn't need to specify min-width for more than one element as you are doing right now.

  • #3
    New Coder
    Join Date
    Oct 2005
    Posts
    30
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks a ton; that fixed my two main problems. My final problem is a layout break when the window is resized too much. The image header_bottom.png drops down and overlaps castle_bottom.png in FireFox 2. Any suggestions?


  •  

    Posting Permissions

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