Grow your CSS skills. Land your dream job.

Problem with rounded boxes in IE6

  • # April 28, 2009 at 2:46 am

    Hi,

    I hope someone might be able to help me. I’m very new to CSS but I’ve been working through Chris’ stunning video tutorials aiming to put together a WordPress theme for my site.

    Everything was going well until I viewed my progress on IE6 and I found my rounded corner boxes don’t display correctly. Everything is fine in IE7, FF and Safari but IE6 puts some additional spacing between the top and bottom graphic DIVs.

    I really hope someone can tell me what I’m doing wrong because I don’t want to develop the site any further making the same mistakes. The development site is http://www.ar-photographic.co.uk/blog.

    Any advice would be much appreciated.

    Andy.

    # April 28, 2009 at 3:38 am

    Hi Andy,

    It looks like you are suffering from the curse of the spaces.

    Right now your code for your box looks like this:

    Code:

    test2

    hglkdf

    jlkhglkhj

    doljhlkd

    dlhjlkdjh

    Try changing it to this:

    Code:
     

    test2

    hglkdf

    jlkhglkhj

    doljhlkd

    dlhjlkdjh

     

    In the above, I did two things:

    1) I removed the extra spacing between the divs that weren’t getting along. IE will sometimes see spaces/tabs as an actual space sometimes, which looks like what is happening here.
    2) This didn’t affect it this time, but it’s good practice to always have a   (no break space) in any empty div, paragraph, etc.

    Let me know how that goes,
    Ashton

    # April 28, 2009 at 3:48 am

    Hi Ashton,

    Thanks for the quick response. I’ve tried the changes you suggest which seem logical but unfortunately it makes no difference. :(

    Andy.

    # April 28, 2009 at 6:14 am

    What happens if you remove the padding from #Post and add it to the content of the div instead?

    Also Id’s are supposed to be unique, one per page. If you want to re-use your divs you should give them classes.

    Otherwise, if I were doing someting similar I would set it up like this:

    Code:

    “Your content”

    and the CSS:

    Code:
    div.Post {
    background:transparent url(images/PostBoxMiddle.png) repeat-y scroll 0 0;
    display:block;
    float:left;
    width:918px;
    }
    div.PostBoxTop {
    background:transparent url(images/PostBoxTop.png) no-repeat scroll 0 0;
    display:block;
    float:left;
    width:918px;
    }
    div.PostBoxBottom {
    background:transparent url(images/PostBoxBottom.png) no-repeat scroll left bottom;
    display:block;
    float:left;
    width:918px;
    }
    # April 28, 2009 at 6:32 am

    Ah, fantastic. That has solved the problem.

    Would you mind explaining the effect of the "display:block;" to me please. Sorry for the stupid question but I’m trying to understand exactly what I should have done. I don’t know why I didn’t think of using 2 DIVs instead of 3. Obvious when think about it.

    Many thanks,
    Andy.

    # April 28, 2009 at 7:40 am
    Quote:
    Would you mind explaining the effect of the "display:block;" to me please.

    Actually I copied and pasted the code directly from the last site I built using that method. I’m sure I had a good reason for typing display:block; but I cannot, for the life of me remember why. :D lol
    By default divs are displayed as blocks so you should be able to remove the offending lines from your CSS.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".