Firefox hates my CSS now so does IE

[sagedavis]

Hey all,
over the years I got in the bad habit of ignoring firefox totally. I am currently working on a project at findacourt.com/test use the /test to get into my little sandbox area.

At any rate, as you can see, there are several things going on here, both in IE7 and Firefox (the latest version). I don't know what it looks like in IE6 at all.

I had been trying to work everything without tables, using only div tags and css, but, after much frustration, I have gone and added a table.

Note, the footer (which you see floating way at the top for some reason), is a div tag the header and the menu are div tags.
All the stuff in between (my adsense, the content in the center, and the information on the right) are a table.

I haven't set anything to hide any of the source, and all CSS is external, so, if you want to take a look at it just go to the findacourt.com/test/style.css

You will notice several problems that are happening.
Even though I set the table width at 100 percent, there is still space after the column on the right hand side.

Even though I have the footer in the code at the very bottom, it still somehow floats it to the top of the page

The text in the center column is somehow dropped down, rather than starting closer to the top.

When I first built this it worked fine in IE7, then when trying to fix it for firefox I messed it up so that all of these same problems happen in IE7.

The sad thing is, I have been working with CSS for years, I just can't figure out where I am going wrong.

Any help would be greatly appretiated.
Thanks
Sage

[JonathanD]

Your best bet is to make sure your HTML validates.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.findacourt.com%2Ftest%2F

that's the first step to having a good looking site. Please note that you don't always need to validate your site to have a good looking site, but if you're running into issues like you are, validating will almost always fix the problem.

[sagedavis]

I always validate,
If you just looked at the site and validated there were some errors in the validation with an unclosed tr, a silly error on my part.

Fixing this did fix the issue with the white space to the right of the 3rd column in firefox, but not in IE. My footer still floats to the top of the screen and my spacing for the content is till odd.

I now validate for XHTML 1.0 Strict, and my CSS validates.

Still the issues arise in both browsers.
Thanks
Sage

[MidiMagic]

I expected the unclosed tr. I have done the same thing.

IE and FF have different defaults for how text adjusts itself inside a td cell. To get them to behave alike, you have to define the vertical-align attribute in the CSS.

Note that is is impossible to make a page perfectly fit vertically in the browser window in a way that works with all browsers and screen resolutions.

Note that the nature of the div is fluidity. It can't be nailed down. If you need a nailed down structure that won't slither away, tables are better.

What is needed is a <dr> tag, to work with divs the way <tr> works with tables.

[sagedavis]

MidiMagic,
I agree with the need for something like the TR tag.

I'm baffled by the empty space to the right of my table, but, I'm almost certain that I need to "float right" in the css for that. particular TD.

Unfortunately, when I do that, something else gets messed up too.

My footer still isn't doing what I need it to do.
Crazy, in my mind this layout was so "simple" to do, but coding it is giving me a headache. And I don't use anything but notepad to do these.

The reason I do it all from scratch is just to keep down my bandwidth/storage space usage. Helper aps take 3 times as much coding to do the same thing.

This is a basic template which will be reused for other projects, PHP has pulled in all the actual text that you see, and all my php stuff is external as well, so it's pretty much important for me to get this template just right, so that I can reuse it.

Thanks so far for all the help.
Keep them coming, it's greatly appretiated.
Sage

[TheAlex]

It could be to do with your mix of absolute and relative positioning; try changing the absolute ones to relative and see what happens. The footer should move to the bottom and then you might have to tweak some of the other positioning to get everything else right.

[MidiMagic]

If empty space appears to the right of a table, then one of the following happened:

- An extra td pair appears in one row.

- an unclosed tag.

- use of the deprecated width= attribute in strict DTDs. Use CSS instead.

- An object inside a containing div, but outside the table, might be placed to the right. It could be a typo after the closing table tag.

- The use of a float in the table tag or its style.

- Absolute positioning messes up when screen resolution or window size changes.

[sagedavis]

This is getting weird.
I've looked through all of my code to ensure that there are no typos or anything, and I even had another person do the same. My other friend doesn't do CSS, so, he can't really be of help with this.

I am certain that you all looked through my code a little to see what the issue is, but, I know with all of the text in it, it could be difficult. So, I will show you the template without all of the stuff in it.

<body>
	<div id="header">
Header
	</div>
<div id="menu">	
Menu
</div> 

	<table id="tblmain">
<tr>
	<td id="left">
	Left
	</td>
	<td id="content">
		content
	</td>
	<td id="right">
		Right
	</td>
</tr>	
	</table>
		
	<div id="footer">
		<p>Footer</p>
	</div>
</body>

The reason why I have css for the table itself has more to do with the need to give it a width of 100%, to force it to stretch across.

The CSS that I am currently using to make this happen is

#header
{
	position: absolute;
	background-image: url('images/navback.jpg');
	width: 100%;
	height: 100px;
	top: 0px;
	left: 0px;
}

#menu
{
	z-index: 2;
	position: absolute;
	background-image: url('images/navback.jpg');
	width: 100%;
	height: 20px;
	top: 100px;
	left: 0px;
}

#tblmain
{
	width: 100%;
	top: 120px;
	left: 0em;
	border-collapse: collapse;
}

#left
{
	background-image: url('images/aback.jpg');
	width: 100px;
	top: 0em;
	left:0em;
	padding: 6px;
}

#content
{
	background: white;
	top: 0em;
	padding: 0em;
}

#right
{
	background-image: url('images/aback.jpg');
	z-index: 1;
	width: 300px;
	top: 0em;
	padding: 0em;
}

#footer
{
	background-image: url('images/navback.jpg');
	width: 100%;
	height: 20px;
	left: 0px;
	text-align: center;
}

my use of Z index here had to do with the fact that, on the menu and in some other places, things were overlapping.
The menu in the CSS here is really just the positioning stuff. I am actually using a trifecta menu with lists here, so there are lots of other things going on, but, I know they aren't the problem, because I have done this without the trifecta and still get the same issues.

Here is a mock up image of what I am trying to get.
Thanks so far for the help.
[img]http://www.findacourt.com/test/layout.jpg[/img]

[JonathanD]

Why don't you just grab a free css template and then customize it? That will probably work better.

[sagedavis]

Because, a template isn't going to tell me what is wrong with my code, nor is it going to teach me anything about how to make things work properly in firefox.

I can read those codes all day long in templates, but, ultimately, they aren't going to show me what I am doing wrong.
Thanks

[MidiMagic]

I see some things:

- You have an absolute size and a surrounding style in the same style entry. Don't put padding and width in the same block object. You can put a padding of 0 in such a style entry, but that is not what you did.

- When you specify a value of 0, you do NOT put a unit of measure on it. Thus, it should be 0, not 0em. The 0em causes a style error, throwing the browser into quirks mode. It put in the default padding, not 0 padding.

[sagedavis]

Thank you all for your replies.
A special thanks however to MidiMagic for 1.) having a cool name and 2.) taking the time to teach me something that I wasn't aware of.

These suggestions helped in such a way that the page now looks like I wanted it to in both FF and IE (as well as Opera now that I think about it).

Thanks again.
Sage

[MidiMagic]

I learned it here!