SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image clearing gap problem ?

    Hi I've got a site up and running which is fine until I add images to the right hand menu. The I get a big gap.

    The listings on the page are generated from a database and I have used a <hr> with clear all so each listing sits under the the next properly.

    When I introduce a graphic to the menu on the right I think the clear hr tag css in the content is forcing the content to be displayed below the graphics.

    I am fairly new to css and very bad at trying to explain what I mean.

    As a new member I cannot post the url directly

    So it is the PHP index page in the organisations sub directory in my web site at cornwall-arts-and-crafts which is a . co . uk

    The page should be self explanatory and I have included the css in this document.

    I'm sure there must be a simple way of correcting it - can someone please give me some help.

    Thanks
    Jayne

  2. #2
    SitePoint Enthusiast pudding's Avatar
    Join Date
    May 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried just putting clear:right (if that columns on the right) or clear:left (if it's on the left)?

  3. #3
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just added a height of 1&#37; to the right column and it now renders horizontally okay.

    Unfortunately this has caused another problem and the last image now bleeds into the footer.

    The footer already has a clear both on it.

    Any ideas please

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Bournemouth (UK)
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What software are you using?

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    If I understood well, this is the address http://www.cornwall-arts-and-crafts....ions/index.php

    I don't see a problem in FF or Opera, but IE 6 fails to display properly.

    My first suggestion is that you reset all the options for every single element. As you know, every element has a default padding, margin and border (sometimes the value is 0, but sometimes it isn't, especially the margin).

    By reseting everything you can calculate how much room an element will take, because it will not be affected by other element's margin or padding.

    A reset can be something as simple as

    Code:
    *{margin: 0; padding:0; border: 0;}
    Although it is not the most efficient way, it will help you.

    I haven't had a serious look to the CSS, although I don't see anything "wrong" with it. Unfortunately, right now I don't have time to give it a proper look, but a reset may help at solving your problem.


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
  •