CSS Layout Problems In IE 6

Discussion in 'CSS' started by svoltmer, Apr 8, 2008.

0
  1. #1
    I have a problem with the centering of two columns (divs) in IE 6. I need a left-margin on the far left column, but that margin causes the second floated column to wrap to the underside of the first column in IE 6. It is also causing the fau column to be positioned wrong as well. Any suggestions? Thanks!

    Here is the link:
    http://www.crosst.org/test/index.html

    CSS:
    http://www.croost.org/test/ctstyles.css
     
    svoltmer, Apr 8, 2008 IP
  2. LongHaul

    LongHaul Peon

    Messages:
    670
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I would say that the easiest way is to get it working in browsers other than IE6. Then, reduce the margins or widths of the content left or right until it works correctly in IE6. Then set the CSS rules back to the original (working in all browsers) and then make an IE6-only rule.

    For example, let's say you have this in your .contentright class:

    .contentright {
    width: 120px;
    margin-left: 20px;
    }

    and that works fine in everything except IE6, which only works if the margin-left is, say, 15px. So add this in the CSS:

    * html .contentright {
    margin-left: 15px;
    }

    That will be ignored by other browsers, but IE will see it (IE thinks there is an element surrounding "html" which is technically what this refers to) and so you will have a margin-left of 20px in most browsers and 15px in IE6.

    You can do this to any CSS rule (AFAIK) when you find some different calculation needed for IE6.

    Good luck!
     
    LongHaul, Apr 9, 2008 IP
  3. svoltmer

    svoltmer Peon

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks!!
    You have been a great help! No one else ever mentioned that "* html" would alter only IE.

    I have noticed that there is still a problem with the fonts in the footer not changing size if the browser text size is increased in IE 7. Also, the background image doesn't resize in IE 7 either. Any ideas? Thanks!
     
    svoltmer, Apr 9, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Do you mean text-enlarge in IE7 or the zoom? There is indeed a zoom bug in IE7, but as far as I know that is on background images on the <body> and nowhere else. I've seen it not scaling a few other things too. If the image is on the body, someone found that giving the html element a background colour seems to fix it.

    html {
    background-color: make same as the body's bg colour;
    }

    rest of CSS sheet.

    Your CSS had looked so good I thought you knew * html. This targets IE6 and under. There is also one for IE7, though its use is strongly discouraged: *+html (no spaces). There must be a space between the * and html in the IE6 one (* html not *html)-- they both work, but it only validates with the space.
     
    Stomme poes, Apr 10, 2008 IP