SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Having a few layout problems in IE6

    I am having some layout problems in IE 6 and earlier.

    1. I can't get the entire page centered. I tried putting text-align : center on the body and margins at auto and text-align : left on the wrapper, but it doesn't seem to work.
    2. There seems to be a padding issue on the left side of the wrapper. There is extra padding on the left, and I can't figure out how to get rid of it.
    3. Everything in the content div seems to be pushed down about 100px. I tried clearing some floats, but that didn't seem to do anything.


    Here is the page. I created an extra stylesheet for this, as well, which is below.

    Code:
    body, html {margin : 0 auto; padding : 0; background-color : #000; color : #FFF;}
    body {min-width : 800px; text-align : center;}
    /* First Layer */
    #container {width : 800px; margin-left : auto; margin-right : auto; margin-top : 5px; margin-bottom : 5px; padding : 0; background-color : #B1B1B1; color : #FFF; border-left : 1px solid #000; border-right : 1px solid #000; text-align : left;}
    #header {float : left; width : 790px; height : 167px; margin : 5px;}
    #navbar {float : left; width : 800px; height : 40px; margin : 0 auto; padding : 0; background-color : #DC9427; color : #000; text-align : center;}
    #content {float : left; margin : 5px; padding : 0; width : 790px; min-height : 618px; background : url("../pics/background_content.jpg") no-repeat center center #000; color : #000; font-family : Verdana, Arial, sans-serif; font-size : 0.8em;}
    #vertnav {float : left; width : 168px; min-height : 604px; margin : 6px; background : url("../pics/background_vertnav.png") repeat center center; font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.6em;}
    #main {float : left; width : 595px; min-height : 604px; max-height : 604px; margin : 6px 0 5px 0; padding-right : 10px; overflow : auto;}
    #footer {float : left; width : 790px; margin : 0 auto; padding : 10px 5px; text-align : center; background-color : #B1B1B1; color : #000; font-family : Verdana, Arial, sans-serif; font-size : 0.6em;}
    /* Helpers */
    .clearfix:after {content : "."; display : block; height : 0; clear : both; visibility : hidden;}
    .clearfix {display : inline;}
    /* mac hide \*/
    * html .clearfix {height : 1%;}
    .clearfix {display : block;}
    /* End hide */
    .left {float : left;}
    .right {float : right;}
    img {border : 0;}
    #main img.left {margin : 5px 5px 5px 0; border : 1px solid #000;}
    #main img.right {margin : 5px 0 5px 5px; border : 1px solid #000;}
    /* Navbar */
    #navbar ul {list-style : none; margin : 0 auto; padding : 5px 0 0 0;}
    #navbar ul li {display : inline; padding : 0 10px;}
    #navbar ul li a {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.6em; color : #000; text-decoration : none;}
    #navbar ul li a:hover, #navbar ul li.focus a {color : #FFF; text-decoration : none;}
    #vertnav ul {list-style : none; margin : 0; padding : 0;}
    #vertnav ul li {margin : 15px 5px;}
    #vertnav ul li a {color : #000; text-decoration : none;}
    #vertnav ul li a:hover, #vertnav ul li a:active, #vertnav ul li.focus a {color : #FFF; text-decoration : none;}
    /* Headers */
    h1 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 2.9em; font-weight : normal; margin : 0; padding : 0; display : block; width : 100%; border-bottom : 1px solid #000;}
    h2 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 2.0em; font-weight : normal; margin : 5px 0; padding : 5px; display : block; width : 98%; background : url("../pics/background_vertnav.png") repeat center center; border : 1px solid #000;}
    h3 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.5em; font-weight : normal; margin : 0; padding : 0;}
    h4 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.0em;}
    /* Footer */
    #footer p {margin : 0; padding : 0;}
    #footer a {color : #000;}
    #footer a:hover, #footer a:active {text-decoration : none}
    #footer a:visited {color : #4D4D4D;}
    /* Lists */
    #main dd {margin : 10px 0; padding : 0;}
    /* Links and Images */
    #main a {color : #000;}
    #main a:hover, #main a:active {text-decoration : none;}
    #main a:visited {color : #4D4D4D;}
    p.caption {font-family : Verdana, Arial, sans-serif; font-size : 0.8em;}
    /* Text */
    .subscript {font-size : 0.8em;}
    Any help would be appreciated!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    1)
    Try replacing
    Code:
    body, html {margin : 0 auto; padding : 0; background-color : #000; color : #FFF;}
    body {min-width : 800px; text-align : center;}
    with
    Code:
    html, body {
      width: 800px;
      margin: 0 auto; 
      padding: 0; 
      background-color: #000;
      color: #FFF;
      text-align: center;
    }

  3. #3
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Okay, now I have it pretty good, except in Mozilla, the content is pushing through the footer div. I have cleared everything, but it doesn't seem to be working. Any advice?

    Here is the site, and here is the css...

    Code:
    body, html {margin : 0 auto; padding : 0; background-color : #000; color : #FFF; text-align : center;}
    body {min-width : 800px;}
    /* First Layer */
    #container {width : 800px; margin : 5px auto; padding : 0; background-color : #B1B1B1; color : #FFF; border-left : 1px solid #000; border-right : 1px solid #000; text-align : left;}
    #header {float : left; width : 790px; height : 167px; margin : 5px;}
    #navbar {float : left; width : 800px; height : 40px; margin : 0 auto; padding : 0; background-color : #DC9427; color : #000; text-align : center;}
    #content {float : left; margin : 5px; padding : 0; width : 790px; min-height : 618px; background : url("../pics/background_content.jpg") repeat-y top center #A04030; color : #000; font-family : Verdana, Arial, sans-serif; font-size : 0.8em;}
    #vertnav {float : left; width : 168px; min-height : 604px; margin : 6px; background : url("../pics/background_vertnav.png") repeat center center ; font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.6em;}
    #main {float : left; width : 595px; min-height : 604px; max-height : 604px; margin : 6px 0 5px 0; padding-right : 10px;}
    #footer {clear : both; float : left; width : 790px; margin : 0 auto; padding : 10px 5px; text-align : center; background-color : #B1B1B1; color : #000; font-family : Verdana, Arial, sans-serif; font-size : 0.6em;}
    /* Helpers */
    .clearfix:after {content : "."; display : block; height : 0; clear : both; visibility : hidden;}
    .clearfix {display : inline;}
    /* mac hide \*/
    * html .clearfix {height : 1%;}
    .clearfix {display : block;}
    /* End hide */
    .left {float : left;}
    .right {float : right;}
    img {border : 0;}
    #main img.left {margin : 5px 5px 5px 0; border : 1px solid #000;}
    #main img.right {margin : 5px 0 5px 5px; border : 1px solid #000;}
    /* Navbar */
    #navbar ul {list-style : none; margin : 0 auto; padding : 5px 0 0 0;}
    #navbar ul li {display : inline; padding : 0 10px;}
    #navbar ul li a {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.6em; color : #000; text-decoration : none;}
    #navbar ul li a:hover, #navbar ul li.focus a {color : #FFF; text-decoration : none;}
    #vertnav ul {list-style : none; margin : 0; padding : 0;}
    #vertnav ul li {margin : 15px 5px;}
    #vertnav ul li a {color : #000; text-decoration : none;}
    #vertnav ul li a:hover, #vertnav ul li a:active, #vertnav ul li.focus a {color : #FFF; text-decoration : none;}
    /* Headers */
    h1 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 2.9em; font-weight : normal; margin : 0; padding : 0; display : block; width : 100%; border-bottom : 1px solid #000;}
    h2 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 2.0em; font-weight : normal; margin : 5px 0; padding : 5px; display : block; width : 98%; background : url("../pics/background_vertnav.png") repeat center center; border : 1px solid #000;}
    h3 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.5em; font-weight : normal; margin : 0; padding : 0;}
    h4 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.0em;}
    /* Footer */
    #footer p {margin : 0; padding : 0;}
    #footer a {color : #000;}
    #footer a:hover, #footer a:active {text-decoration : none}
    #footer a:visited {color : #4D4D4D;}
    /* Lists */
    #main dd {margin : 10px 0; padding : 0;}
    /* Links and Images */
    #main a {color : #000;}
    #main a:hover, #main a:active {text-decoration : none;}
    #main a:visited {color : #4D4D4D;}
    p.caption {font-family : Verdana, Arial, sans-serif; font-size : 0.8em;}
    /* Text */
    .subscript {font-size : 0.8em;}


Bookmarks

Posting Permissions

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