SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 2 col page needs tightening up

    Hi all,

    I've been redesigning my site using XHTML/CSS for the first time and I think I've done a pretty good job considering I'm not an expert. I've picked up quite a few good tips from here as well.

    My homepage displays fine in FF/Safari/IE7 and "almost" fine in IE6. There are a few glitches that I'm encountering...

    1) Enlarging the text results in overlapping at the bottom of the primary column.

    2) There is trouble with the left hand border on IE6. There is a little gap that appears and I think it could be something to do with the clearing method I've used (probably incorrectly).

    3) There may be a more solid method of creating the page layout.

    If somebody can help me nail these problems I would be very grateful Thanks!
    Last edited by Paul O'B; Oct 28, 2007 at 12:27. Reason: public forums are not for private correspondance - Use looking to hire forum if you want a paid freelancer etc.

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

    These sound like simple issues but we would need some code or a link to see what the problem is .

    ( I have edited your post because if you want to pay someone to do this then you should post in the looking to hire forum as this forum is for public viewing.)

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK sorry about that. It was an afterthought and I was mainly after some pointers because I'm sure I can fix it myself with a little guidance. The site is in my profile, or do you want me to post the code here?

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

    For the gap at the bottom left use this code.

    Code:
    #clearone {
     clear: both;
     height: 1px;
     overflow:hidden;
     margin-top:-1px;
    }

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

    Re 1 I assume you mean that the right column background doesn't extend. If so then you are using a flawed method to get the equal columns.

    You should move the gradient image to the background of the column itself.

    Code:
    #secondarycol {
     width: 310px;
     float: right;
     border-right: 10px solid #DBE5E7;
     border-top: 10px solid #DBE5E7;
     background: url(secondarycol.jpg) no-repeat right top;
    
    }
    Then make yourself a repeating slice (about 5px high) that is the same color as the bottom of that right column's gradient and then repeat it on the main container (where the original column image was). This will ensure that the column background is continuous.

    Code:
    #main {
     width: 765px;
     background:#fff url(secondarycol-slice.jpg) repeat-y right top;
    }

  6. #6
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B for your time and all the excellent advice! It's working much better now. I'll get the column colour right eventually but I'm quite happy with it for the time being.

    Thanks once again. Members like you is what makes SitePoint so great!

  7. #7
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh no! I've just noticed something else in IE7. My "catleft" column within "primarycol" gets pushed down behind the footer. Is this something to do with clearing or is it because I've got too much information in one of the inner columns?

    (This is beginning to drive me up the wall! lol)

  8. #8
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. Any more takers? I really want to try and fix this as soon as I can!

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

    Where are we looking exactly as I don't see an overlap in IE7?

  10. #10
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It happens in IE6 and IE7. If you look at the bottom of the white (primarycol) column and resize the text you will see that the last category link 'Web Space' appears. Compare this to in FF and you will see what hides behind the footer.

    Sorry for the late reply. My Internet was offline all last night and they only got it back online during the night!

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

    The page rendered ok for me so I'm guessing that its probably something to do with dynamic content. The first thing to try is putting a width and height on the advert wrapper to preserve space..

    Code:
    #advertisement {
     text-align: center;
     width:300px;
     height:250px;
    }
    Also make sure that all the images have their height and width attributes added to the html.

    I also note that your concept is still flawed in that the 10px left and right borders on the left and right columns will not equalise correctly.

    You should add all the borders and the white background to the existing right column image also. In that way you tile both columns in one go including both backgrounds and all borders.

    As an example this is the image I use for a 3 column layout.:

  12. #12
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul great advice. I'll have a go and see what I can come up with. I think this may solve most, if not all of the problems I've come across.


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
  •