Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    spk
    spk is offline
    New to the CF scene
    Join Date
    Dec 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with borders/padding on anchors in <div>/<td>

    New to advanced css, but not HTML. Thanks in advance for your replies.

    I've read about the "box" (content, padding, border, margin). I don't understand two things in my examples below.

    1. Why do the border and padding for my .menuButton extend outside the <div>? I would think the <div> would fully contain the content inside it. I've set the <div> background to gray and the menuButtons extend outside the gray.

    2. Why does the <td> seem to clip the top/bottom border and padding from the anchor? Shouldn't the <td> expand to fully contain the anchor, its padding and borders?

    Thanks for your replies.


    <html>
    <head></head>
    <body bgcolor="ffffff">
    <p></p>
    <style type="text/css">
    .menuBar {
    background-color: gray;
    border: 3px solid;
    border-color: #ff0000;
    padding: 0px;
    text-align: left;
    }

    .menuButton {
    color: #000000;
    background-color: #68699f;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    border: 1px solid;
    border-color: #f0f0f0 #909090 #909090 #f0f0f0;
    cursor: default;
    padding: 12px 16px 12px 16px;
    text-decoration: none;
    }

    .menuButton:hover {
    background-color: #0000ff;
    border-color: #f0f0f0 #909090 #909090 #f0f0f0;
    color: #000000;
    }
    </style>
    <div class="menuBar">
    <a class="menuButton" href="">Button 1</a>
    <a class="menuButton" href="">Button 2</a>
    <a class="menuButton" href="">Button 3</a>
    <a class="menuButton" href="">Button 4</a>
    </div>
    <p></p>
    <table>
    <tr>
    <td class="menuBar">
    <a class="menuButton" href="" ...>Button 1</a>
    <a class="menuButton" href="" ...>Button 2</a>
    <a class="menuButton" href="" ...>Button 3</a>
    <a class="menuButton" href="" ...>Button 4</a>
    </td>
    </tr>
    </table>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dunno...

    I don't have an answer here, but i played with your code a bit (by the way, you style sheet should be defined inside the head element, not in the body); try setting whatever height to your .menubar class, then things really get strange...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As I understand it, neither tds nor divs recognize the style dimensions of enclosed elements -- if you remove the styles complete, you'll see that the links fit quite nicely.

    Two solutions come to mind:
    • Specify the height of menuBar and add a float to menuButton (e.g., float : left; ) -- floating corrects the problems Ronald mentions.
    • Leave the style sheet as is but add one <br /> element before the links and two after -- this gives the div and td "real" content to determine the height.


    In either case, as Ronald says, move the style declarations into the head element.
    Need more emoticons?
    Visit Catman's Private Stock

  • #4
    spk
    spk is offline
    New to the CF scene
    Join Date
    Dec 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your replies. I'll give them a shot.

    Catman. Do you have a reference explaining that td nor divs recognize the style dimensions of enclosed elements? I've been searching all over for that information.

    BTW. I read where the <style> must be in the head. Seems very limiting. We're using componentized JSPs with a MainTemplate.jsp. Our MainTemplate.jsp, which creates the <html><head><body> tags doesn't know what css and Javascript are required by the components. Each component JSP is responsible for including their required css and Javascript. We'll have to figure a way to signal the required css files to MainTemplate.jsp so they can be placed in the <head>. Seems like IE and NN 7.0 don't require them in the <head>. At least we haven't had problems, yet.

    In addition, we dynamically create the css based on the user's chosen color scheme and font size.

    Thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •