Sizing issues

I've run into a problem trying to make my pages render consistently. On my work computer (which is default-set to 1280 x 1024 monitor resolution and running on Microsoft Internet Exploder 7), my homepage always has elements out of place, even though the page validates in both XHTML and CSS. On smaller monitors, it seems to work fine on IE6+, Firefox, Safari and even Opera.

I've tried creating a content "box" and fitting everything in it, but it doesn't work. Do I need to use absolute positioning and set margins by pixels, or something else?

g.

We need a link!

Here's the link to the site:

http://baseballposse.us

I can't send the CSS until I get home in about six hours.

thanx,
g.

Well the only elements that are out of place is the counter and the W3C logos because they are out of the container div ... otherwise ... I don't have IE7 so I can check what the problem is in that browser but I am viewing it in FF with the same res as you and that's what I see.

You start off nicely with CSS then start using tables... weird. Anyway i assume your problem is the black background in IE7.

I can't see much to be honest with you. When i come across problems like this i go down each individual element and add a border to it. This way i will find what is causing it.

A cause for the problem could be this...

HTML: Select all

 .box td
       {
        width: 400px;
}

You have 2 td's next to each other which makes 800px and your container width is 795px. Its just a shot in the dark though.

Also why do you have header absolutely positioned?

For future reference you can link directly to your css
http://baseballposse.us/vert3.css

Looks fine in FF 2 and IE7

Jason--

I really didn't want to use tables. Actually, I don't like tables. Hard to deal with and slow to load. I just couldn't find a way to position elements in CSS without having them move radically out of place whenever a user made the text size larger or smaller.

I'd like to, though.

g.