Results 1 to 2 of 2

Thread: MSIE Issue - DIV Overflow?

  1. #1
    Join Date
    Nov 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default MSIE Issue - DIV Overflow?

    Not sure how to describe this problem.
    Everything worked on Firefox, Safari, Camino but not IE.

    I using Mathew James Taylor's "The Perfect 3 Column Liquid Layout"
    http://matthewjamestaylor.com/blog/perfect-3-column.htm

    Then wrapped the whole thing in a 1024px centered DIV

    You can see my problem here:
    http://www.psgga.com/psg/index.html

    I colored the DIV that won't stay contained: RED. You can only see the problem in IE though.

    Here is the CSS. I've looked at so much I can no longer see it, if you know what I mean.

    /* column container */
    .colmask {
    clear:both;
    float: left;
    width: 100%; /* width of page */
    overflow: hidden;
    background-color: #ffffff;
    color: #333333; }


    /* common column settings */

    .colright,
    .colmid,
    .colleft {
    float:left;
    width:100%; /* width of page */
    position:relative;
    background-image: none;
    background-color: #ffffff;
    background-repeat: no-repeat; }

    .col1,
    .col2,
    .col3 {
    float:left;
    position:relative;
    padding: 1em 0em 1em 0em; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */
    overflow:hidden;
    }

    /* 3 Column settings */

    .threecol {
    background: #ffffff;/* right column background colour */
    }

    .threecol .colmid {
    right:25%; /* width of the right column */
    background: #ffffff; /* center column background colour */
    }

    .threecol .colleft {
    right:50%; /* width of the middle column */
    background: #ff0000; /* left column background colour */
    }

    .threecol .col1 {
    width:46%; /* width of center column content (column width minus padding on either side) */
    left:102%; /* 100% plus left padding of center column */
    background-color: #ffffff;
    }

    .col1 p{
    padding-left: 2em;
    padding-right: 2em; }

    .col1 h1 {;
    font-size: 1.6em;
    font-weight:normal;
    color: #990000;
    font-style: italic;
    text-align: center;
    padding-top: 1em; }

    .col1 p {
    text-align: justify; }


    .threecol .col2 {
    width:21%; /* Width of left column content (column width minus padding on either side) */
    left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
    background-color: #ffffff;
    }

    .col2 p {
    padding-left: 1em;
    font-size: .9em;
    text-align: right; }

    .col2 h1 {
    text-align: right;
    padding-left: 1em;
    }

    .col2 h2 {
    text-align: right;
    padding-left: 1em;
    font-weight: 400;
    font-size: 1.4em;
    margin-bottom: -.1em; }

    .col2 h3 {
    text-align: right;
    padding-left: 1em;
    }

    .col2 img {
    float: right;
    padding-bottom: 3.5em; }

    .threecol .col3 {
    width:21%; /* Width of right column content (column width minus padding on either side) */
    left:85%; /* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
    background-color: #ffffff; }

    .col3 p{
    padding-right: 0em;
    font-size: .9em; }

    .col3 h1 {
    text-align: left;
    }

    .col3 h2 {
    text-align: left;
    padding-right: 0em; }

    .col3 h3 {
    text-align: left;
    }

  2. #2
    Join Date
    Nov 2007
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Float & Width must have been redundant

    .colright,
    .colmid,
    .colleft {

    float:left; /*TOOK Out the FLOAT and the BOX was no longer broke*/
    width:100%; /* THIS MIGHT HAVE BEEN REDUNDANT since I wrapped the whole col structure */


    position:relative;
    background-image: none;
    background-color: #ffffff;
    background-repeat: no-repeat; }

    Works Now.

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
  •