Problem with alignment of divs in IE6

Discussion in 'CSS' started by Nix Wanning, May 14, 2007.

  1. #1
    Hi guys,

    I'm developing a site for a university society, which appears fine in both IE7 and FF 2 after much bug fixing, but it gets screwed up in IE6.

    The problems -
    • IE6 likes adding spaces in between my divs.
    • IE6 turned the line div from 3 pixels to about 10 pixels... it has also magnified a lot of width/heights of other divs
    • IE6 seems to not be able to align my divs correctly where I want them
    • Some of my images are stretched vertically on IE6

    Again, none of these problems appear on IE7, FF2 or even FF1.5... It's only on IE6 (which happens to be the most used browser to view my website).

    If anyone can help, I will be greatly appreciative.

    CSS: http://www.sascurtin.com/wp-content/themes/sasv1/style.css
    My Website: http://www.sascurtin.com/

    Cheers!
     
    Nix Wanning, May 14, 2007 IP
  2. xooMan

    xooMan Peon

    Messages:
    92
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    To fix div heightts (10px -> 3px) try putting a transparent 1x1px GIF image in all the empty DIVs.

    
    <!-- this is an empty div -->
    <div class="myclass"></div>
    
    Code (markup):
    change to

    
    <div class="myclass">[B]<img src="spacer.gif" />[/B]</div>
    
    Code (markup):
    Where spacer.gif is the empty image described above.
     
    xooMan, May 15, 2007 IP
  3. xooMan

    xooMan Peon

    Messages:
    92
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Btw, the design is really well done!
     
    xooMan, May 15, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    @xooMan: Please don't suggest a 'spacer gif'. Besides being unsemantic, and possibly the ugliest hack ever come up with, it doesn't work here.

    @Nix Wanning: The problem lies with two things; IE reserves an anonymous inline box for each container element, and IE will expand the container to enclose its content. The inline box will have a height equal to the line-height of the inherited font. For IE's out-of-the-box default font, that's 19px. If you've set the font-size to, say, 10px, the line-height will be 12 or 13px, and so, too, will be the div's height. The fix is to declare the font-size on those divs to be 0 or 1px.

    Why are you using an empty div "line" instead of semantic markup, <hr />? Non or limited css aware UAs, which includes most web-enabled mobile devices (PDAs, cell phones, etc.) won't render anything.

    Look around line 105 of the source. You cannot put a <p> in a <span>. Replace the span with a div.

    You've failed to close #footer.

    cheers,

    gary
     
    kk5st, May 15, 2007 IP
  5. Nix Wanning

    Nix Wanning Peon

    Messages:
    152
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    @ xooMan - Thanks for the compliment :) But I will steer clear of using spacers.

    @ kk5st - You're a life saver! font-size: 0px; solved everything :D!!

    With regards to the horizontal line <hr /> tag... I tried it and found out that a few pixels were missing at the sides of the line, making it look weird... example (x denotes a coloured pixel and 0 denotes a missing pixel

    left side of the line:
    00xxx
    xxxxx
    0xxxx

    right side of the line:
    xxxxx
    xxx00
    xxxx0

    to fix the missing pixels, I decided to use divs. So far, my stats have told me that a very small percentage of people use mobile devices to view the website. But surprisingly over 50.5% of viewers are using IE6

    Fixed the span and footer problem, thanks for the heads up.

    PNG Transparency problem on IE6

    I seem to have some problems with png transparency. The transparent background has suddenly turned gray.

    I've used a couple of hacks to work around the IE6 bug, but somehow most of them can't work with CSS background images (one of the bullets on my sidebar is PNG based) and it won't work on the Submit button for my form on the contacts page.

    Do you have any ideas how I can work around these problems?
     
    Nix Wanning, May 15, 2007 IP
  6. xooMan

    xooMan Peon

    Messages:
    92
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Take a look at this URL:
    bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/
     
    xooMan, May 15, 2007 IP
  7. Nix Wanning

    Nix Wanning Peon

    Messages:
    152
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    @xooMan - I've tried it already, but somehow it doesn't work on image PNG buttons and it messes up my Javascript reset button.
     
    Nix Wanning, May 15, 2007 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    The hr is an odd beast. The W3 does not define how it should be rendered, so each UA has its own go at it. See Styling <hr> with CSS. You can get it the way you want it and be semantic.

    cheers,

    gary
     
    kk5st, May 15, 2007 IP