#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Location
    Brooklyn
    Posts
    157
    Rep Power
    11

    CSS-Padding Problem


    Admin Page

    Okay, on that page the left side navigation menu I setup a table along with some DIV tags with CSS to put a little border around each division of the page. For some reason the padding around the header for each box is rather large when I view it in internet explorer. I set the padding to 1px on the header div and the nav div. The odd thing is in dreamweaver's preview window everything looks fine except for a spilt between each div tag. Am I missing something?

    Here is part of my CSS code:
    /*Admin Page*/
    H1 {font-size:20px;
    text-align:center;
    text-indent: .1em;
    font-weight:bold;
    font-family:Garamond;
    letter-spacing: .1em
    }
    H2 {font-size:18px;
    text-align:center;
    text-indent: .1em;
    font-weight:bold;
    font-family:Garamond;
    letter-spacing: .3em
    }
    .admin-nav{
    font-size:14px;
    font-weight:400;
    font-family:Arial;
    border:1px solid black;
    padding: 10px;
    background-color:#CCCCCC
    }
    .admin-nav-header{
    border:1px solid black;
    padding: 1px;
    background-color:#CCCCCC
    }
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2004
    Location
    Atlanta
    Posts
    19
    Rep Power
    0
    Hey man, it's because you were using H1 in the container. That created extra padding. If you are going to use CSS dude, then don't even bother doing 1/2 tables and 1/2 CSS... go CSS all the way!

    I played with your code a bit and came up with this:


    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>Add Senator Form - Ohio Senate Democarts</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">

    body {
    background: #336699;
    margin: 20px;
    }

    #logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 20px;
    height: 20px;
    background: #336699;
    z-index: 9;
    }

    #banner {
    background: #336699;
    height: 40px;
    border-bottom: 1px dashed #fff;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 39px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    font-family: Garamond;
    letter-spacing: .5em;
    }

    #leftcontent {
    position: absolute;
    top: 70px;
    left: 20px;
    width: 200px;
    background: #336699;
    margin: 0px;
    }

    #rightcontent {
    position: absolute;
    top: 70px;
    left: 240px;
    border: 1px solid black;
    background: #fff;
    padding: 10px;
    font-family: Arial;
    font-size: 14px;
    }

    #h1right {
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-family: Garamond;
    letter-spacing: .1em;
    }

    .admin-nav-header {
    border: 1px solid black;
    padding: 1px;
    background-color: #CCCCCC;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    font-family: Garamond;
    letter-spacing: .1em;
    }

    .admin-nav {
    font-size: 12px;
    font-weight: 400;
    font-family: Arial;
    border: 1px solid black;
    padding: 10px;
    background-color: #CCC;
    text-align: center;
    letter-spacing: .1em;
    margin-top: 3px;
    margin-bottom: 20px;
    }

    #1ogo {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    font-family: Garamond;
    letter-spacing: .2em;
    }
    </style>
    </head>
    <body>
    <div id="logo">
    <img alt="logo" src="" />
    </div>
    <div id="banner">
    Administration Page
    </div>
    <div id="leftcontent">
    <div class="admin-nav-header">News</div>

    <div class="admin-nav">
    <A href="http://www.mcraft59.com/addnewsform.htm">Add News</A><br />
    <A href="http://www.mcraft59.com/deletenewsform.php">Delete News</A><br />
    <A href="http://www.mcraft59.com/editnews-select.php">Edit News</A>
    </div>

    <div class="admin-nav-header">Senators</div>

    <div class="admin-nav">
    <A href="http://www.mcraft59.com/addnewsform.htm">Add News</A><br />
    <A href="http://www.mcraft59.com/deletenewsform.php">Delete News</A><br />
    <A href="http://www.mcraft59.com/editnews-select.php">Edit News</A>
    </div>


    <div class="admin-nav-header">Issues</div>

    <div class="admin-nav">
    <A href="http://www.mcraft59.com/addnewsform.htm">Add News</A><br />
    <A href="http://www.mcraft59.com/deletenewsform.php">Delete News</A><br />
    <A href="http://www.mcraft59.com/editnews-select.php">Edit News</A>
    </div>

    <div class="admin-nav-header">Links</div>

    <div class="admin-nav">
    <A href="http://www.mcraft59.com/addnewsform.htm">Add News</A><br />
    <A href="http://www.mcraft59.com/deletenewsform.php">Delete News</A><br />
    <A href="http://www.mcraft59.com/editnews-select.php">Edit News</A>
    </div>

    </div>

    <div id="rightcontent">
    <div id="h1right">Add News</div>
    <HR>
    <FORM action="addsenator.php" method="post">
    <br />Title:
    <INPUT size=30 name=title>
    <br />
    Date:
    <SELECT size="1" name="year">
    <OPTION selected>2004</OPTION>
    <OPTION>2003</OPTION>
    <OPTION>2002</OPTION>
    <OPTION>2001</OPTION>
    <OPTION>2000</OPTION>
    <OPTION>1999</OPTION>
    <OPTION>1998</OPTION>
    <OPTION>1997</OPTION>
    <OPTION>1996</OPTION>
    <OPTION>1995</OPTION>
    <OPTION>1994</OPTION>
    <OPTION>1993</OPTION>
    <OPTION>1981</OPTION>
    <OPTION>1976</OPTION>
    <OPTION>1965</OPTION>
    <OPTION>1954</OPTION>
    <OPTION>1945</OPTION>
    <OPTION>1942</OPTION>
    <OPTION>1935</OPTION>
    <OPTION>1901</OPTION>
    </SELECT>
    <SELECT size=1 name=month>
    <OPTION
    selected>Janurary</OPTION>
    <OPTION>Feburary</OPTION>
    <OPTION>March</OPTION>
    <OPTION>April</OPTION>
    <OPTION>May</OPTION>
    <OPTION>June</OPTION>
    <OPTION>July</OPTION>
    <OPTION>August</OPTION>
    <OPTION>September</OPTION>
    <OPTION>October</OPTION>
    <OPTION>November</OPTION>
    <OPTION>December</OPTION>
    </SELECT>
    <SELECT
    size=1 name=day>
    <OPTION selected>1</OPTION>
    <OPTION>2</OPTION>
    <OPTION>3</OPTION>
    <OPTION>4</OPTION>
    <OPTION>5</OPTION>
    <OPTION>6</OPTION>
    <OPTION>7</OPTION>
    <OPTION>8</OPTION>
    <OPTION>9</OPTION>
    <OPTION>10</OPTION>
    <OPTION>11</OPTION>
    <OPTION>12</OPTION>
    <OPTION>13</OPTION>
    <OPTION>14</OPTION>
    <OPTION>15</OPTION>
    <OPTION>16</OPTION>
    <OPTION>17</OPTION>
    <OPTION>18</OPTION>
    <OPTION>19</OPTION>
    <OPTION>20</OPTION>
    <OPTION>21</OPTION>
    <OPTION>22</OPTION>
    <OPTION>23</OPTION>
    <OPTION>24</OPTION>
    <OPTION>25</OPTION>
    <OPTION>26</OPTION>
    <OPTION>27</OPTION>
    <OPTION>28</OPTION>
    <OPTION>29</OPTION>
    <OPTION>30</OPTION>
    <OPTION>31</OPTION>
    </SELECT>
    <br />
    <br />
    Message:<br />
    <br />
    <TEXTAREA name=message rows=20 cols=90></TEXTAREA>
    <br />
    <br />
    <INPUT type=submit value="Submit Query">
    <INPUT type=reset value=Reset>
    </FORM>
    </div>
    </body>
    </html>



    Edit it to your liking... Hope this helps!

    ..::Superfrappe::..

IMN logo majestic logo threadwatch logo seochat tools logo