...
PDA

CSS table elements... works on FF not IE

scrupul0us
02-05-2007, 09:05 PM
CSS:

<style media="all" type="text/css">

html, body {
margin: 7 7 0 7; padding:0;
background-color: #EEECE1;
font-family: tahoma, arial, verdana;
text-align: center;
}
input {
font-family: tahoma, arial, verdana;
margin: 0; padding:0;
}
.listinput {
border: 1px solid #8CACBB;
margin: 3px;
text-align: center;
}
.listinputdis {
border: none;
margin: 3px;
text-align: right;
background-color: transparent;
}
table {
border: 1px solid #8CACBB;
background-color: #FCFCFC;
border-bottom: none;
width: 700px;
}
table>thead>tr>td {
background-color: #DEE7EC;
border-bottom: 1px solid #8CACBB;
color: #666666;
font-weight: bold;
}
table>tbody>tr:hover {
background-color: #E5E9EC;
}
table>tbody>tr>td {
border-bottom: 1px solid #8CACBB;
font-size: 14px;
}
#submitDIV {
width:700px;
margin-top: 10px;
text-align: center;
}
#submitDIV>input {
border: 1px solid #8CACBB;
background-color: #DEE7EC;
}
#footer {
text-align: center;
font-size: x-small;
}
</style>


PHP/HTML

<body>
<div align="center">
<?php
// Connecting, selecting database
$dbhost = 'xxx.xxx.xxx.xxx';
$dbuser = 'xxx';
$dbpass = 'xxx';
$dbname = 'xxx';
$dbtabl = 'xxx';

$link = mysql_connect($dbhost, $dbuser, $dbpass)
or die('Could not connect: ' . mysql_error());
mysql_select_db($dbname) or die('Could not select database');

// Performing SQL query
$query = "SELECT * FROM $dbtabl";
$result = mysql_query($query) or die('Query failed: ' . mysql_error());

// Printing results in HTML
?>
<form name="inventory" action="update.php" method="post" onsubmit="return validate(document.inventory);">
<table width="100%" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td align="center" width="50px">ID</td>
<td align="center" width="75px">CODE</td>
<td align="left" width="auto">NAME</td>
<td colspan="2" align="center" width="150px">IN STOCK</td>
<td align="center" width="25">&nbsp;</td>
<td align="center" width="100px">QTY USED</td>
<td align="center" width="100px">ADD STOCK</td>
</tr>
</thead>

<?php
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
?>
<tbody>
<tr>
<td align="center"><?php echo $row['invID']; ?></td>
<td align="center"><?php echo $row['invCODE']; ?></td>
<td align="left"><?php echo $row['invNAME']; ?></td>
<td align="right">
<input class="listinputdis" type="textbox" value="<?php echo $row['invSTOCK']; ?>" size="6" onfocus="this.blur();" />
</td>
<td align="left" width="50px">&nbsp;<?php echo $row['invUNIT']; ?></td>
<td align="center">
<?php
if ($row['invSTOCK'] == 0) {
echo "<img src=\"images/critical.gif\" />";
}
elseif ($row['invSTOCK'] <= 10) {
echo "<img src=\"images/caution.gif\" />";
} else {
echo "<img src=\"images/ok.gif\" />";
}
?>
</td>
<td align="center">
<input class="listinput" type="textbox" name="R<?php echo $row['invCODE']; ?>" size="6" value="0" />
</td>
<td align="center">
<input class="listinput" type="textbox" name="A<?php echo $row['invCODE']; ?>" size="6" value="0" />
</td>
</tr>
</tbody>
<?php
}
?>
</table>
<div id="submitDIV">
<input type="submit" name="UPDATE" value="UPDATE" style="width:200px;" />
</div>
<div id="footer">
Created By:
</div>
</form>
<?php

// Free resultset
mysql_free_result($result);

// Closing connection
mysql_close($link);
?>
</div>
</body>


this is an intranet site so heres images

FIREFOX:
http://codingforums.com/attachment.php?attachmentid=5037&stc=1&d=1170709485

