SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Shot in the dark, but why are my pictures displaying like this?

    Ive got the site (link below), everything works as desired, although if I add an article with a picture it seems to throw off all of the formatting. I have tried using different styles on my site and the pictures display fine, so it must be something with this specific stylesheet.

    If anyone can see what the problem may be I will be forever greatful. The site is run off the drupal framework.

    My test site is:
    http://usol.x10hosting.com/usol/

    As you can see there are 2 stories there, and they both overlap eachother.

    Attached is also my .css sheet. Link to the sheet is http://usol.x10hosting.com/usol/them...lack/style.css
    Attached Files Attached Files

  2. #2
    SitePoint Zealot loathsome's Avatar
    Join Date
    Jul 2008
    Location
    Norway
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is because you're floating the picture. Remove the float property so that the images will be shown as block elements instead.
    Time you enjoy wasting is not wasted time.

    Loathsome Systems

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

    Its because you have used the old fashioned align attribute in the image tag (align="left") which has the same effect as floating the image to the left and allowing the text to wrap around it.

    Remove the align="left" attribute from the image tag itself and then set the image to display:block as images are inline elements by default and will sit on the same single line as the text.

    Code:
    img.imgname {display:block;margin:0 0 5px 0}

  4. #4
    SitePoint Zealot loathsome's Avatar
    Join Date
    Jul 2008
    Location
    Norway
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, that's right. I have to admit I didn't have a look at the source, but assumed this was a "floater". (And it kinda was)
    Time you enjoy wasting is not wasted time.

    Loathsome Systems

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    (And it kinda was)
    Yes it's the same behavior

    I was looking for a float also until I spotted the attribute


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
  •