Problem with rounded boxes in IE6

[Andyman]

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.

[AshtonSanders]

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

[Andyman]

Hi Ashton,

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

Andy.

[apostrophe]

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;
}

[Andyman]

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.

[apostrophe]

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.

[Author]

Posts