My site is OK in FF/Opera/Chrome/Safari but not in IE

[mmq2009]

hi ppl,

newbie here, and having some trouble with my first 'real' project...hope someone can shed some light over it...

my site so far renders as i want in all browsers apart from IE, IE just seems to 'throw' the tables all over the place, if you take a look at it

www.netuseservers.com/clients/qasim/kingdom/index.php

the navigation on the left keeps jumping in IE but not in any other browser :confused:, its not only the navigation the header changes size, some other other tables also change size

im stumped

p.s. what u think of the design? ;)

[Snookerman]

You should really not use tables for layout/design, please take a look at this article:
http://www.hotdesign.com/seybold/everything.html (http://www.hotdesign.com/seybold/everything.html)

I know it's a pain to rewrite a site from tables to semantic html and css so I'll try to find a temporary solution for you until you manage to get rid of the tables.

Good luck!

[mmq2009]

thnx snookerman, but why is it happening and do i get started with this redesign...

would appreciate it if someone would post a little something, my navigation is CSS and most the styling is also CSS, the tables are there for separation

could be something really 'daft' and fixable and not do a complete redesign

[ModernRevolutions]

It looks exactly the same to me in IE as it does in Mozilla.

[mmq2009]

It looks exactly the same to me in IE as it does in Mozilla.

doesn't the left navigation jump down on the index page?

im using ie7, and the ietab with FF3

[ModernRevolutions]

So it does! hahaha I didn't even notice it. Sorry :/

[mmq2009]

So it does! hahaha I didn't even notice it. Sorry :/

lol

any idea why

[Snookerman]

Ok, like I promised here is a temporary solution, find this:

<td bgcolor="#ffffff" height="30">
<table border="0" cellpadding="0" cellspacing="0" width="190">
<tbody><tr>
<td width="4">&nbsp;</td>
<td background="index.php_files/stp2.png" width="6" height="29">&nbsp;</td>
<td background="index.php_files/stp1.png" width="162"><span id="topbar">Popular Products</span></td>
<td background="index.php_files/stp3.png" width="10">&nbsp;</td>
<td width="8">&nbsp;</td>
</tr>
</tbody></table>

and change it to this:

<td bgcolor="#ffffff" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="190">
<tbody><tr>
<td width="4">&nbsp;</td>
<td background="index.php_files/stp2.png" width="6" height="29">&nbsp;</td>
<td background="index.php_files/stp1.png" width="162"><span id="topbar">Popular Products</span></td>
<td background="index.php_files/stp3.png" width="10">&nbsp;</td>
<td width="8">&nbsp;</td>
</tr>
</tbody></table>


Not very semantic but should do it for now.

Good luck!

[mmq2009]

thnx, that did it...
so i take it the best solution is to layout the whole thing in div's rather than tables

[mmq2009]

p.s.
before i close this thread...

would anyone tell me the reasoning behind why the other browsers have no problem with this only IE does

[Snookerman]

Different browsers render the code in different ways. Fx was aligning the content to the top while IE was aligning it in the centre. That is just one of the many problems of using tables for design.

[mmq2009]

ok got it.

kudos to you snookerman :D

[Snookerman]

:D You're welcome, glad to help!

Good luck with your site!