jaycee32
04-04-2011, 01:59 PM
I'm writing up a simple page that uses a db to dynamically create a visual representation of a server rack. Because the cells are dynamically sized, from what I understand a table won't work. Instead I need to use different sized divs.
There is a number list on the left size of the rack indicating location. Each of these divs is 21px+1px border high. Therefore, I should be able to line up the right side divs by using the formula:
divheight = (22px * Usize) - 1
The -1 is because the right side divs have a bottom border of 1px also.
This works for the most part but at the bottom of most of the diagrams, things start to be off by 1 or 2px, seemingly at random.
I've attached some static sample code that you can preview in IE8 (what I'm testing against) to see what I'm talking about.
For instance, the 32u blank is off by 1px, even though the size is mathematically correct ( 22*32 - 1 = 703).
If I correct it in this instance to 702px (adjust height and line-height of .size32u to 702px), the 32u blank now lines up correctly. However, now the bottom 2u server and blank doesn't line up correctly!
Any help or explanation would be appreciated, even if it is "this is a bad way to do this, here is a better way."
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>MY TITLE</title>
<style type="text/css">
.rack {
padding: 0;
margin-left: auto;
margin-right: auto;
width: 400px;
border: 1px solid black;
font-size: 6pt;
}
.rack div{
text-align: center;
margin: 0;
}
.numlist{
float: left;
border-right: 1px solid black;
margin:0;
width: 22px;
text-align: center;
}
.numlist div{
border-bottom: 1px solid black;
margin: 0;
height: 21px;
line-height: 21px;
}
.size1u {
padding-left: 5px;
height: 21px;
line-height: 21px;
border-bottom: 1px solid black;
margin: 0;
}
.size2u {
padding-left: 5px;
height: 43px;
line-height: 43px;
border-bottom: 1px solid black;
margin: 0;
}
.size3u {
padding-left: 5px;
height: 65px;
line-height: 65px;
border-bottom: 1px solid black;
margin: 0;
}
.size32u {
padding-left: 5px;
height: 703px;
line-height: 703px;
border-bottom: 1px solid black;
margin: 0;
}
</style>
</head>
<body>
<div class='rack'>
<div class='numlist'>
<div>42</div><div>41</div><div>40</div><div>39</div><div>38</div><div>37</div><div>36</div><div>35</div><div>34</div><div>33</div><div>32</div><div>31</div><div>30</div><div>29</div><div>28</div><div>27</div><div>26</div><div>25</div><div>24</div><div>23</div><div>22</div><div>21</div><div>20</div><div>19</div><div>18</div><div>17</div><div>16</div><div>15</div><div>14</div><div>13</div><div>12</div><div>11</div><div>10</div><div>9</div><div>8</div><div>7</div><div>6</div><div>5</div><div>4</div><div>3</div><div>2</div><div>1</div>
</div>
<div class='size1u'>Switch</div>
<div class='size2u'>EMPTY (2u)</div>
<div class='size1u'>Switch</div>
<div class='size32u'>EMPTY (32u)</div>
<div class='size2u'>Server1</div>
<div class='size2u'>Server2</div>
<div class='size2u'>EMPTY (2u)</div>
</div>
</body>
</html>
There is a number list on the left size of the rack indicating location. Each of these divs is 21px+1px border high. Therefore, I should be able to line up the right side divs by using the formula:
divheight = (22px * Usize) - 1
The -1 is because the right side divs have a bottom border of 1px also.
This works for the most part but at the bottom of most of the diagrams, things start to be off by 1 or 2px, seemingly at random.
I've attached some static sample code that you can preview in IE8 (what I'm testing against) to see what I'm talking about.
For instance, the 32u blank is off by 1px, even though the size is mathematically correct ( 22*32 - 1 = 703).
If I correct it in this instance to 702px (adjust height and line-height of .size32u to 702px), the 32u blank now lines up correctly. However, now the bottom 2u server and blank doesn't line up correctly!
Any help or explanation would be appreciated, even if it is "this is a bad way to do this, here is a better way."
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>MY TITLE</title>
<style type="text/css">
.rack {
padding: 0;
margin-left: auto;
margin-right: auto;
width: 400px;
border: 1px solid black;
font-size: 6pt;
}
.rack div{
text-align: center;
margin: 0;
}
.numlist{
float: left;
border-right: 1px solid black;
margin:0;
width: 22px;
text-align: center;
}
.numlist div{
border-bottom: 1px solid black;
margin: 0;
height: 21px;
line-height: 21px;
}
.size1u {
padding-left: 5px;
height: 21px;
line-height: 21px;
border-bottom: 1px solid black;
margin: 0;
}
.size2u {
padding-left: 5px;
height: 43px;
line-height: 43px;
border-bottom: 1px solid black;
margin: 0;
}
.size3u {
padding-left: 5px;
height: 65px;
line-height: 65px;
border-bottom: 1px solid black;
margin: 0;
}
.size32u {
padding-left: 5px;
height: 703px;
line-height: 703px;
border-bottom: 1px solid black;
margin: 0;
}
</style>
</head>
<body>
<div class='rack'>
<div class='numlist'>
<div>42</div><div>41</div><div>40</div><div>39</div><div>38</div><div>37</div><div>36</div><div>35</div><div>34</div><div>33</div><div>32</div><div>31</div><div>30</div><div>29</div><div>28</div><div>27</div><div>26</div><div>25</div><div>24</div><div>23</div><div>22</div><div>21</div><div>20</div><div>19</div><div>18</div><div>17</div><div>16</div><div>15</div><div>14</div><div>13</div><div>12</div><div>11</div><div>10</div><div>9</div><div>8</div><div>7</div><div>6</div><div>5</div><div>4</div><div>3</div><div>2</div><div>1</div>
</div>
<div class='size1u'>Switch</div>
<div class='size2u'>EMPTY (2u)</div>
<div class='size1u'>Switch</div>
<div class='size32u'>EMPTY (32u)</div>
<div class='size2u'>Server1</div>
<div class='size2u'>Server2</div>
<div class='size2u'>EMPTY (2u)</div>
</div>
</body>
</html>