www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] Centers correctly in IE, not Firefox.

  1. #1
    Join Date
    Jul 2006
    Posts
    21

    resolved [RESOLVED] Centers correctly in IE, not Firefox.

    margin:0 auto; fixed it... no idea why.


    Hi, I'm really new to CSS and am trying to arrange my new site with <div>s, but I've come across a pretty major problem: I can't get the main div to center in Firefox 3.

    Does anyone see the issue? I can't figure it out -- i'm using text-align:center; the div I'm trying to center has the id="backdrop" and it is within the div "page".

    here is the URL:
    http://www.loreaxe.com/mod/MASTER.html

    and the code:
    Code:
    <html>
    <head>
    
    <!--<link href="eformat.css" rel="stylesheet" type="text/css" />-->
    
    <style type="text/css">
    
    body {
    	margin:0;
    	padding:0;
    	text-align:center;
    	border:0;
    	font-family:Garamond;
    	color:#BB9B77;
    }
    
    ul {
    	list-style:none;
    	padding:0;
    	margin:0;
    }
    
    a {
    	outline:none;
    	border:none;
    }
    
    img, li, a {
    	border:none;
    	padding:0;
    	margin:0;
    }
    
    a:link {
    	color:#C1D1E6;
    }
    
    a:visited {
    	color:#C1D1E6;
    }
    
    .text {
    	font-size:18px;
    }
    
    div#page {
    	width:100%; text-align:center; background:url(http://www.loreaxe.com/main/img/bg.jpg);
    	border:none;
    	margin:0 0 0 0;
    	padding:0 0 0 0;
    }
    
    div#backdrop {
    	width:800px; text-align:center; background-color:#3C4051;  
    	border:thin; border:solid; 
    	border-right-color:#495776;
    	border-top-color:#495776;
    	border-bottom-color:#181D30;
    	border-left-color:#181D30;
    	margin:0 0 0 0;
    	padding:0 0 0 0;
    }
    
    div#linkbanner {
    	text-align:center;
    }
    
    div#home {
    	float:left; width:120px; text-align:left;
    	border:thin; border:solid; 
    	border-right-color:#495776;
    	border-top-color:#495776;
    	border-bottom-color:#181D30;
    	border-left-color:#181D30;
    }
    
    div#contact {
    	float:right; width:120px; text-align:right;
    	border:thin; border:solid; 
    	border-right-color:#495776;
    	border-top-color:#495776;
    	border-bottom-color:#181D30;
    	border-left-color:#181D30;
    }
    
    div#main {
    	margin-left:40px; margin-right:40px;
    }
    
    div#title {
    	text-align:center; 
    	font-size:48px; 
    	padding-bottom:30px; 
    	padding-top:30px;
    	font-weight:bold;
    }
    
    div#prev {
    	float:left; width:120px; text-align:left;
    }
    
    div#next {
    	float:right; width:120px; text-align:right;
    }
    
    div#back {
    	float:left; width:200px; text-align:left;
    }
    
    div#fore {
    	float:right; width:200px; text-align:right;
    }
    
    div#foreback {
    	padding-top:20px;
    }
    
    div#prevnext {
    	text-align:center;
    }
    
    div#image {
    	text-align:center; padding-bottom:5px; padding-top:5px;
    }
    
    div#thumbs {
    	text-align:center; padding-bottom:20px; padding-top:20px;
    }
    
    div#copyright {
    	text-align:center; padding-top:20px; padding-bottom:10px;
    }
    
    img {
    	border:none;
    	padding:0;
    	margin:0;
    }
    
    img.thumbpad {
    	padding:0 5px 0 5px;
    }
    
    
    </style>
    
    
    </head>
    
    <body>
    
    <div id="page">
    	<div id="backdrop">
    		<div id="linkbanner" class="text">
            	<div id="home">
                <a href="http://www.loreaxe.com/index.html"><img src="http://www.loreaxe.com/main/img/home.jpg"/></a>
                </div>
                <div id="contact">
                <a href="http://www.loreaxe.com/contact.html"><img src="http://www.loreaxe.com/main/img/contact.jpg"/></a>
                </div>
                <br/>
                Modeling - 
                <a href="http://www.loreaxe.com/tex/texture_1.html">Texturing</a> - 
                <a href="http://www.loreaxe.com/ani/anim_1.html">Animation/Rigging</a> - 
                <a href="http://www.loreaxe.com/dig/digit_1.html">Digital Painting</a> - 
                <a href="http://www.loreaxe.com/tra/trad_1.html">Traditional</a>
    		</div>
    		<div id="contentbase">
    			
    			<div id="main">
    				<div id="title">
    				'67 VW Microbus
    				</div>
    				<div id="prevnext">
    					<div id="prev">
    					<a href="http://www.loreaxe.com/mod/model_6.html">Previous Model</a>
    					</div>
    					<div id="next">
    					<a href="http://www.loreaxe.com/mod/model_2.html">Next Model</a>
    					</div>
                        (1 of 6)
    				</div>
    				<div id="image">
    				<img src="http://www.loreaxe.com/mod/img/model_1.jpg" />
    				</div>
    				<div id="prevnext">
    					<div id="prev">
    					<a href="http://www.loreaxe.com/mod/model_6.html">Previous Model</a>
    					</div>
    					<div id="next">
    					<a href="http://www.loreaxe.com/mod/model_2.html">Next Model</a>
    					</div>
                        <br />
                    <div id="foreback">
    					<div id="back">
    					
    					</div>					
    					<div id="fore">
    					<a href="http://www.loreaxe.com/tex/texture_1.html">Textures for this Model</a>
    					</div>
                        <br />
    				<div id="thumbs">		
                    <img src="http://www.loreaxe.com/mod/thumb/model_thumb_1.jpg" width="80px" height="80px" alt="VW Microbus" class="thumbpad">        
                    <a href="http://www.loreaxe.com/mod/model_2.html">
                    <img src="http://www.loreaxe.com/mod/thumb/model_thumb_2.jpg" width="80px" height="80px" alt="Private Eye" class="thumbpad">
                  	</a>
                    <a href="http://www.loreaxe.com/mod/model_3.html">
                    <img src="http://www.loreaxe.com/mod/thumb/model_thumb_3.jpg" width="80px" height="80px" alt="BMW 120i" class="thumbpad">
                    </a>
                    <a href="http://www.loreaxe.com/mod/model_4.html">
                    <img src="http://www.loreaxe.com/mod/thumb/model_thumb_4.jpg" width="80px" height="80px" alt="Garage" class="thumbpad">
                    </a>
                    <a href="http://www.loreaxe.com/mod/model_5.html">
                    <img src="http://www.loreaxe.com/mod/thumb/model_thumb_5.jpg" width="80px" height="80px" alt="Mental Hospital" class="thumbpad">
                    </a> 
                    <a href="http://www.loreaxe.com/mod/model_6.html">
                    <img src="http://www.loreaxe.com/mod/thumb/model_thumb_6.jpg" width="80px" height="80px" alt="Head Sculpt" class="thumbpad">
                    </a>
                </div>
    
    				<div id="copyright">
    				Copyright © 2008 Eric Cloutier
    				</div>
    			</div>
    			
    		</div>
    	</div>
    </div>
    
    </body>
    </html>
    
    Thank you
    Last edited by Dudecles; 01-12-2009 at 05:53 PM. Reason: problem resolved

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Quote Originally Posted by Dudecles View Post
    margin:0 auto; fixed it... no idea why.
    MSIE has two internal modes: "The person who wrote this page is an idiot" and "hey, this guy knows what he's doing." The tip off is the very top of the page. You have no proper DOCTYPE and so MSIE guesses, incorrectly, that you are an idiot and presumes to determine what you really want. Build you page around the following template:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title></title>
      </head>
      <body>
    
      </body>
    </html>
    Oddy enough, that stuff that most people think are optional--the HTML, HEAD and BODY tags--are completely optional while the things that people think are just fluff--the DOCTYPE, TITLE and Content-Type--are required.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles