#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Location
    Exeter UK / Las Palmas Spain
    Posts
    8
    Rep Power
    0

    Question Simple CSS & xHTML cross-browser problem


    I'm working on a little project here, trying to design a table-less page using XHTML and style sheets.

    The first version worked only in IE, Mozilla and Opera didn't display them the way I wanted to. So I rebuilt the stylesheet from scratch with cross-browser compatibility in mind and it sort of works in all three browsers, except for one little bit:

    http://gosh.ex.ac.uk/~cs01kb/lg_sample/

    Stylesheet: http://gosh.ex.ac.uk/~cs01kb/lg_sample/css/main.css

    IE6 and Opera 7 correctly display the little bar at the bottom with all the links, but Mozilla Firefox 0.8 doesn't - it displays it under the two main content boxes. I'm just out of ideas on how to try and make it work, it should be so simple.

    Any help on how to get around it would be appreciated.

    P.S.: If you're using any other browser out there (especially on a Mac) just a quick note or a screenie of what the page looks like would be nice... thanks!
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    There are two problems. First, the </xml… tag puts IE6 into quirks mode. Not sure, but Opera, if IDing as IE may emulate IE and go into quirks mode itself. If contributor akh sees this, he may be able to confirm or belie this. Instead of the xml prolog, use a meta statement <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />. Quirks mode may explain why IE and Opera improperly display the page—that's right, Mozilla/Firefox nee Firebird got it right.

    Why is Moz right? You've used floats for your main content, within a container. A float does not take up any real estate, so the container div does not expand. IE improperly expands the containing div (a major goof). The link bar and copyright lines are immediately below the container div which is far short of clearing the floats.

    The following should fix you up:
    Code:
    <p class="copy" style="clear: both;">&copy; Company 2004</p>
    You just need to clear the floats.

    cheers,

    gary
    Last edited by kk5st; February 26th, 2004 at 01:22 AM. Reason: formatting
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo