# Site not displaying correctly in IE or Opera



## webmiss3531 (Feb 12, 2011)

this is my first attempt at a site for a client -
designed layout in AI CS5, sliced image from there, used dreamweaver to layout pages
seems to be fine in Safari, FF and Chrome
not sure what I am doing wrong - have checked with validators and doesn't pick up anything...
need help as client is getting pretty PO
I am very new to all this so please be patient


----------



## webmiss3531 (Feb 12, 2011)

too funny - just remembered I didn't give a link... sorry
http://www.thepossibilities.ca/new/index2.html


----------



## colinsp (Sep 5, 2007)

Looks exactly the same (which is also looks fine) in IE8 and in Opera 11.01 for me. Try clearing the browser cache?


----------



## webmiss3531 (Feb 12, 2011)

tried that and it didn't work


----------



## colinsp (Sep 5, 2007)

Given that it looks OK to me it is either something at your end OR a subtlety that I am missing. How about a couple of annotated screenshots?


----------



## sepala (May 20, 2010)

colinsp said:


> Given that it looks OK to me it is either something at your end OR a subtlety that I am missing. How about a couple of annotated screenshots?


Good idea :up::up:


----------



## webmiss3531 (Feb 12, 2011)

Here is the top and bottom banner - the worst areas - this is from Opera, but it is basically the same in IE too... so frustrating!


----------



## webmiss3531 (Feb 12, 2011)

this shot of the very top may be the start of it all...?


----------



## ehymel (Aug 12, 2007)

This is a *textbook* example of why site layout should not be done with tables. This kind of thing will drive you nuts, you'll fix one area and break another. I know this answer is not helpful to you, but since you are new to this, you should know that you should use css for layout and reserve tables for tabular data :-(

To attempt to figure out the problem here, you can try things like setting border=1 one element at time to figure out where the problem lies. Once you do that, perhaps you can see where the problem is and patch it up.


----------



## colinsp (Sep 5, 2007)

As Ehymel says tables seem to be causing your problem BUT just to show you that all looks fine to me here is a screen shot of the top right corner in Opera so I still stick with what I say something odd at your end too.


----------



## DrP (Jul 23, 2005)

Resisting the urge not to help because you've built it using tables...

...it looks fine in Opera to me, and IE8.


----------



## sepala (May 20, 2010)

If others can view your site without a matter, then this is not a browser compatibility issue. The problem maybe something in your side. Is this is the only site you are seeing like this?


----------



## webmiss3531 (Feb 12, 2011)

my client has IE8 and when she views it - it doesn't work - when I preview it in IE and Opera, it doesn't work - (does same thing in both browsers) if I get my husband and son to check on their PCs - same thing ... I have spent a gazillion hours doing this 'as a favour' - very upfront about my minimal skills, now I'm thinking - no good deed goes unpunished!... am I really going to have to try to learn CSS to fix this?


----------



## sepala (May 20, 2010)

webmiss3531 said:


> my client has IE8 and when she views it - it doesn't work - when I preview it in IE and Opera, it doesn't work - (does same thing in both browsers) if I get my husband and son to check on their PCs - same thing ... I have spent a gazillion hours doing this 'as a favour' - very upfront about my minimal skills, now I'm thinking - no good deed goes unpunished!... am I really going to have to try to learn CSS to fix this?


If it is I can't say it is a error in your side. But I doubt why it is not working for yours and your friends, but works for others. I thought this is due to some registry issue, but seems like it is not, because it seems you can view other sites without a problem. Anyway, yes, CSS may be the answer. Anyway, DrP or ehymal can advice here regarding this issue better than me.


----------



## ehymel (Aug 12, 2007)

Well, you won't learn CSS quickly enough to tackle this site if your client is already impatient!

For what it's worth, I rebooted into Windows 7 and your site looks just fine in IE8. Nice looking site, too!

Have you suggested to your client to switch to Firefox? 

I have one idea, it's a long-shot but worth trying. I haven't studied your html source closely and compared with the screen shots you showed, but I do see that in some ares you have [TD] tags separated by lots of whitespace from the content, like an <img> tag. Try eliminating the whitespace and see if that helps. For example, you have lines like:


```
<tr>
		<td colspan="7" align="left" valign="top">
			<img src="images/lrgbanner6.jpg" width="169" height="175" alt=""></td>
	</tr>
```
Instead, change to:

