SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 5 and 6, columns

    It's been awhile. Can anyone help with these questions for this page?

    1. Why is the content on the page (except the menu) jumping down in IE 5 and 6?
    2. I can't figure out why I am not able to make the columns wider even though the large photo above the columns is much wider. I add even 2 px to each column and the 3rd column jumps to the next line. I checked margins, padding, etc.
    3. Lastly, I tried adding this to #columns but the bottom dotted line won't show and the top starts below the titles in 3 columns instead of above. Wanted the two lines to be right above and below the columns outlining them.

      border-top:1px dotted #999;
      border-bottom:1px dotted #999;


    Thanks sooo much!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Saxxo. Welcome to the forums.

    Why is the content on the page (except the menu) jumping down in IE 5 and 6?
    There will be a technical answer to that question, but the layman's answer is—Who cares? Nobody uses IE5 any more, and IE6 has something like a 0.4% userbase, mainly because of China. (I can't answer your question technically, but truly, I wouldn't worry about those old, dead browsers. We've all moved on.)

    I can't figure out why I am not able to make the columns wider
    Your container has a fixed width:

    Code:
    #rightcolumn {
    float: right;
    margin: 0px 0px 50px 0px;
    padding: 10px;
    width: 678px;
    display: inline;
    }
    That sets the limit you can work within.

    Lastly, I tried adding this to #columns but the bottom dotted line won't show ...
    Try

    Code:
    #columns {
      overflow: hidden;
    }
    That will make the columns div wrap around the floated divs inside it (which otherwise hang out of it). Also remove the height setting on the #columns div, as you should never set heights like this.

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph! I am updating the page that someone else developed and didn't see that. Why is the image at the top I added doing okay? It's 708 px.

    Edit: I just changed the top photo to 678 px but it was working with larger width.

    Let me try your solution for the dotted line. Cool.

    Oh....about the columns, if it's 678, the columns should be able to be 220 or so each but it won't go above 210.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Saxxo View Post
    Why is the image at the top I added doing okay? It's 708 px.
    The image was just hanging out of the container, as there's nowhere else for it to go when it's too wide.

    if it's 678, the columns should be able to be 220 or so each but it won't go above 210.
    You have 10px of right padding on each column, which adds to the overall width, so with each column at 210px wide, your overall width is 660px (210 + 10 + 210 + 10 + 210 + 10). So you have to take padding into account when increasing the width of columns.

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Ralph. I swear I put them all at 215 and it wouldn't work but just did 218 on all three and it's perfect. Thank you!


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
  •