Falls apart in IE6, IE5.5 - must fix!

[Cygnus X-1]

Hello,
Should be a simple fix I think for someone with a little more css experience than me. Just have 3 image links displayed horizontally beside each other.

html:

<div>        
        <div class="column3-unit-left">
          <p><a href="#"><img src="./img/image.jpg"/></a></p> 
        </div>
        <div class="column3-unit-middle">
          <p><a href="#"><img src="./img/image2.jpg"/></a></p>
        </div>
        <div class="column3-unit-right">
          <p><a href="#"><img src="./img/image3.jpg"/></a></p>
        </div>                       
        </div>

and css looks like this:

.column3-unit-left {float:left; width:175px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:10px;}
.column3-unit-middle {float:left; width:175px;  margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:78px;}
.column3-unit-right {float:left; width:175px;  margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:78px;}

I know this css code isn't quite right and I'm trying to edit this code which is from a template I'm modifying. It does, however appear just fine in IE7 and Firefox. But in IE6, the last image displays on the next line, and in IE5.5 it's really really messed up...

Can anyone help out? Thanks.

[rabbitsfeat]

Hard to tell from that code snippet but looks like it could be the double-margin float bug.

Try adding display: inline to each of those 3 css rules you have there.

Everytime you float an element with horizontal margins, you should automatically set the display property to inline. Otherwise IE 6 and below on windows will double all the margins. Which is probably why your third image is dropping down, because there is no longer enough room for it to be on the same line as the others.

Hope this fixes your problem.

[Cygnus X-1]

Thanks for your reply. If I include the 'display: inline' code, would I delete other code in its' place?

I've edited it to this:

.column3-unit-left {float:left; display: inline; padding-left: 20px; width:220px; margin-bottom:10px;}

Again, this works great in IE and Firefox, but in IE6 it is still putting that extra spacing between the elements that you talked about. And I won't even start with the mess IE5.5 creates.

Perhaps the template I'm editing is poorly coded in the first place. I'd start from scratch if I had the time and know-how.

[rabbitsfeat]

Ok, I've just mocked up your example and tested it and seems to be working to me. A few questions though:

Have you specified the dimensions of your images like this:

<img src="./img/image.jpg" width="150" height="200" />

You should do that anyway... see if that helps.

Also what are the dimensions of your outer div that wraps around the 3 floats?

What size are your images, i.e. width and height.

If you get back to me with this info I'll be happy to help you more to resolve your issue.

[Dan Schulz]

I'd also use an unordered list and plain text (with an empty SPAN adjacent to the text) instead of DIV containers and actual images as well.

You can see an example here: http://www.dan-schulz.com/for-others.../template.html (also contains a rollover state and 100% docuemnt height setup if you're interested as well)

And yes, the directory is unlocked: http://www.dan-schulz.com/for-others/ethics/

[Cygnus X-1]

rabbitsfeat, I added dimensions to img src (each image is 220 x 200). The div they are contained in is 710 px. I did have to change the div width as you are right, that seemed to be a factor and I adjusted some padding.

I now have it appearing properly in IE7 and IE6. In IE 5.5 it looks a lot better too, however the main problem is that the menu items in IE 5.5 appear vertically instead of horizontally. It is a css menu with drop down items and Perhaps there is a simple fix for this.

For some reason now, there is no white background in my content region. I just see the background image. Not sure what happened a long the way. I should have kept saving a backup css. Seems like everything I touch breaks

css:

 body {font-size:62.5%; background: transparent url(../img/bg.png) top left repeat; font-family:verdana,arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/
.page-container {width:770px; margin:0px auto; margin-top:10px; margin-bottom:10px; border:solid 1px rgb(150,150,150); font-size:1.0em;}
.main {clear:both; width:770px; padding-bottom:30px; background:transparent url(../img/bg_main_withoutnav.jpg) repeat-y;}
.main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:710px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

I don't think I changed anything, so not sure what happened there. bg_main_withoutnav.jpg is just a 770 x 5 image with shaded sides.

Dan, thanks for the links to that sample. That is very helpful for me as an example of the better way to go, and I am going to play with that to understand it and see if I can incorporate it.