SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need help removing odd spacing/padding

    I've read Paul's box model FAQ, and read various other CSS hacks for box models, and i'm thinking that maybe my problem is not box model related.

    I'm trying to setup some CSS Link boxes that look the same in all browsers.

    Working from Marisa's "Build your site navigation with CSS" tutorial, i made my menu perfect looking in IE, but it looked awful in Mozilla Firefox 0.9.3. I've reworked the css settings and now i've gotten this far (the red color is just to show the border edges):


    I have a div class setup to put a 1px border around my entire menu, and each piece of the menu has a 1 px border as well. This should create a 2 px border in all locations, regardless of whether i have 1 menu item or multiple.

    For some reason there is an extra 2px border on the bottom of each menu item, and i dont know what's causing it.

    Here's some CSS:
    Code:
    a.vertical:link
      {
    
      text-decoration:none;
      color:#000000;
      background:#8CA2D6;
      border-style:solid;
      border-color: red;
      border-width: 1px;
      font-weight: bold;
      width: 148px;
      /*height:18px;*/
      voice-family: "\"}\"";
      voice-family:inherit;
      width: 146px;
      /*height:18px;*/
      float:left;
      }
    
    
    
    
    
    a.vertical:visited
      {
      text-decoration:none;
      color:#000000;
      background:#8CA2D6;
      border-style:solid;
      border-color: #181C18;
      border-width:1px;
      font-weight:bold;
      width: 148px;
      /*height:18px;*/
      voice-family: "\"}\"";
      voice-family:inherit;
      width:146px;
      /*height:18px;*/
      float:left;
      }
    
    a.vertical:hover
      {
      text-decoration:none;
      color:black;
      background:#FFD600;
      border-style:solid;
      border-color: red;
      border-width:1px;
      font-weight:bold;
      width: 148px;
      /*height:18px;*/
      voice-family: "\"}\"";
      voice-family:inherit;
      width:146px;
      /*height:18px;*/
      float:left;
      }
    
      a.vertical:active
      {
      text-decoration:none;
      color:black;
      #background:#8CA2D6;
      background:#FDD600;
      border-style:solid;
      border-color: #181C18;
      border-width:1px;
      font-weight:bold;
      width: 148px;
      /*height:18px;*/
      voice-family: "\"}\"";
      voice-family:inherit;
      width:146px;
      /*height:18px;*/
      float:left;
      }
    
    .verticalBorder
      {
      background:#181C18;
      border-style:solid;
      border-color: #181C18;
      border-width:1px;
      width:150px;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:148px;
      }
    I've played around with height settings for hours without luck :(

    Can anybody see what i'm doing wrong, or not doing?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would need to see the html as well to see how you have constructed it but I guess you've done it something like this going on the above css. There must be something else you are doing because this code seems to work more or less as it stands.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    .verticalBorder a{
      text-decoration:none;
      color:#fff;
      background:#8CA2D6;
      border:1px solid red;
      font-weight: bold;
      width: 148px;
      float:left;
      clear:both;
      }
    .verticalBorder a:hover{
      color:black;
      background:#FFD600;
      }
    .verticalBorder {
      border:1px solid red;
      width:150px;
      }
    .clearer {
     height:1px;
     overflow:hidden;
     margin-top:-1px;
     clear:both;
    }
    </style>
    </head>
    <body>
    <div class="verticalBorder">
     <a href="#">Testing</a>
     <a href="#">Testing</a>
     <a href="#">Testing</a>
     <a href="#">Testing</a>
     <a href="#">Testing</a>
     <br class="clearer" />
    </div>
    </body>
    </html>
    The code seems to produce the 2px borders you want and the only thing added was to clear the floats for mox etc.

    Of course you may have constructed this differently and put the anchors inside list items etc.

    Paul

  3. #3
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thanks for the reply.

    This is how i have the HTML setup (same way as Marisa's tutorial):
    Code:
    <div class="verticalBorder" align="center">
    <a href="#" class="vertical">SOME LINK</a><br />
    <a href="#" class="vertical">SOME LINK</a><br />
    <a href="#" class="vertical">SOME LINK</a><br />
    <a href="#" class="vertical">SOME LINK</a><br />
    </div>
    So i'm assuming from your code that it's a better idea to define everything within the verticalBorder class?

    Could anything else in my CSS code be causing conflicts with the spacing? I'm using a CSS script from Mambo Open Source for most of the layout of the site, but the css links are something i've added in. There are some <div> settings in the css, but nothing to change spacing or padding.

  4. #4
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow...
    i took out the <br /> at the end of each link and the spacing went away...

    Ahhgggghh, it was something so simple all along and I spent all yesterday working with broken box models lol..

    Edit:


    Well it's working in IE, but Mozilla's looking pretty screwy


    It seems to be drawing the top line of the outside border, but not the sides or bottom in Firefox 0.9.3. I can add a <br /> anywhere in the HTML and it'll draw the sides for the first link, but IE will then have an extra 1 px border on the bottom



    If i add <br class="clearer" /> before the </div>, it'll look perfect in Firefox, but will add an extra 1 px border on the end for IE.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    So i'm assuming from your code that it's a better idea to define everything within the verticalBorder class?
    Yes its much neater and saves tons of code.

    If i add <br class="clearer" /> before the </div>, it'll look perfect in Firefox, but will add an extra 1 px border on the end for IE.
    Try the code I pasted above You will see that my clearer style doesn't suffer from any such problems.

    Paul

  6. #6
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again,

    I'm gonna rework my code to have everything within the verticalBorder class, and get rid of active and visited redundant code.

    Edit:


    Ok that worked perfectly for both browsers. Thanks again Paul!


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
  •