IE:
http://codingforums.com/attachment.php?attachmentid=5038&stc=1&d=1170709493
croatiankid
02-05-2007, 09:09 PM
html, body {
margin: 7 7 0 7
you must specify a unit (like px or em).
I'm sorry I can't help you about your main problem
scrupul0us
02-05-2007, 09:20 PM
good catch non-the-less... hopefully someone else can help as well :)
_Aerospace_Eng_
02-05-2007, 09:42 PM
IE6 doesn't support the child selector like you are using. IE7 should though.
scrupul0us
02-05-2007, 09:50 PM
i am using 7

what would be the way to provide maximum compatibility
_Aerospace_Eng_
02-05-2007, 09:54 PM
Just give an ID or a class to that whole first row and style it with CSS. The hover part however you'll need to use javascript for.
scrupul0us
02-05-2007, 10:35 PM
ok... ive got the styling handled... the hover is the only issue... it works in FF but not in IE... wheres a good place to start looking for that
_Aerospace_Eng_
02-05-2007, 10:57 PM
Add this in between your head tags
<!--[if lte IE 6]>
<script defer type="text/javascript">
var oncolor = "#E5E9EC";
var offcolor = "#FFF";
function changeRows()
{
var getTableBody = document.getElementsByTagName('tbody');
for(var i = 0; i < getTableBody.length; i++)
{
var getTr = getTableBody[i].getElementsByTagName('tr');
for(var j = 0; j < getTr.length; j++)
{
getTr[j].onmouseover = function()
{
this.style.background = oncolor;
}
getTr[j].onmouseout = function()
{
this.style.background = offcolor;
}
}
}
}
window.onload = changeRows;
</script>
<![endif]-->
scrupul0us
02-05-2007, 11:47 PM
cool.. all i changed was:

<!--[if lte IE 6]>

to

<!--[if IE]>

and now it works just great... thanks
scrupul0us
02-05-2007, 11:54 PM
oh yea.. is there a good place where i can get a handle on <!--[if lte IE 6]> kinda statements

stuff like that im not so hot at
_Aerospace_Eng_
02-06-2007, 04:48 AM
Sighs IE 7 didn't need the javascript. Look.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
table thead tr {
background-color: #DEE7EC;
}
table thead tr td {
border-bottom: 1px solid #8CACBB;
color: #666666;
font-weight: bold;
}
table > tbody > tr:hover {
background-color: #E5E9EC;
}
</style>
<!--[if lte IE 6]>
<script defer type="text/javascript">
var oncolor = "#E5E9EC";
var offcolor = "#FFF";
function changeRows()
{
var getTableBody = document.getElementsByTagName('tbody');
for(var i = 0; i < getTableBody.length; i++)
{
var getTr = getTableBody[i].getElementsByTagName('tr');
for(var j = 0; j < getTr.length; j++)
{
getTr[j].onmouseover = function()
{
this.style.background = oncolor;
}
getTr[j].onmouseout = function()
{
this.style.background = offcolor;
}
}
}
}
window.onload = changeRows;
</script>
<![endif]-->
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td align="center" width="50px">ID</td>
<td align="center" width="75px">CODE</td>
<td align="left" width="auto">NAME</td>
<td colspan="2" align="center" width="150px">IN STOCK</td>
<td align="center" width="25">&nbsp;</td>
<td align="center" width="100px">QTY USED</td>
<td align="center" width="100px">ADD STOCK</td>
</tr>
</thead>
<tbody>
<tr>
<td align="center" width="50">id</td>
<td align="center" width="75">code</td>
<td align="left">name</td>
<td colspan="2" align="center" width="150">instock</td>
<td align="center" width="25">&nbsp;</td>
<td align="center" width="100">qty used</td>
<td align="center" width="100">add stock</td>
</tr>
<tr>
<td align="center" width="50">id</td>
<td align="center" width="75">code</td>
<td align="left">name</td>
<td colspan="2" align="center" width="150">instock</td>
<td align="center" width="25">&nbsp;</td>
<td align="center" width="100">qty used</td>
<td align="center" width="100">add stock</td>
</tr>
<tr>
<td align="center" width="50">id</td>
<td align="center" width="75">code</td>
<td align="left">name</td>
<td colspan="2" align="center" width="150">instock</td>
<td align="center" width="25">&nbsp;</td>
<td align="center" width="100">qty used</td>
<td align="center" width="100">add stock</td>
</tr>
</tbody>
</table>
</body>
</html>

The hover on the tr works fine in IE7. http://www.quirksmode.org/css/condcom.html

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum