1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problems with CSS Design

Discussion in 'CSS' started by infusion, May 22, 2005.

  1. #1
    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.
    SEMrush
     
    infusion, May 22, 2005 IP
    SEMrush
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    J.D., May 22, 2005 IP
  3. infusion

    infusion Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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
     
    infusion, May 22, 2005 IP
  4. fryman

    fryman Kiss my rep

    Messages:
    9,605
    Likes Received:
    777
    Best Answers:
    0
    Trophy Points:
    370
    #4
    Damn, JD, is there any CSS related question you can't answer?? :D

    Amazing... I envy your knowledge, lol
     
    fryman, May 23, 2005 IP
  5. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    J.D., May 23, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I just like the darn thing :D 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.
     
    J.D., May 23, 2005 IP
  7. infusion

    infusion Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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
     
    infusion, May 23, 2005 IP