Forums

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:

<div id=\"PostBox\">
			<div id=\"PostBoxTop\"></div>
			
				<div id=\"Post\">

					<h1>
						test2					</h1>

					<p>hglkdf</p>
<p>jlkhglkhj</p>
<p>doljhlkd</p>
<p>dlhjlkdjh</p>

				
				</div>
			<div id=\"PostBoxBottom\"></div>
		</div>

Try changing it to this:

<div id=\"PostBox\">
			<div id=\"PostBoxTop\">&nbsp;</div><div id=\"Post\">

					<h1>
						test2					</h1>

					<p>hglkdf</p>
<p>jlkhglkhj</p>
<p>doljhlkd</p>
<p>dlhjlkdjh</p>

				
				</div><div id=\"PostBoxBottom\">&nbsp;</div>
		</div>

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:


<div class=\"Post\">
     <div class=\"PostBoxTop\">
           <div class=\"PostBoxBottom\">

               \"Your content\"

           </div><!--end PostBoxBottom-->
     </div><!--end PostBoxTop-->
</div><!--end Post-->

and the CSS:


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

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.

treehouse : what would you like to learn today?

Forums

Problem with rounded boxes in IE6