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.
It looks like you are suffering from the curse of the spaces.
Right now your code for your box looks like this:
Try changing it to this:
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.
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.
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.