Web Design Browser display issues

I am building a website for my department at work and I've run into some problems. I'm a bit rusty with HTML and CSS as I have not made a web page since around 2002 or 2003. On my first attempt I was lazy and used Microsoft FrontPage to build the site. It ended up looking great in IE but in Firefox it was all screwed up. A friend tried to help me with it and she said that it was easier to design for Firefox and fix anything that might look messed up in IE later.

I ended up starting over and writing the code myself instead of using FrontPage. Now I have the opposite problem. My site looks great in Firefox (except for a few minor annoyances) and not so great in IE. I feel like I'm in better shape now though because if I can get some help I think that the things that are messed up in IE can be fixed easily.

On this page the top border on the main table is missing when you view it in IE. I would also like to have a black border around the small blue table on the bottom. I've tried messing with the css and I always seem to get a border where I DON'T want one. (Oh, and ignore the ugly blue backgrounds on the small tables within the main table. They're just place holders! )

This other page has the same border problems that the first page has. Also, the blue rounded table gets shoved to the left of the page when you look at it in IE.

I've asked some of my friends for help and they seem to think that I need to start over and ditch the tables completely. They think that I should use a CSS layout because its easier to make CSS layouts look the same in different browsers.

I've tried everything that I know how to try and this is driving me nuts. If anyone can see anything that I haven't seen and can help me I would really appreciate it. Thank you in advance!

 

IE is showing it just fine for me...of course I am on a laptop and using IE6...so that may have a BIG thing to do with the way that it is viewing.

 

Your Coding...

Just a curiousity to start... why are you using tables for your layout instead of CSS? The new standards put forth say that CSS should be layout, and tables should be for tabular data. I really don't care either way, personally, but you were already using CSS for other things so it seems you could use CSS for your layout.

As far as your question, I believe there may be issues with your coding. You have this:

<style type="text/css">
<!--
.border {border-top: 1px solid; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000;}
table, tr, td, th {border: 0px;}
-->
</style>

Where your top border does not define your color (which I think you need to have), and then you define this in your table:

<td width="445" class="border" align="left" valign="top">

That tells me that you don't want a border on this TD (based on your second CSS line above), which is what holds the picture, which may explain why you don't have a top border. Try to either take that out, or make that "border: 1px" as a test and see if that helps.

I could be off base, as I am not looking at any of my reference material (which I rely on as I develop, as my memory for CSS and HTML is not all that good yet), but it would not hurt to test!

 

Thank you for the suggestions. I use tables because I've never used CSS for layouts before and I'm scared of it. I'll give it a try and see what I come up with!