SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't figure out what I'm doing wrong here.

    All I want to happen here is the text "Does your brain need a tune up?" to have a top margin so it is separated from the EEG Imaging pic and the list of things which is also an image. I want it about the same distance from then as EEG Neurofeedback is from the two images on top there, which is like 10px...but I can't seem to get this done. Looks like the effect I'm looking for is in IE, but Firefox is not happening.


    Thanks
    Deron
    Last edited by deronsizemore; Oct 1, 2004 at 18:48.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Location
    North Carolina
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sample link/code?

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry...here is the link for the site.

    http://www.geocities.com/deronsizemore/eegneuro.htm

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone at all?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Deron,

    Just put the margin on the image instead
    Code:
    #welcome {
    }
    #firstp {
    }
    #firstp img{
    float: left;
    margin:10px 14px 10px 0;
    }
    #secondp {
    clear: left;
    }
    Saves 2 styles and does the same job

    Paul

  6. #6
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ohhhhhh..Thanks Paul. Was I correct in putting clear:left; in the secondp div??

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deronsizemore
    Ohhhhhh..Thanks Paul. Was I correct in putting clear:left; in the secondp div??
    Well the images were floated so you'd probably need to clear them anyway otherwise the following content may butt up alongside.

    I think the reason the margin wasn't working is that because the image was floated then its parent assumed it had no content and the bottom margin would have been applied from the parent which was collapsed into a single line at the top. If you had cleared the images inside their parent then the margin (probably) would have taken effect.

    However its just simpler to give the image a margin and save a load of code.

    Paul

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So there really is not need for the clear:left; to be inside of the second p div? In fact I should have placed a clear: both; inside of the #firstp img {};?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    No you still need to clear the floats:
    Code:
    #secondp {
    clear: left;
    }
    Otherwise that secondp element will sit alongside the floated images (if there was room).

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •