Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: borders not displaying on h2 elements within Floating Div

Bottom of Page

1 to 8 of 8

  1.  
    • CommentAuthorsteryo
    • CommentTimeOct 30th 2007
     permalink
    For some reason or another, borders are not displaying correctly on headings within floating div's on my page. For example, I'll set all headings <h2> to have a bottom border, however, when i preview the changes in my browser the borders will appear above the headings instead. I've been able to come across a small fix by setting the headings to display "inline", but I am then unable to set top/bottom margins.
    Are there any other solutions for this problem?
    • CommentAuthorjonsaul
    • CommentTimeOct 30th 2007
     permalink
    what browser are you testing with ?

    you would really have to post an example file to get any help with that.
    • CommentAuthorsteryo
    • CommentTimeOct 30th 2007 edited
     permalink
    Sorry about that.
    I'm testing in Firefox and Safari, here is a screenshot of the problem:



    HTML:

    <body>
    <div id="page">
    <div id="header"></div>

    <div id="content">

    <div id="entrycolumn">

    <div class="post">
    <small> </small> <br />
    <span class="title"></span><h2><a href="">Title</a></h2></span>
    <div class="entry">
    Lorem ipsum...</div>
    <span class="postmetadata">
    entry footer text...
    </span>

    </div>

    </div>

    <div id="sidebar">

    <div class="leftbar">
    <h2>leftbar</h2>
    </div>


    <div class="rightbar">
    <h2>rightbar</h2>
    </div>


    </div>

    <div id="clearer"> </div>
    </div>

    <div id="footer">Content for id "footer" Goes Here</div>
    </div>
    </body>

    CSS:

    body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    }
    #page {
    margin: 0px auto;
    padding: 0px;
    width: 898px;
    text-align: left;
    border: 1px solid #999999;
    }
    #header {
    height: 60px;
    }
    #entrycolumn {
    margin: 0px;
    padding: 0px;
    width: 550px;
    border: 1px none #000099;
    float: left;
    }


    #sidebar {
    width: 348px;
    float: left;
    clear: right;
    margin: 0px;
    padding: 0px;


    }



    #footer {
    background-color: #333333;
    height: 60px;
    clear: both;
    }
    .leftbar {
    float: left;
    width: 150px;
    margin-top: 0px;
    padding-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-left: 30px;

    }



    .rightbar {
    float: right;
    width: 150px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;

    }

    #clearer {
    clear: both;
    margin: 0px;
    padding: 0px;
    height: 5px;
    background-color: #000066;
    }

    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-decoration: none;
    height: 0px;
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 30px;
    border: 1px solid #000000;
    }


    h2 a {
    font-family: Arial, Helvetica, sans-serif;
    color: #A6156A;
    font-size: 16px;
    text-decoration: none;
    padding: 0px;
    margin-top: 0px;
    }
    small {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    }
    .post {
    margin-bottom: 40px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    }
    .entry {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    text-decoration: none;
    line-height: 16px;
    margin: 0px 0px 20px;
    padding: 0px;
    }


    /*begin sidebars*/

    #sidebar h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-decoration: none;
    height: 0px;
    padding: 0px;
    color: #A6156A;
    margin-bottom: 10px;
    margin-top: 0px;
    border-bottom: 1px solid black;

    }
    • CommentAuthorJugularBean
    • CommentTimeOct 30th 2007 edited
     permalink
    Do you have a url to this page? Have you tried validating your markup?
    •  
      CommentAuthorjernigani
    • CommentTimeOct 30th 2007
     permalink
    Well for starters you have h2 set to have a border around all sides.


    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-decoration: none;
    height: 0px;
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 30px;
    border: 1px solid #000000;
    }


    and setting border-bottom on your #sidebar h2 tag doesn't mean it will only have a border on the bottom. Because...you've set h2 tags to have a border everywhere in the html.


    #sidebar h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-decoration: none;
    height: 0px;
    padding: 0px;
    color: #A6156A;
    margin-bottom: 10px;
    margin-top: 0px;
    border-bottom: 1px solid black;
    }


    Also, is this all of your css? Because it should be showing a border on all sides.
    • CommentAuthorsteryo
    • CommentTimeOct 30th 2007
     permalink
    I ended up setting the border on all sides just to test this bug out a bit futher...i still ended up getting the same results as you can see in the screen shot.
  7.  permalink
    I'm not sure how you want your layout to look, but your "height of 0px" on h2 and #sidebar h2 is killing your borders. Get rid of that and change the border to border-bottom like Jernigani suggested.
    • CommentAuthorsteryo
    • CommentTimeOct 31st 2007
     permalink
    Thanks alot guys...problem solved!!!

1 to 8 of 8

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page