#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2006
    Location
    England
    Posts
    54
    Rep Power
    13

    Floating to the right in Internet Explorer...


    Hi, for reasons unknown my template is being displayed towards the far right of the browser in Internet Explorer...It works fine in Firefox (page is centered) but I am rather confused as to why it is being displayed so strangely in IE? Help would be appreciated.

    Site: www dot 21healthconsult dot com

    CSS:

    Code:
        /* Generic Selectors */ 
    
       div.wrapper {
       height: 100%;
       width: 950px;
       text-align: center;
       margin-left: auto;
       margin-right: auto;
       }
    
        body { 
    
        font-family: Georgia, "Times New Roman", Times, serif;
    
        font-size: 14px; 
    
        color: #000000;
    
        background-color: #FFFFFF; 
    
        } 
    
        p { 
    
        width: 100%; 
        text-align: left;
    
        }
    
        h1 { 
    
        font-family: Georgia, "Times New Roman", Times, serif; 
    
        font-size: 18px; 
    
        font-weight: bold; 
    
        color: #000000; 
    
        } 
    
    	
        h2 { 
    
        font-family: Georgia, "Times New Roman", Times, serif; 
    
        font-size: 14px;
    
        font-weight: none; 
    
        color: #000000; 
    
        border-bottom: 1px solid #E0E0E0; 
    
        } 
    
    
    
     
        /**************** Pseudo classes ****************/ 
    
        :link { 
    
        color: #0066FF; 
    
        text-decoration: none; 
    
        font-weight: none; 
    
        } 
    
    
      li {
    
          list-style-type: disc; 
    
          line-height: 150%; 
    
          } 
    
    
        li :link { 
    
        color: #0066FF; 
    
        text-decoration: none; 
    
        font-weight: bold; 
    
        } 
    
        
    	:visited { 
    
        color: #0066FF;
    
        text-decoration: none; 
    
        font-weight: none; 
    
        } 
    
    
        li :visited { 
    
        color: #0066FF; 
    
        text-decoration: none; 
    
        font-weight: bold; 
    
        } 
    
        :hover {
    
        color: #0066FF;
    
        padding-bottom: 5px; 
    
        font-weight: none;
    
        text-decoration: underline; 
    
        } 
    
        li :hover { 
    
        display: block; 
    
        color: rgb(0, 96, 255); 
    
        padding-bottom: 5px; 
    
        font-weight: bold; 
    
        border-bottom-width: 1px; 
    
        border-bottom-style: solid; 
    
        border-bottom-color: #C6EC8C; 
    
        } 
    
    
       :active { 
    
        color: #0066FF; 
    
        font-weight: none; 
    
    }
       
       
    
    
        /************************* ID's *************************/ 
    
    
        #header {
    
        position: absolute;
    
        width: 900px;
    
        height: 50px;
    
        margin: 0;
    
        margin-top: 15px;
    
        padding: 0 0 50px 50px; /*top right bottom left*/
    
        text-align: left;
    
        }
    
        #t_navigation { 
    
        position: absolute;
    
        z-index: 10; 
    
        width: 900px; 
    
        height: 50px; 
    
        margin: 0; 
    
        margin-top: 48px; 
    
        padding: 0 0 50px 300px; /*top right bottom left*/
    
        font-weight: normal; 
    
        font-size: 11;
    
        text-align: left;
    
        } 
    
        #search_frame {
    
        position: absolute;
    
        z-index: 10; 
    
        margin: 0; 
    
        margin-top: 15px; 
    
        padding: 0 0 0 300px; /*top right bottom left*/
    
        width: 600px;
    
        }
    
    #search_box {
    background-color: #F0F0F0; 
    width: 600px;
    height: 28px;
    }
    
    #search_box #s {
    float: left;
    padding: 0;
    margin: 6px 0 0 0;
    border: 0;
    width: 569px;
    background-color: #F0F0F0; 
    font-color: #000000;
    }
    
    #search_box #go {
    width: 27px;
    margin: 3px 4px 0 0;
    font-color: #000000;
    float: right;
    }
    
        #l_navigation { 
    
        position: absolute;
    
        z-index: 10; 
    
        width: 210px; 
    
        height: 600px; 
    
        margin: 0; 
    
        margin-top: 80px; 
    
        padding: 0 0 50px 50px; /*top right bottom left*/
    
        border-right: 1px solid #E0E0E0; 
    
        font-weight: normal; 
    
        text-align: left;
    
        } 
    
       
        #centerDoc { 
    
        position: absolute; 
    
        z-index: 15; 
    
        padding: 0 0 50px 300px; /*top right bottom left*/
    
        margin-top: 80px; 
        
        width: 900px;
    
        text-align: left;
    
        }
  2. #2
  3. Pigmentally Challenged
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2005
    Location
    Tennessee, USA
    Posts
    667
    Rep Power
    322
    Hi RJT,

    Delete text-align: center; from the div wrapper, it isn't really aligning center in any browser anyway, just looks like it is in 1024x768 resolution. Your friends at the W3C will help you work out the rest of the problems. Markup Validator CSS Validator The CSS Validator just reads the form.css and not the ie_form.css sheet though. Make a test page that only links to ie_form.css for help with that one.

    HTH
    Last edited by carrie_a_tune; October 11th, 2009 at 02:15 PM.
    "Show me a sane man and I will cure him for you." ~ Carl Jung
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2009
    Posts
    205
    Rep Power
    33
    instead of text align center put margin: 0px auto 0px auto;

IMN logo majestic logo threadwatch logo seochat tools logo