Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Margin and vertical spacing problems in IE6!

    The site looks perfect in FF, but stupid IE destroys it.

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

    Problem:
    -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
    -

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    on your right side navigation, on all the #space1, 2, 3, etc try:

    Code:
    #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:
    Code:
    #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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Jun 2005
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes! it all worked, thank you very much. I hate these cross-browser conflicts. Thanks for helping me!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •