SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Divs won't align in IE6

    Hi all, I'm working on a design, which aims at validating, and am having trouble getting some divs to line up flush in IE6. It works fine in Firefox 1.5 (both on pc). I've attached screengrabs of IE6 and FF. I wonder if anyone can offer any help?

    There's two divs, both the same, with a repeating background image (the green diagonal pattern). <div class="band"></div> In IE6, there's a 6 pixel margin below both the band divs. I've moved the divs around, and wherever the band class goes, there's always this 6 pixel margin underneath, so I believe the problem lies with this div. I tried it with an image which was the width of the div, so it would seem it is nothing to do with repeating a small image across the div (the first time I've done this).

    The css for this div is:

    .band {
    width: 740px;
    height: 7px;
    background: url("../images/home/band_back.gif") no-repeat;
    }


    The page can be found at:
    http://www.ae-di.com/

    The style sheet is at:
    http://www.ae-di.com/stylesheets/main.css

    I'd be really grateful for any help with this. I've been looking at it and trying stuff, but can't see what is going wrong. I haven't been able to view the page in IE5.5 and 5 - can anyone tell me if the same error is there?

    many thanks in advance,

    karmadungyu

  2. #2
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here's the screenshots!

    ugh .... too tired, forgot to attach :-(
    Attached Images Attached Images
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  3. #3
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Same problem in IE5.5 and IE5.01 pc

    Hi, I've been able to take a look at the page in IE5.5 and IE5.01 pc and the same problem appears there. (there's also another problem with the menu items spilling out of their containing div which I'll have to fix).

    Can anyone help with solving this unexplained gap between divs in IE?

    many thanks in advance,

    Karmadungyu
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness

  4. #4
    SitePoint Zealot KarmaDungyu's Avatar
    Join Date
    May 2003
    Location
    Colchester
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solved (via another thread)

    Hi, I've found the problem! I have been trawling through previous posts, and other sites, and found a solution on this one, courtesy of Paul O'B !

    The problem is (in Paul's words):

    Issue 2 is the fact that ie won't render an element less than the current font-size unless overflowLhidden is used or you set the font-size to zero.
    http://www.sitepoint.com/forums/show...vs+extra+space


    That was my problem. The div is only 7px high, and my overall text size is set to 11px. So the div gained some extra pixels below it as a result!

    Thanks Paul!

    * I've now made the necessary change in the css, so you will no longer see the problem at the live site. (I still need to address the menu bar issue in IE pc) *

    Karmadungyu
    Website Design : Chotrul Web Design and SEO

    Dharma Blog : Luminous Emptiness


Bookmarks

Posting Permissions

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