SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: CSS question

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS question

    Could somebody take a look at the html @ html_test.aspx and tell me why border-bottom is displaying at the top of the div in Firefox and Chrome?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It isn't. Each div that has border-bottom is showing the border at the bottom.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you see the bottom two squares has a bottom border? I do get the border in IE but not in Firefox or Chrome.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by scott_rider View Post
    So you see the bottom two squares has a bottom border?
    No, you don't have bottom borders set on the bottom divs.

    You could change

    Code:
    .bottom {
      height: 380px;
    }
    to

    Code:
    .bottom {
      height: 380px;
      border-bottom: 1px solid #000000;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only border-bottom I am using is on the ui_container which is the div that contains all the other elements.

  6. #6
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like putting the border on the individual divs worked. Thanks for your help.

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there anyway for this design to expand to the whole width and height?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could do something like

    .left {width: 30%}
    .right {width: 68%}

    for width, but for height, it's better to let the boxes expand with their content, so just don't set fixed heights on them. 100% height is a trickier topic.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could have the left column at 30% width and then unfloat the right column (but give it margin-left:30%) and that will expand the right column to fill the rest (note, the margin value on .right has to match the width on .left)

    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    You could have the left column at 30% width and then unfloat the right column (but give it margin-left:30%) and that will expand the right column to fill the rest
    Yes, that's a better way to do it.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •