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 7 of 7
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,457
    Thanks
    15
    Thanked 0 Times in 0 Posts

    page centering in ie

    can someone please advise as to how I can center this in ie?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>d</title>
    <style>
    
    /* CSS Document */
    
    body{
     
    padding:0px;
    
    }
    #outer{
    margin:auto;
    width:750px;
    }
    #mainhome{
    	font-family: Arial, Helvetica, sans-serif;
    	background-image: url(images/home_page_background.jpg);
    	background-repeat: no-repeat;
    	background-position: right top;
    	width:750px;
    	height:1082px;
    position: absolute;
    /*   right: 0;*/
       top: 0;
    
    
    
    }
    .linkguest{
    position: absolute;
       right: 31;
       top: 218;
    }
    
    .linkdonor{
    position: absolute;
       right: 31;
       top: 319;
    }
    .linkparent{
    position: absolute;
       right: 31;
       top: 426;
    }
    
    
    .linkcaregiver{
    position: absolute;
       right: 31;
       top: 526;
    }
    
    
    #news{
    position: absolute;
       right: 151;
       top: 319;
    }
    #news img{
    float:right;
    }
    #newstb{
    background:#ffffff;
    width:472px;
    height:249px;
    overflow: auto;
    position: relative;
    scrollbar-base-color:#FDC6CC;
    text-align:right;
    float:right;
    }
    
    
    
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id=outer>
    <div  id=mainhome>
      <div class=linkguest><img src="images/guest.gif" alt="Guest" width="103" height="101" border="0"></div>
    <div class=linkdonor><img src="images/donor.gif" alt="Guest" width="106" height="109" border="0"></div>
    <div class=linkparent><img src="images/parent.gif" alt="Guest" width="106" height="104" border="0"></div>
    <div class=linkcaregiver><img src="images/caregiver.gif" alt="Guest" width="99" height="103" border="0"></div>
      <div id=news> 
      <img src="images/news.gif" width="229" height="37" border="0"><br>
          <div id=newstb> this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
            this is dummy text <bR>
            will be pulling form the db<br>
          </div>
      </div>
    
     </div>
     </div>
    </body>
    </html>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Yes, use a full and complete doctype.

    And note: strict is the only option! Transitional equals “sloppy” and why write sloppy code if you cn do it right in the first place? (also “valid” sloppy code is just a weak excuse)

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,457
    Thanks
    15
    Thanked 0 Times in 0 Posts
    ok - i don't really like using strict as I feel it limits me.

    now what's the right positioning to use?

    I want mainhome with it's background in the middle and all otehr div's positioned according to main home

    do i use position:relative or absolute

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Well, using a strict doctype does the complete opposite! To build a good web site, semantically it's the key! And it's more likely that you will be able to show the same page on each of the different browsers! At the moment IE will be rendering in Quirks mode because of your incomplete doctype... I suggest, as Stephan said, that you switch to a strict doctype and never go back because you'll pass validation with sloppy code, and errors that could cause problems with other browsers.

    The best methods for positioning are relative and floats, but I'd swear by the floats method because it really is simple to do. If you start by adding a proper doctype the code you have now in #outer should be sufficient to center your page in all major browsers. I'd consider adding overflow: hidden; to it as well if you are considering using floats.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #5
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts

    Centering a div on a page

    This is the solution I always use. I believe it came from Stu Nicholls.

    In the head:
    Code:
    <!--[if lte IE 6]>
       <style type="text/css">
       /*<![CDATA[*/ 
    html {overflow-x:auto; overflow-y:hidden;}
       /*]]>*/
       </style>
    <![endif]-->
    In the main body:
    Code:
    <div id="Main">
    And in the CSS:
    Code:
    #Main { margin: 0px auto; display:block; width:700px;
                padding:2em;  text-align: left; }
    This works in FF, Safari and IE6 and IE7.

    John Rostron

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by esthera View Post
    i don't really like using strict as I feel it limits me.
    At the very least, you should add a system identifier (URL) to the end of your document type declaration. Look at the table on Wikipedia [1] and you will note that major browsers will display your page in quirks mode when the system identifier is missing while the HTML 4.01 Transitional declaration is being used. This is primarily relevant because Internet Explorer ignores the centering behavior of the margin: auto declaration when in quirks mode.

    1. http://en.wikipedia.org/wiki/Quirks_...document_types
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    New Coder
    Join Date
    Nov 2003
    Location
    San Francisco
    Posts
    45
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Another solution worth a peek: http://bluerobot.com/web/css/center1.html


  •  

    Posting Permissions

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