SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ?? Problem with Nested Borders ??

    Hello everyone,

    I'm a bit new to CSS. For some reason my nested borders are not displaying as I would expect.

    Btw, I'm using IE 8 and FF 3.5.

    Unfortunately, Sitepoint won't let me post the image or URL because I haven't "earned my stripes" yet. You can either paste the HTML/CSS below into a web page to see the problem or use the "pseudo link" below, replacing the leading xxxx with http.

    xxxx://hkkj7w.bay.livefilestore.com/y1p-Br-LlqQ1Z0F80DYwaK6dZwQmmCRhou3MQSVcR9DStafX2vWD-4wNdw-b_CsoBrr2crsS59KRqaOWCSTd2Sy6g/css-nested-borders.jpg

    The black border looks fine but the orange border seems to be missing pixels on the top and bottom. The red and pink borders are even worse.

    Can someone explain why this is happening? I'm obviously missing something very findamental about the way CSS uses borders and/or padding. The HTML/CSS is below.

    Thank you very much.

    Code:
    <!DOCTYPE html>
    
    <html dir="ltr" lang="en-US">
    
    <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    
      <style type='text/css'>
        body{
          background-color: rgb(245,245,245);
        }
    
        div {
          padding: 0px;
          margin:  0px;
        }
    
        div#menu {
          margin: 50px;
          border: 5px solid pink;
          float:right;
        }
    
        div#menu div.menuItemContainer {
          border: 5px solid red;
          display:inline;
        }
    
    
    
        div#menu div.menuItemContainer div.menuItemTop {
          border: 15px solid orange;
          display:inline;
        }
    
    
        div#menu div.menuItemContainer div.menuItemBottom {
          border: 12px solid black;
          display:inline;
        }
    
      </style>
      <title>Test</title>
    </head>
    
    <body>
    <div id="menu">
        <div class='menuItemContainer'><div class='menuItemTop'><div class='menuItemBottom'><span>Option #1</span></div></div></div>
        <div class='menuItemContainer'><div class='menuItemTop'><div class='menuItemBottom'><span>Second</span></div></div></div>
        <div class='menuItemContainer'><div class='menuItemTop'><div class='menuItemBottom'><span>The Third Option</span></div></div></div>
        <div class='menuItemContainer'><div class='menuItemTop'><div class='menuItemBottom'><span>About</span></div></div></div>
    </div>
    </body>
    </html>

  2. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove all the inlines. Make .menuItemContainer {float: right;}.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I would suggest that you not use that code though as it is a classic case of divitis. Way to many nested divs are being used there to make what otherwise would be just a simple menu that could have been done with an unordered list with paddings, BG colors and some borders.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>menu demo</title>
    <style type='text/css'>
    
    body{background:#F5F5F5;}
    
    #menu {
        float:right;
        margin:50px;
        display:inline;/*fix ie6 double margin bug*/
        padding:0 3px;
        background:red;
        border:5px solid pink;
    }
    #menu li {
        list-style:none;
        float:left;
        padding:12px;
        background:orange;
        border:solid red;
        border-width:6px 3px;
    }
    #menu li a {
        float:left;
        padding:2px 4px;
        background:#FFF;
        color:#000;
        border:12px solid black;
        text-decoration:none;
        font-weight:bold;
    }
    #menu li a:hover {
        background:black;
        color:#FFF;
        border:12px solid lime;
    }
    </style>
    </head>
    <body>
    <ul id="menu">
        <li><a href="#">Option #1</a></li>
        <li><a href="#">Second</a></li>
        <li><a href="#">The Third Option</a></li>
        <li><a href="#">About</a></li>
    </ul>
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I would suggest that you not use that code though as it is a classic case of divitis. Way to many nested divs are being used there to make what otherwise would be just a simple menu that could have been done with an unordered list with paddings, BG colors and some borders.
    Well, I didn't want to go into the details as to why I was using the divs. What I showed was just a distilled sample of something much larger.

    Thanks for the response but I was hoping for an answer as to why I was seeing this behavior rather than a critique of the usage of CSS.

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Well, I didn't want to go into the details as to why I was using the divs. What I showed was just a distilled sample of something much larger.

    Thanks for the response but I was hoping for an answer as to why I was seeing this behavior rather than a critique of the usage of CSS.
    I'm sorry if you felt like I was critiquing your code, as I mentioned it was a suggestion.

    Perhaps if you had of explained that your design required multiple nested divs just to make borders in your first post I would not have shown how to code with a leaner approach. Most people try to avoid unnecessary elements when possible and I just thought you might like to see how to do that since you said you were "a bit new to CSS".

  6. #6
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Remove all the inlines. Make .menuItemContainer {float: right;}.

    cheers,

    gary
    Wow, that "fixed" it, so thank you for that, but can you explain why my original code was producing the wrong output? I certainly want it to look right but I also want to understand why it did not look right. I need to understand why.

    How were the inlines causing the behavior I saw and how did removing them and adding the float:right fix it?

    Thank you so much.

  7. #7
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I'm sorry if you felt like I was critiquing your code, as I mentioned it was a suggestion.

    Perhaps if you had of explained that your design required multiple nested divs just to make borders in your first post I would not have shown how to code with a leaner approach. Most people try to avoid unnecessary elements when possible and I just thought you might like to see how to do that since you said you were "a bit new to CSS".
    It's okay, there's nothing wrong with critiquing. I want to learn and I am happy to receive advice. The point I was trying to make was that I wanted to know why my CSS was being rendered as it was. I wan't looking for general CSS style advice.

    I'm sorry if I came across too strong. Thank you for your response.

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a lot of technical details, which I would probably get wrong if I were to attempt an explanation. It should be roughly correct to say that top and bottom padding, borders, and margins are ignored, space wise, on inlined elements. Removing the inline display rule left them block. The float bit was simply to put things back where you had them layout-wise. (Not strictly true, the order of the boxes got reversed.)

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


Tags for this Thread

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
  •