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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Browser Incapability And Inconsistency!

    Hello World,

    I developed a dynamic grid with PHP, which displays images in table cells. I verified my code again and again especially value of cellpadding is set to 0. Here is the result on firefox and internet explorer.

    Please help me why there is gap(padding, margin or border) at the bottom of each cell in internet explorer, although everything is set to be zero, as u can see in firefox result.

    I am so itchy... by seeing the compatibilities issues. Don't these Microsoft guys really care of XML/XHTML/SGML standards?
    Please help!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    A link to your page would be very useful to comment. (Or give the html+CSS)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You could try adding

    *{margin:0;
    padding:0;}

    to the start of your css.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the code

    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>
    
    
    
    	</head>
    	<body>
    	<style type="text/css">
    .style1 {	font-family: Tahoma;	font-size: 8pt;	direction: ltr;}.style3 {	color: #666666;}.style5 {	border: 1px solid #808080;}.style6 {	text-align: right;}.style7 {	color: #800000;}</style>
    		<table bgcolor="#FF0099" border="0"  style="margin-top: 0px;padding: 0px;" cellpadding="-10" cellspacing="0" bordercolor="#333333">
    			<tbody bgcolor="#666666">
    				<tr bordercolor="#669900">
    					<td rowspan="8">
                        <a style='cursor: hand'><IMG SRC = 'upload/aaa.jpg' border=0 ></a>					</td>
    					<td colspan="6">
                        <a style='cursor: hand'><IMG SRC = 'upload/b.jpg' border=0 ></a>					</td>
    					<td rowspan="8">
                        <a style='cursor: hand'><IMG SRC = 'upload/aaa.jpg' border=0 ></a>					</td>
    				</tr>
    			<tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td rowspan="10"><a style='cursor: hand'><IMG SRC = 'upload/aaa.jpg' border=0 ></a></td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td rowspan="10"><a style='cursor: hand'><IMG SRC = 'upload/aaa.jpg' border=0></a></td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td  colspan=2  rowspan=2><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr><tr><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td><td ><a style='cursor: hand'><IMG SRC = 'upload/sale.jpg' border=0></a>
    					</td></tr>
    				</tbody>
    			</table>
    	</body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    You could try adding

    *{margin:0;
    padding:0;}

    to the start of your css.

    Frank
    The universal selector is not working in the given context! Same result

  • #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
    You get these inconsistencies and incompatibilities when you have poorly written code.

    Why do you have your CSS in your body tag? It goes within the head element.

    Why are you using tables for page layout? I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?".

    Why are you using cursor:hand? Thats not even valid CSS.

    I think you actually hire a frontend person and just stick to the backend.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <base href="http://ensuite-us.com/">
    <style type="text/css">
    .style1 {
    font-family: Tahoma;
    font-size: 8pt;
    }
    .style3 {
    color: #666666;
    }
    .style5 {
    border: 1px solid #808080;
    }
    .style6 {
    text-align: right;
    }
    .style7 {
    color: #800000;
    }
    table td a img {
    display:block;
    border:0;
    }
    </style>
    </head>
    <body>
    <table bgcolor="#FF0099" border="0" cellpadding="0" cellspacing="0" bordercolor="#333333">
    	<tbody bgcolor="#666666">
    		<tr bordercolor="#669900">
    			<td rowspan="8"><a href="#"><img src="upload/aaa.jpg" border="0" alt=""></a> </td>
    			<td colspan="6"><a href="#"><img src="upload/b.jpg" border="0" alt=""></a> </td>
    			<td rowspan="8"><a href="#"><img src="upload/aaa.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td rowspan="10"><a href="#"><img src="upload/aaa.jpg" border="0" alt=""></a></td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td rowspan="10"><a href="#"><img src="upload/aaa.jpg" border="0" alt=""></a></td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td colspan="2" rowspan="2"><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    	</tbody>
    </table>
    </body>
    </html>
    I've cleaned up the code a bit but its still in tables. The issue however is because an image is an inline element and its containing element in this case the td cell adds a line-height. The solution is to make the images display:block.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    Yeah, yeah… those images, tables, and mysterious gaps

  • #8
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Lack of a gap in FF doesn't indicate that the IE gap couldn't be fixed by adding:

    * {margin: 0; padding: 0:}

    You could be getting the IE box problem.

  • #9
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You come up with the best links...

  • #10
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    You get these inconsistencies and incompatibilities when you have poorly written code.

    Why do you have your CSS in your body tag? It goes within the head element.

    Why are you using tables for page layout? I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?".

    Why are you using cursor:hand? Thats not even valid CSS.

    I think you actually hire a frontend person and just stick to the backend.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <base href="http://ensuite-us.com/">
    <style type="text/css">
    .style1 {
    font-family: Tahoma;
    font-size: 8pt;
    }
    .style3 {
    color: #666666;
    }
    .style5 {
    border: 1px solid #808080;
    }
    .style6 {
    text-align: right;
    }
    .style7 {
    color: #800000;
    }
    table td a img {
    display:block;
    border:0;
    }
    </style>
    </head>
    <body>
    <table bgcolor="#FF0099" border="0" cellpadding="0" cellspacing="0" bordercolor="#333333">
    	<tbody bgcolor="#666666">
    		<tr bordercolor="#669900">
    			<td rowspan="8"><a href="#"><img src="upload/aaa.jpg" border="0" alt=""></a> </td>
    			<td colspan="6"><a href="#"><img src="upload/b.jpg" border="0" alt=""></a> </td>
    			<td rowspan="8"><a href="#"><img src="upload/aaa.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td rowspan="10"><a href="#"><img src="upload/aaa.jpg" border="0" alt=""></a></td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td rowspan="10"><a href="#"><img src="upload/aaa.jpg" border="0" alt=""></a></td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td colspan="2" rowspan="2"><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    		<tr>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    			<td><a href="#"><img src="upload/sale.jpg" border="0" alt=""></a> </td>
    		</tr>
    	</tbody>
    </table>
    </body>
    </html>
    I've cleaned up the code a bit but its still in tables. The issue however is because an image is an inline element and its containing element in this case the td cell adds a line-height. The solution is to make the images display:block.
    Code:
    a {
    display:block;
    border:0;
    }
    resolved the issue!
    Thanks a lot...
    IE is still much dumber than i thought!
    BTW my grid generator would be more complicated if i use divs and spans in order to DESIGN WITHOUT TABLES. I have assigned numbers to cells in calculations... but if i rely on divs, i have to calculate there positions (in terms of pixels) on the page.

    KIS method.. if u have more KISer method with divs, to fit in my underlying algo... plz temme!

    Thanks a lot... Btw, if u r offended by microsoft comment, I can't debate much on that. I just gothorugh the known CSS book DESIGN WITHOUT TABLES which states number of times that EVEN LATEST VERSION OF Microsoft Doesnt SUPPORT THIS FEATURE and since so forth!
    Microsoft should start copying MOZILLA's parsers!
    Last edited by adeel_bm; 02-15-2008 at 11:52 AM.

  • #11
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Broken Grid

    http://ensuite-us.com/help.htm

    Once again firefox is showing the results and internet explorer is not! (breaking up the grid)

  • #12
    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
    You are still using tables for page layout. You need to start following standards whether its easier or not.

    You have 187 coding errors. Fix them. See them here.

    The first error is likely causing IE to not display the page properly.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    THANKS FOR REPLY
    Now I am done with the errors I am getting green flag "This Page Is Valid HTML 4.01 Transitional!"
    But still the problem exists.. its something with colspan and rowspans which are generated by PHP.
    http://ensuite-us.com/help.htm is just an instance of the output. Now the code is very simplified. Mozilla is still showing the appropriate results but internet explorer is showing some area near middle of the page, which is neither row/column of the page nor SELECTABLE from any HTML editor's design mode!

    PLEASE HELP!

  • #14
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Finally, I have made the entire dynamic-grid structure with DIVs by calculating the absolute tops and lefts and the issue is resolved.
    Thanks for your concern and suggestions.

    Cheers!

  • #15
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    http://www.ensuite-us.com/jeddahtota...emp1.php?cat=1
    here is the link of the recent version of my webapp. the html gui now contains one table and the remaining structure consists of divs. (excluding tooltip)
    Once again, the issue resides within internet explorer.
    viz,
    when i contract the size of the window, the background image of the header disappears to some extent from right of the page. Same with maximized window when resolution is 800x600!

    :-(


  •  

    Posting Permissions

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