Firefox CSS issues

RTAdams89 · - Joined: 06 Nov 2005 Posts: 102

Hello all. I have created a web site here:

http://rtadams89.dyndns.org:9555/baseball/index.html

It uses CSS to position the page elements. In IE everything shows up fine, but FF and opera cause the content to move and cover the logo banner at the top. It's hard to explain in words, but if you view the site in IE and then FF you'll see what I mean. You can download my CSS file for viewing here:

http://rtadams89.dyndns.org:9555/baseball/extra/emx_nav_left.css

Anyone know how to fix this?

Moxxnixx · - Joined: 21 Jun 2003 Posts: 1226 Location: Florida

In your css file, the #banner height needs to be changed to 100px.

aprelium · - Joined: 22 Mar 2002 Posts: 6800

RTAdams89,

IE has a special interpretation of the "Box model" (what padding, margins, and relative positions mean) which is different from the other browsers (and the CSS specification).

In the specification, you can read that "When a box B is relatively positioned, the position of the following box is calculated as though B were not offset." (http://www.w3.org/TR/REC-CSS2/visuren.html). That's what Opera and FF do with your second box (Both the first and the second are relative. The position of the first is computed according to the page and the second too). But in IE, the second box is computed relatively to the first hence the problem.

We recommend reading http://www.alistapart.com/articles/flexiblelayouts/ for more details about this issue.

The easiest solution in our opinion is to position the first block absolutely using margins (instead of left and top) and by removing position: relative from the CSS definition of #banner.
_________________
Support Team
Aprelium - http://www.aprelium.com

RTAdams89 · - Joined: 06 Nov 2005 Posts: 102

You lost me on that last one, but changing the banner height to 100px seems to have done the trick. If you don't mind, could someone test the site in opera and any other browsers i have. I only have IE and FF right now.

Moxxnixx · - Joined: 21 Jun 2003 Posts: 1226 Location: Florida

Your site looks the same in Opera. ;)
Only thing is your background gradient tends to disappear behind the pagecell
because I have a much higher resolution for my monitor.

RTAdams89 · - Joined: 06 Nov 2005 Posts: 102

The background is, unfortunately, a problem that may remain. As you know, there is no way to define a width for the background image in CSS, so I can't make it "stretch" to fit the resolution. Any other workarounds?

Moxxnixx · - Joined: 21 Jun 2003 Posts: 1226 Location: Florida

You could make the pagecell "fixed" as well.
Or, you can take a look at this page for an idea...
http://www.htmlite.com/faq022.php