Need help with boxes in IE

[forbisc]

Ok well i learned a bit more about web design etc... and so I'm working on making a personal blog thing at www.forbisc.com/newsite mainly as a hobby

It is not nearly done but I do have a problem with the boxes when there is more than 2 boxes on one side in internet explorer, it looks like one box is Inside another. Take a look at the source it seems like it should work but then again i dont really know. Is there a better way to make the boxes? (they need to scale vertically and horizontally)
Or is there some simple fix for this?

Any help would be appreciated thanks!

-forbisc

[aeroweb99]

A few things here. There are some deprecated tags in your source. You are mixing absolute positioned divs and tables which is bound to cause problems.

There is also an easier way to create round expanding boxes.

<div class="box_top"></div><!--top bg here-->
<div class="box_middle"><!--content bg here-->

<div class="inner_box">Content Goes Here</div>
<div class="box_bottom"></div><!--bottom bg here-->
</div>


You can see there is far less code than you are using. Alter css for your needs.

[Shadowfiend]

Note that the aforementioned technique for rounded corners only works for a fixed-width rounded corner box. If you need rounded corners for a variable-width div, then you'll need an extra couple of divs.

[aeroweb99]

Yes, I realized that after my post that he had expanding widths too. Wouldn't expanding widths cause major headaches with layout, or elements to be pushed out of the viewport?

[Shadowfiend]

With rounded corners? All you have to make sure is that your upper right and lower right corners are separate elements. Occasionally you also need an extra div or two to repeat your top/bottom borders. But some solid paddings can make sure that the text inside the element will resize nicely. You generally don't get pushing out of the viewport unless you're absolute positioning things -- otherwise they tend to at the very least wrap.