Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS table elements... works on FF not IE

    CSS:
    Code:
    <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
    PHP Code:
    <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($resultMYSQL_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:


    IE:
    Attached Thumbnails Attached Thumbnails CSS table elements... works on FF not IE-ff.gif   CSS table elements... works on FF not IE-ie.gif  
    Last edited by scrupul0us; 02-05-2007 at 10:08 PM.

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Code:
    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

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    good catch non-the-less... hopefully someone else can help as well

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    IE6 doesn't support the child selector like you are using. IE7 should though.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i am using 7

    what would be the way to provide maximum compatibility

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this in between your head tags
    Code:
    <!--[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]-->
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    cool.. all i changed was:

    <!--[if lte IE 6]>

    to

    <!--[if IE]>

    and now it works just great... thanks

  • #10
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Sighs IE 7 didn't need the javascript. Look.
    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>
    <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
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •