SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Racer_X's Avatar
    Join Date
    Dec 2006
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My First Experience With Rounded Corners...And I Need Help!

    I went on this site to copy the rounded corner code to use in my page. Only when I inserted a little more than the text they had, the design fell apart.

    Is it my divs that are throwing everything off? What is making it push the content down to the bottom like that?

    Also, how would I specify an auto scroll for the height of the white box?

    Test Page


    Thanks.

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly remove the float from your #group div as it's causing the content to come out of the document flow and isn't needed. There are work arounds for this if you need to use a float but you don't need it so the easiest fix is to simply remove it.

    Code:
    #group {
    width:300px;
    margin-right:20px;
    padding:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    border-right:2px #eacdff dotted;
    }
    This will then leave you with a big gap at the bottom and the top due to you specifying a 400px height for the top and bottom. I've changed this to 20px and it should look much better but you can specify whatever height you require there.

    Code:
    /* height and width attributes */
    .rbtop div, .rbtop, .rbbot div, .rbbot {
    width: 100%;
    height: 20px;
    font-size: 1px;
    }
    Hope that helps.

  3. #3
    SitePoint Addict Racer_X's Avatar
    Join Date
    Dec 2006
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that helped a lot. I think I actually understand what is happening behind the curtain now. Anyway, I got my page how I want it in FF 2.0 and IE7, but for some reason the design is broken up in IE6.

    It's margins or padding between the left and right section are different than FF's and since there's no room for the right column, everything gets pushed down to the next line. How do I fix this so it looks like FF?

    Test URL
    Last edited by Racer_X; Sep 20, 2007 at 12:11.

  4. #4
    SitePoint Addict Racer_X's Avatar
    Join Date
    Dec 2006
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anybody?


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
  •