CSS layout messed up in firefox but not IE or Opera?_问答_开发者

CSS layout messed up in firefox but not IE or Opera?

开发者 https://www.devze.com 2023-01-06 12:59 出处：网络

For som开发者_高级运维e reason Firefox is messing up the following websites layout, it works fine in IE and Opera though...

相关专题：css layout xml

For som开发者_高级运维e reason Firefox is messing up the following websites layout, it works fine in IE and Opera though...

http://87.194.141.33/bivakas/shop

I have tried using firebug to find missing divs or anything like that but sadly without success. If anyone would be willing to take a couple minutes to have a look at why this may be happening I would be very grateful.

Thanks!!

Start with basic automated QA of the markup and CSS…

… no, scratch that. Start with not abusing tables for layout.

Opera provide a good introduction to web development using modern techniques.

The entire layout is in an 8 by 9 table, inexplicably wrapped in 2 divs (ID'd as "header" and "bvhead", no less).

It appears that the problem is a mismatch between the number of columns, from row to row, and the number of rows, due to math errors in the use of colspan and rowspan. But, after a couple of minutes of trying to fix it, I gave it up as a bad job.

Recommendations:

The site has scores of errors -- which different browsers cleanup in different ways. Validate the HTML and fix the errors. Likewise validate and fix the CSS.

If you must use tables, don't wrap the whole site in one monster one! Minimize side effects and interaction problems by using a new table for each section.
Lose the misleading and extraneous divs.
So instead of:

<body>
    <div id="header">
        <div id="bvhead">
            <table id="bvmaintable">
                ... Entire site here!!!
            </table>
        </div>
    </div>
</body>

Use something like:

<body>
    <table id="bvHeader">
        ... 
    </table>
    <table id="bvAnnoyingAnimation">
        ... 
    </table>
    <table id="bvMenu">
        ... 
    </table>
    <table id="bvBody">
        ... 
    </table>
    <table id="bvFooter">
        ... 
    </table>
</body>

Note that this allows a different number of columns from one section to the next, is more semantically valid, and makes future cleanup of the table layout easier.

Instead of using rowspans, consider using a table-within-a-table-cell. As ugly as it is, it makes more sense for parts of your layout and eliminates some of the row/column math errors.