Problems with CSS Design

Hey everyone,

I'm pretty new to CSS being a table kindda guy for quite some time now. Anyway, I've got a big problem which I'm hoping to get some help with. It's with regards to this site: http://www.infusionz.org/tempDesign . It looks fine on IE but it just gets all messed up with Firefox. Could someone please help me out here coz I've been debugging this for ages and still can't find the answer. Feel free to take a look at my styles.css file. Thanks in advance.

 

One of your problems is that you set height for dotText1 to 2px. Its content spills over this div and is visible outside the table. Leave height at auto and this should take care of this problem.

J.D.

 

hey thanks J.D. that solved the problem of the inner boxes going out of the main container real good. just 2 more quick questions.

1. once i set it to auto, one of the dotted lines disappeared. the line was supposed on top of the blog poster i.e. "Posted by Julian, 2 comments". the line below appears fine but the one on top suddenly disappears.

2. i understand that the inner boxes has gaps in them due to some padding or margin issues, but i can't seem to get a work around because i need the padding to get the text on the graphic itself or otherwise, the words will be out of the graphic and will look terrible.

I appreciate any help you can give and thanks once again

 

Damn, JD, is there any CSS related question you can't answer??

Amazing... I envy your knowledge, lol

 

Set dotText1's height to 2px or more.

This one took me some time to figure out, although it turned out to be a simple case of collapsing margins. Here's how your content is structured:

td > div.boxMiddle > div.boxContentText > p > ...

What happens is that according to CSS2, margins of adjacent elements should collapse, forming a single margin. In your case the paragraph margin was forming this gap between div.boxMiddle and the top of td. If you add this line to your stylesheet, it should take care of this problem:

.boxContentText p {margin: 0;}

J.D.

 

I just like the darn thing It's well thought through and well documented (may be except a few ambiguous and confusing paragraphs). Knowing CSS does save time and, eventually, money

J.D.

 

hey JD >> did anyone ever tell ya that you're a life saver? haha. well you ARE! Thanks a lot man. It fixed the whole thing up real good. I've definitely got to learn more about CSS and I'll try to implement a completely tableless layout for my next project. Really appreciate everything. Cheers