SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE 6+7 CSS Layout Problems

    Hey,

    Hoping someone can help me figure out the problem Im coming up against with a page Im currently working on.

    Its fine in Firefox and Safari but theres some major issues in IE7 and some minor ones in IE6.

    Cant figure out exactly whats causing it and its giving me major headaches so if anyone would mind giving me a hand and a second opinion that would be very very much apprecaited.

    Page can be found here http://www.havocdolls.com/user/mailbox.php

    Thanks again!

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone any idea?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Sorry, we missed your post first time around. I'll have a look in a minute but of first impressions it may not be a quick fix as there are multiple misplaced elements. I'll get back to you when I've had a good look

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, no worries was just hoping someone could help out.

    It should all validate except for the missing alt tags which Im going to end up producing via php so no worries about those.

    Thanks very much

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    One thing I notice straight away is that you have set a height of 34px for these rows but some of the rows about 144px high.

    Try removing the height from here but add a width to force "haslayout" anyway.

    Code:
    .inbox_row
    {
        position: relative;
        margin: 0;
        padding: 0;
        /*height: 34px;*/
        width:100%;
        clear: both;
    }
    If you specifically need some rows at a specific height then use another class just for those rows.

    Try that and then I'll have another look as I can't seem to get a local version working in IE as for some reason it won't link to your images in iE.

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made the changes you suggested, not sure about what width so I set it to auto which I think is right

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Another possible fix is here where you have specified a small height. Ie will always expand the height to accommodate the content so you could either make sure things are the right height or hide the overflow:/

    Code:
    .inbox_header_col_date, .inbox_header_col_from, .inbox_header_col_status, .inbox_header_col_subject
    {
        float: left;
        margin: 0;
        padding: 10px 0 10px 6px;
        background: #1d1d1d;
        border-top: 1px solid #141414;
        border-bottom: 1px solid #141414;
        height: 16px;
    overflow:hidden
    }
    .viewmessage_col_subject, .viewmessage_header_col_subject
    {
        height: 16px;overflow:hidden
    }
    IE will always expand small heights anyway so that they will at least contain the current font-size/line height.

    You may also need to set the images in the rows to display block to stop Ie pushing things wide.

    Code:
    .inbox_row img{display:block}
    However that may have adverse effects elsewhere so you may need to test and perhaps class the exclusions.

    Let me know how it goes

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Mezzi
    I made the changes you suggested, not sure about what width to give it but I added something anyway.
    You need to add a proper width as width:auto doesn't cause the element to have haslayout. 100% width should be ok as there are no padding or border in effect.

    Code:
    .inbox_row
    {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        clear: both;
    }
    It's looking much better in IE7 already

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow fantastic thank you, going to have to study the changes a bit more to see what exactly I messed up and you correct on but at least its working !

    One other thing, the left box titled "mail center" the top lot of <li> and top <ul> seem to have lost their background etc and only display the image in IE6 and have some odd right spacing in IE7. I was sure that both UL there use the same class so thought it should have worked the same.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try something like this to force layout and address the issue.

    Code:
    .user_mail_nav ul
    {
        margin:0;
        padding:10px;
    }
    .user_mail_nav li
    {
        margin: 0;
        padding: 3px 2px 3px 6px;
        background: #434343;
        border: 1px solid #3d3d3d;
        font-size: .95em;
        min-height:0;
    }
    * html .user_mail_nav li{height:1&#37;}
    .boxtop img{display:block}


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
  •