I have recently tried building my first website ( www.xageconsulting.com ) using Dreamweaver. I use Firefox on my laptop, so was surprised what happened when I opened the site in IE.

I have two issues that I cannot fix despite searching for solutions for 2 days.

- The main green box on the left containing the picture expands horizontally in IE and not in other browsers. This happens in all pages. I think it is happening in the green column to the right of the column that holds the picture.
- The top of the main green box is separate to the rest of the box. This happens in the homepage only so I have tried copying code across from other pages to fix the problem. This happens in all browsers, so not just an IE issue.

Any help would be appreciated. I am a novice at website building, so any explanations need to be kept simple.

Thanks.

Probably not what you want to hear, but I'd consider starting again.

You're using tables, which are abit last century. this is probably dreamweavers fault though, so don't beat yourself up over it.

Now, seeing as you're already using tables, you might as well use them alittle better. the problems I can see are that your entire page, from the green box to the main content, (table id="main_body") is sharing one table.

I would consider building a table for the green box, and nesting it to the left of a bigger table with just one cell. You could then div your content with <div style="float:right; width:400px;" align ="left"> and it'll look very similar, but work better.

The problem with the detachment you're seeing for the top cell (green box) is that the image you're displaying isn't as tall as the cell containing it. This is probably down to the content on the right pushing the cell upward. Rather than have a cell containing an image, have an empty cell with a background image which is at least twice the height you need.

The above ideas should sort all the problems you mentioned in your post.

Something you should expect though, one day, someone will come along and tell you that tables are dead and expect you to go and change everything to divs and css. expect a berating, cos you'll get it.
It's good advice if you've done this before and know your way around css, but not if you're using Dreamweaver's wysiwyg to build your site. Search engines prefer CSS sites as they have less code:content, but it's not as easy as using a wysiwyg.

Everyone needs to start somewhere and I think you've started well. Nice simple design that works well (rethink the top menu into text links though).

Carry on the way you're going and only change to CSS once you fully understand what you're doing. In the meantime, go and find out what CSS is all about (in your spare time, obviously). You can still use it with tables!

  

<tr bgcolor="#FFFFFF">

    <td height="43" colspan="6"><div align="left"><span class="style8"><font color="#333333"><img src="Images/Xage%20Consultancy%20Bottom%20Banner.jpg" alt="" width="800" height="40"></font></span></div></td>

  </tr>

Remove the dot from the footers code like shown above (<font color="#333333">.<img src="Images/Xage%2) and your website should render fine.


Encapsulate the top-image from the left sidebar with a <div> with specified height/width to eliminate its whitespace below.

<div style="width:310px; height: 20px;" ><img src="Images/Xage%20Consultancy%20Box%20Top.jpg" alt="" height="20" width="310"></div>


respect to grifinsbridge

Totally agree with grifinsbridge reference css.
I too am a novice at webdesign and have just published my first site ( see site review). I used web expression which I found very easy to use with a css site.
also try validating your pages on http://validator.w3.org/ I found this quite usefull for identiying problems.