IMG problem in IE7

[theighost]

Hi,

I am making a site, in firefox it looks fine, but in IE its a mess, take a look at the first page, you will see that the images are not filling the space as they do with the firefox, although they have the same deminsions.

The site is www.globusproperty.com and the image code is:

<TD valign='top' height='75px' width='75px' align='left'>

              <a href = 'details.php?id=31 '><img src='http://www.globusproperty.com/images/properties/31/globusproperty_s_Mauritius_Port-Louis_Waterfront.jpg' border='0' width='75px' height='75px' ></a>
            </td>

This IE Sh** makes me nervous, I have other problems with javascript and ajax. IE should be banned

[somedude3488]

in IE7 and Firefox3, I really don't see any difference. Which browser are you using?

[theighost]

well firefox3 but IE 6, should I neglect making the site work in IE6 and concentrate on IE7

[somedude3488]

No, I wouldn't neglect it as there a still a lot of people using IE6. If there are that many problems, just put an easily visible message displaying the browsers the site was made for. I don't recommend this, but sometimes browsers just won't work as you expect/want them too.

Can you upload a screen shot of what you are seeing in IE6? I don't have the ability to use IE6 right now. Once I see what you are talking about I might know of a fix.

[theighost]

No, I wouldn't neglect it as there a still a lot of people using IE6. If there are that many problems, just put an easily visible message displaying the browsers the site was made for. I don't recommend this, but sometimes browsers just won't work as you expect/want them too.

Can you upload a screen shot of what you are seeing in IE6? I don't have the ability to use IE6 right now. Once I see what you are talking about I might know of a fix.

here is the screenshot

[theighost]

even with IE8 it doesnt look good

[diafol]

<TD valign='top' height='75px' width='75px' align='left'>
              <a href = 'details.php?id=31 '><img src='http://www.globusproperty.com/images/properties/31/globusproperty_s_Mauritius_Port-Louis_Waterfront.jpg' border='0' width='75px' height='75px' ></a>
            </td>

I noticed that your open/clode tags are uppercase/lowecase and that the img tag isn't 'self-closing' or 'empty'. Also your attribute values are all encapsulated by single quotes - should be double quotes. Doubt if this should be the cause of the problem though. In addition have you thought about providing tag attributes/values into CSS instead? If problems persist after this, you can always use (o dear) conditional comments to target browsers.

From what I can see on IE7, you've got a transparent bar along the bottom of your top row images and little gaps in the right cell border opposite the top and bottom of the image.

Just had a look at your source code - its a bit of a mess - about 4 million nested tables by the look of it. Was this generated by a program? Using robust CSS and XHTML, you should be able to achieve the same result with a SINGLE table. However, tables in this instance may be a wrong implementation - tables, strictly speaking are for lisitng tabular data. Your implementation is pretty much for layout. You can achieve a better result with div/span/ul with various CSS classes. This version shouldn't break when the page is resized/viewed with handheld.

[theighost]

<TD valign='top' height='75px' width='75px' align='left'>
              <a href = 'details.php?id=31 '><img src='http://www.globusproperty.com/images/properties/31/globusproperty_s_Mauritius_Port-Louis_Waterfront.jpg' border='0' width='75px' height='75px' ></a>
            </td>

I noticed that your open/clode tags are uppercase/lowecase and that the img tag isn't 'self-closing' or 'empty'. Also your attribute values are all encapsulated by single quotes - should be double quotes. Doubt if this should be the cause of the problem though. In addition have you thought about providing tag attributes/values into CSS instead? If problems persist after this, you can always use (o dear) conditional comments to target browsers.

From what I can see on IE7, you've got a transparent bar along the bottom of your top row images and little gaps in the right cell border opposite the top and bottom of the image.

Just had a look at your source code - its a bit of a mess - about 4 million nested tables by the look of it. Was this generated by a program? Using robust CSS and XHTML, you should be able to achieve the same result with a SINGLE table. However, tables in this instance may be a wrong implementation - tables, strictly speaking are for lisitng tabular data. Your implementation is pretty much for layout. You can achieve a better result with div/span/ul with various CSS classes. This version shouldn't break when the page is resized/viewed with handheld.

Thanks for responding,
I have made it look better, anyway, I have some questions regarding some things u said.

What you said about avoiding to use tables, I heard that before, yet many people are depending on it, and I see even daniweb.com is using td's along with divs (what is the difference if I just used td without div).

I tried designing using divs and css, but its much harder and has other logic, but I am sure if I get used to it the results will be much better.

Where can I learn to design like the 21 century, and quit the bad habits of the 90's, a site or something that is straight to the point (new generation of web designing).

[diafol]

Regarding tables - I would definitely avoid them for your property cards. These should be produced with inline unordered lists (ul/li). If I have time later on, I'll give you a quick bit of markup/css. In addition if you save your data to a db, producing the cards should be a snip with a simple php function.

[diafol]

Right, here's a reasonable attempt at tableless picture cards:

THE CSS:

ul#cards {list-style:none;padding:0;margin:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:24px;}
	ul#cards li{border:orange solid 1px;width:100px; padding: 10px; float:left; height: 150px; margin:10px;}
	ul#cards li img{padding:3px;border:solid grey 1px;margin-bottom:5px;}
	ul#cards li a{display:block;} 
	ul#cards li a.country{color:blue;} 
	ul#cards li a.price{color:green;} 
	ul#cards li a.waffle{color:red;}

THE MARKUP:

<ul id = "cards">
	<li>
		<img src="xxx.jpg" alt="some text" width = "92" height = "60" />
		<a class="country" href="xxx.php?id=26" title="some text">Country</a>
		<a class="price" href="xxx.php?id=26" title="some text">$Price</a>
		<a class="waffle" href="xxx.php?id=26" title="some text">blah blah blah</a>
	</li>
	<li>
		<img src="xxx.jpg" alt="some text" width = "92" height = "60" />
		<a class="country" href="xxx.php?id=27" title="some text">Country</a>
		<a class="price" href="xxx.php?id=27" title="some text">$Price</a>
		<a class="waffle" href="xxx.php?id=27" title="some text">blah blah blah</a>
	</li>
	<li>
		<img src="xxx.jpg" alt="some text" width = "92" height = "60" />
		<a class="country" href="xxx.php?id=3" title="some text">Country</a>
		<a class="price" href="xxx.php?id=3" title="some text">$Price</a>
		<a class="waffle" href="xxx.php?id=3" title="some text">blah blah blah</a>
	</li>
</ul>

This should give you a basic look (image with three text links). The float:left statement with allow the wrapping of cards as the screen is resized. I've only included 3 cards above, but just copy and paste about ten, and you'll get the idea as you resize the browser window.

If you store the property data in a DB, get back to me if you want a simple function to produce these cards dynamically.

[theighost]

Hello,
Interesting use of lists, and about if I take the properties from a DB, yes I do, the script looks like this although I think u expect what it looks like,

<table the big one>
PHP script to select the properties from the DB
open a <tr> and a <td>
open another table and put the property in it
close the table and the <td>
if the number of properties in the row is 6 then </tr>
close the big table.

but as you said, if the lists have the ability to stretch to the window's size, then if I use them, I will not need to put a restriction to the number per row.

Thanks

[diafol]

No problem. Check out the rendering in a few browsers if you decide to use it. This was just a quick implementation off the top of my head (it's pretty bare bones).

[theighost]

thanks