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.
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.
Let me know how that goes,
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:
and the CSS:
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.
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.
You must be logged in to reply to this topic.