...

View Full Version : Browser Incapability And Inconsistency!



adeel_bm
02-14-2008, 10:04 AM
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 (http://ensuite-us.com/firefox.jpg)and internet explorer (http://ensuite-us.com/iexplore.jpg).

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!

abduraooft
02-14-2008, 10:48 AM
A link to your page would be very useful to comment. (Or give the html+CSS)

effpeetee
02-14-2008, 11:24 AM
You could try adding

*{margin:0;
padding:0;}

to the start of your css.

Frank

adeel_bm
02-14-2008, 11:37 AM
Here is the 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>

adeel_bm
02-14-2008, 01:59 PM
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

_Aerospace_Eng_
02-14-2008, 02:47 PM
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.


<!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.

VIPStephan
02-14-2008, 03:00 PM
Yeah, yeah… those images, tables, and mysterious gaps (http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps)…

jerry62704
02-14-2008, 03:09 PM
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.

jerry62704
02-14-2008, 03:15 PM
You come up with the best links...

adeel_bm
02-14-2008, 08:18 PM
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.


<!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.


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!

adeel_bm
02-21-2008, 04:43 PM
http://ensuite-us.com/help.htm

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

_Aerospace_Eng_
02-21-2008, 04:58 PM
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 (http://validator.w3.org/check?verbose=1&uri=http&#37;3A%2F%2Fensuite-us.com%2Fhelp.htm).

The first error is likely causing IE to not display the page properly.

adeel_bm
02-21-2008, 08:23 PM
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!

adeel_bm
02-23-2008, 07:38 PM
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!

adeel_bm
02-27-2008, 10:06 AM
Hi,
http://www.ensuite-us.com/jeddahtotalbusiness/temp1.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!

:-(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum