...

View Full Version : Different Margins in Firefox and IE



boko
05-12-2007, 11:07 PM
#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:

<!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:

/* 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!

koyama
05-13-2007, 02:12 AM
#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:


#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:


#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.

boko
05-13-2007, 05:02 AM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum