View Full Version : Margin and vertical spacing problems in IE6!

11-01-2006, 12:12 AM
The site looks perfect in FF, but stupid IE destroys it.

Here's the link to the site: http://splatterbyte.freehostia.com/

-The three columns in the black area are suppose to be in the center as they rightfully appear in FF and IE7, but seem to go all the way to the right in IE6.

-This is a problem with both IE6 and IE7, the red buttons have too much vertical space in between them. They appear perfect in FF though.

What I have tried:
-For the buttons i tried making the line height 0 and it did help a little and shortened the gap, but not the way i wanted like it appears in FF. I read something about making overflow:hidden, but i dont see how that would work.

-For the columns in the black area, I experimented with taking out the margin for the column all the way on the left and the other 2 columns fit right into their positions, but then the left most column hugs the left edge of the site.

Whew, I bet anyone would hate to read all that, but if you do please try and help me. I will take any suggestions if you have them as well. Thank You in advance

11-01-2006, 01:28 AM
on your right side navigation, on all the #space1, 2, 3, etc try:

#space1 {
width: 221px;
height: 9px;
line-height: 0px;
font-size: 0px;

IE likes both the line-height and font-size: set to 0px

why are you suing all those divs though? a list would be real easy to do.

anyways on the floats try:

#anim1 {
width: 190px;
height: 262px;
float: left;
text-align: justify;
margin: 0px 0px 0px 48px;
display: inline;

and see if that works. IE likes to double margins on floats. I thunk they fixed that issue on IE7 though.

11-01-2006, 07:03 AM
Yes! it all worked, thank you very much. I hate these cross-browser conflicts. Thanks for helping me!