IE 5 and 6, columns

HTML & CSS
1

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?
  3. 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.
  5. 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

Hi Saxxo. Welcome to the forums. :slight_smile:

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:

#rightcolumn {
float: right;
margin: 0px 0px 50px 0px;
padding: 10px;
[COLOR="#FF0000"]width: 678px;[/COLOR]
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

#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

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

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

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!

6