```
<tr>
		<td colspan="7" align="left" valign="top"><img src="images/lrgbanner6.jpg" width="169" height="175" alt=""></td>
	</tr>
```
Or even:

```
<tr><td colspan="7" align="left" valign="top"><img src="images/lrgbanner6.jpg" width="169" height="175" alt=""></td></tr>
```
This sort of thing used to matter in some browsers, not sure if it does anymore. Just one of the joys of tables!


----------



## rotarysteve (Dec 27, 2010)

On me home computer, it looks just fine in IE8, Firefox and Opera.


----------



## rotarysteve (Dec 27, 2010)

checked it on the w3c and only a couple things that css would take care of, can't image that would break the display.... It is a very nice looking site.


----------



## sepala (May 20, 2010)

ehymel said:


> Have you suggested to your client to switch to Firefox?


Hi ehymel,

Don't you think this is a bad idea?


----------



## ehymel (Aug 12, 2007)

sepala said:


> Hi ehymel,
> 
> Don't you think this is a bad idea?


I was being facetious of course.


----------



## sepala (May 20, 2010)

ehymel said:


> I was being facetious of course.


:up::up:....how is my new avatar?


----------



## webmiss3531 (Feb 12, 2011)

still at it - another forum note mentioned the spacer.gif's at the bottom of the code - added automatically by dreamweaver - if I delete these, my troubles intensify... how do I get these to show on the design to tell if they are what are causing trouble - thinking I may be able to adjust them to make it work... ideas...


----------



## ehymel (Aug 12, 2007)

Same thing as for tracking down problem table elements: add border=1 to the <img> tag so you can see them.


----------



## ehymel (Aug 12, 2007)

I have one other suggestion.

I used firebug (Firefox plugin) to change your table border=1 and interestingly almost completely reproduced the behavior you are seeing in the screenshot you posted. This leads me to believe that some browsers are simply spacing something differently among all of your columns in the table.

My suggestion is to break your page up into more tables instead of one big table. Using one big table produces lots and lots of columns that are dependent on unrelated parts of your page and handled with lots of colspan=blah and rowspan=whatever. Your new page structure would look like this:


```
<table>
   <tr><td>
      <table>elements of logo, picture, facebook etc links</table>
   </td></tr>
   <tr><td>
      <table>navigation links</table>
   </td></tr>
   <tr><td>
      <table>
         <tr>
           <td>page content</td>
           <td>sidebar content, perhaps its own table?</td>
         </tr>
      </table>
   </td></tr>
   <tr><td>
      <table>footer</table>
   </td></tr>
</table>
```
Obviously this adds more tables, but each table is a lot simpler and independent of columns from an unrelated portion of the page. By the way, the approach I outlined is essentially what elements with css specs do for you, but you're doing it with tables instead.


----------



## webmiss3531 (Feb 12, 2011)

Well - I'm still at it - I added an exception for IE at the start of ea page and went thru the spacer sizing - it seemed to work initially, but now I'm not sure - If I preview in IE it looks good - by my preview in Opera is still wonky... I will try the table idea from E, but thought I'd post this to see how it is looking on 'your' end... thnks for help


----------



## webmiss3531 (Feb 12, 2011)

http://www.thepossibilities.ca/new/index.html


----------



## ehymel (Aug 12, 2007)

Not good... see attachment for view from IE8 on Windows XP.


----------



## webmiss3531 (Feb 12, 2011)

Great! - back to where I started! - do you think the tables trick would solve this issue?


----------



## ehymel (Aug 12, 2007)

webmiss3531 said:


> Great! - back to where I started! - do you think the tables trick would solve this issue?


Hard to know, but I don't know what else to try short of converting all to css


----------



## rotarysteve (Dec 27, 2010)

Did more study on your site, and what you are trying with the tables is really messing up your page. It used to work for me on IE8 but it is all broken up for me now. Gotta study this some more.... Seems like you are trying to squeeze in different heights and widths for cells which is leaving the blank spaces....


----------



## rotarysteve (Dec 27, 2010)

Starting to understand how you have put your tables together and this will never work.... It just ain't gonna work. You are gonna have to really redefine your page in tables, or restart with very limited use of the tables and rely more on css.

It just will never work as it is now. All respects to be sure....

Steve


----------

