Menu
Good afternoon WebDevelopers,
I currently have ran into a issue that I have not been able to solve. I am in the process of styling an Asset Manager application that quite a lot of data returned to a table element. To not extend past the “shell” i have created, I set the table to fixed width (Table is 92em, body has been set with font reduction at 62.5%) While testing my css to see if it broke, i noticed if data is returned to the last cell , for example an IP address of 255.255.255.255, the cell bleeds into my “adminFunctions” cells. Does anyone know a way to circumvent this issue. I have looked all over the net for “table-layout fixed cell bleeding, and other misc terms”. My Google-Fu isn’t shabby. I even asked other developers and they also don’t know how this is happening. Any help would be appreciated.
Below is my entire CSS file so far.
body {
background-color: #565656;
color: #ccc;
font-family: arial, sans-serif;
font-size: 62.5%;
margin: 0em;
padding: 0em;
}
* {
margin: 0em;
padding: 0em;
}
a {
color: #888;
font-size: 1.2em;
}
a img {
border: 0em;
}
#footer {
float: left;
clear: both;
}
#header {
border-bottom: 1px solid #4f4f4f;
float: left;
height: 6.5em;
line-height: 6.5em;
position: relative;
width: 100%;
}
#mainContent {
float: left;
margin: 1em 0em;
padding: 0em;
width: 100%;
font-size: 1.2em;
}
#shell{
margin: 0em auto;
padding: 0em;
width: 92em;
}
.adminFunctions {
background-color: #aaa;
}
.adminFunctions a {
color: #666;
display: block;
font-weight: bold;
height: 4em;
line-height: 4em;
text-decoration: none;
}
.adminFunctions a:hover {
background-color: #bbb;
color: #fff;
}
.adminFunctions img {
margin: 0em .2em -.1em 0em;
}
#assetsTable {
background-color: #ddd;
border-collapse: collapse;
color: #666;
float: left;
font-size: .8em;
margin: 0em;
padding: 0em;
position: relative;
table-layout: fixed;
text-align: center;
width: 100%;
}
#assetsTable th {
background-color: #666;
border-bottom: 0.2em solid #888;
color: #fff;
}
#assetsTable tr {
height: 4em;
}
.odd{
background-color: #fff;
border-bottom: .2em solid #999;
}
#pageSummary {
color: #666;
display: block;
float: left;
height: 6em;
line-height: 6em;
margin: 0em 0em 2em 0em;
position: relative;
width: 100%;
}
#pageSummary h1 {
color: #fff;
float: left;
margin: 0em 0em 0em 1em;
padding: 0em;
}
#pageSummary img {
float: left;
margin: .5em 0em 0em 0em;
padding: 0em;
}
Here is my HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />
<title>Servers: index</title>
<link href=”css/style.css” media=”screen” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”shell”>
<div id=”mainContent”
<table id=”assetsTable”>
<tr>
<th>Brand</th>
<th>Make</th>
<th>Model</th>
<th>Serial Number</th>
<th>Part Number</th>
<th>Order</th>
<!–<th>Carepak Number</th>–>
<th>Support Expires</th>
<th>Hostname</th>
<th>Usage</th>
<!–<th>Notes</th>–>
<th>IP Addresses</th>
<th colspan=”3″>Administration</th>
</tr>
<tr class=”odd”>
<td>HP</td>
<td>Proliant</td>
<td>DL360 G5</td>
<td>adf</td>
<td>asdfzxc</td>
<td>lkj</td>
<td>2011-02-23 15:17:00 UTC</td>
<td>FLPDB101</td>
<td>Database Server</td>
<td>
172.16.3.201
172.16.3.201
</td>
<td class=”adminFunctions”><a href=”#”>View</a></td>
<td class=”adminFunctions”><a href=”#”>Edit</a></td>
<td class=”adminFunctions”><a href=”#”>Delete</a></td>
</tr>
<tr class=”even”>
<td>adsfas</td>
<td>dfasdf</td>
<td>asdfadsf</td>
<td>adfasdf</td>
<td>adfadsf</td>
<td>adsfadsf</td>
<td>2010-08-27 14:14:00 UTC</td>
<td>fadsfafd</td>
<td>adsfasdfa</td>
<td>172.16.3.201
172.16.3.201
255.255.255.255
255.255.255.255
255.255.255.255
255.255.255.255
255.255.255.255</td>
<td class=”adminFunctions”><a href=”#”>View</a></td>
<td class=”adminFunctions”><a href=”#”>Edit</a></td>
<td class=”adminFunctions”><a href=”#”>Delete</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>