SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Italy
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow firefox 3 hacks.

    Hi,

    Within Css style sheets, while for IE I insert * html #id_element, and for firefox html>body #id_element..
    Please I would to know: what are the hacks for firefox 3 (and IE6 if possible)?

    I have a layout that works perfectly both in IE7 and FF2 but not in IE6 and FF3...

    many thanks.

  2. #2
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of relying on hacks(last resort) post a URI for the page

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can use conditional comments to target any version of IE but targeting any other browsers is always going to be unreliable and not something that I even recommend you try doing.

    If your code isn't working in FF3 then the chances are that you are doing something wrong anyway and a change of code would probably resolve the situation. If you post a link to the page concerned we can have a look and see if there is something wrong with the code or a better way to do what you are trying to accomplish.

    Although you could probably find some advanced selector to target FF3 and not FF2 it would mean that you would also target all the other browsers that use that selector.

    In reality the only browser that is safe to hack for is a dead browser or IE using conditional comments.

    and for firefox html>body #id_element.
    That will target all browsers except IE6 and under - not just Firefox.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Remember to use a full doctype.

    This doctype (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    ) will trip quirks mode and all bets are off.

    Use a full doctype with uri so that the browser renders in standards mode. Then you won't need all the hacks for IE6 as that will render the correct box model when in standards mode. You would still need to do hacks for ie5.x but most people don't bother about that old browser these days.

    Add display:inline to your floats to cure the IE6 double margin bug (If you don't know which floats are affected then apply it to all floats as it will do no harm but read the faq on floats for more info).

    Don't apply position:relative to all divs as that could have dire consequences. Just apply to those that need it.

    Reset the margins and padding on the elements you use (especially lists, paragraphs and headings).


    Don't use this to center the page:
    Code:
    #outer_div {
        position: absolute;
        width: 892px;
        left: 50&#37;;
        top: 50%;
        margin-left: -446px;
        margin-top: -244px;
    }
    That will cause the page to slide off the left of the screen at small screen sizes and be unreachable. Simply use a static element with a width and use margin:auto. The same applies to the top positin and the page will slide out the top of the monitor also.

    Use the method I describe here for the best cross browser vertical/horizontal centering technique.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •