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 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE Problems, Again

    Once again, everything in Firefox looks right. It seems like IE6 and 7 are having problems with my divs. It looks like a problem with my definition lists, the distance between the <dt>'s and the <dd>'s is so much larger in IE than in FF and I think it's stretching the divs. How can I decrease the difference so the divs will line back up? Also in IE, the definition list for general interests doesn't line up like it does in FF.

    http://www.boozards.com/home.php

    Thanks

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    At least one reason why your page is breaking in IE6 is because of the IE6 double float margin bug.

    You'll need to fix that first. Read the article which also contains the fix which is to use display: inline to the affected floats.

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, awesome. That fixed the gap between the two about me and stats boxes I had. However, the divs containing the definition lists are still oversized and stretching larger than their div container. It's only the divs with the definition lists that do this (comments, about me, fast stats, and general interests). Still that gab between the <dt>'s and <dd>'s. Also the <dt>'s and <dd>'s still don't line up in the interests in IE6 or IE7.

    Thanks

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by aspekt9 View Post
    Ok, awesome. That fixed the gap between the two about me and stats boxes I had. However, the divs containing the definition lists are still oversized and stretching larger than their div container.
    Same bug. Look carefully for all left margins on left floats. Also look carefully for all right margins on right floats.

    Example: Here you need to add the red part because you have a left margin of 6em on a left floated element.
    Code:
    .stats dd
    {
    	float:left;
    	margin:-1.2em 0 0 6em;
    	display: inline; /* IE6 double margin bug fix */
    }

  • #5
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, that fixed all of the double float bugs and they're all the proper size. Now, for some reason all the blocks on the left look like they're set to clear everything on the right. But it's only in IE6 that this happens. Also, the <dt>'s and <dd>'s in the general interests box still don't line up in IE.

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Try to use this and you'll see what is wrong.
    Code:
    .homeblockcontainer
    {
    	margin-top:20px;
    	width:284px;
    	float:left;
    	display:inline;
    	background: green;
    }
    
    .homecontentcontainer
    {
    	width:600px;
    	float:right;
    	float: left;
    	background: red;
    }
    You need to adjust the width for each block.

  • #7
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Awesome, so that fixed that problem. Now what about the <dt>'s and <dd>'s not lining up? Is it a matter of the width sizes for each?

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by aspekt9 View Post
    Now what about the <dt>'s and <dd>'s not lining up? Is it a matter of the width sizes for each?
    Hmm.. Interesting. It must be an IE bug. Not sure which one though. I think I will take a look at it later. The floats are being placed too high up.

    For now, to fix your problem, instead of this:
    Code:
    #interests dd
    {
    	float:left;
    	margin:-1.2em 0 0 6em;
    	display: inline;
    }
    use this
    Code:
    #interests dd
    {
    	float:left;
    	margin:-1.2em 0 0 6em;
    	display: inline;
    	clear: left;
    	width: 22em;
    }


  •  

    Posting Permissions

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