/    Sign up×
Community /Pin to ProfileBookmark

Best current box model hack

Copy linkTweet thisAlerts:
Nov 12.2007

Hi,

I went and got myself another CSS book……….

It was printed last year before IE7 was out (why can’t i find a book that includes this?)
Anyway Ive got to the section on box model hacks and it uses whats caled the Tantek Celik hack using a load of bizarre code to do with voice familys. I have seen the * hack before and was almost comfortable with it but this book doesnt mention it.

Can someone tell me what is the current best practise for the older browsers with the box issue. I did a bit of searching on the web and this looks good:

  • * html div { /* This is the Tan hack */
    width: 130px;
    width: 100px; }

    • Easy to implement i think but is it the best way now?

    Thanks
    Liz

    to post a comment
    CSS

    5 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @ryanbutlerNov 12.2007 — I personally prefer IE conditional comments for my box model hacks since IE is usually the culprit.
    Copy linkTweet thisAlerts:
    @Declan1991Nov 12.2007 — I personally prefer IE conditional comments for my box model hacks since IE is usually the culprit.[/QUOTE]
    Me too. It also separates everything into a separate stylesheet, leaving the master stylesheet free from those hacks.
    Copy linkTweet thisAlerts:
    @CentauriNov 13.2007 — If you use a valid doctype and forget about supporting IE5, then you don't have to worry about any box model hacks...
    Copy linkTweet thisAlerts:
    @LizzyBauthorNov 13.2007 — Thank you for your opinions. I think i will try the conditional comments.

    I wish i could ignore older browsers but I really do try and go for maximum accessibilty.

    Liz
    Copy linkTweet thisAlerts:
    @KravvitzNov 14.2007 — I use both the "[url=http://www.dynamicsitesolutions.com/css/filters/star-html/]* html[/url]" and backslash ([url=http://www.dynamicsitesolutions.com/css/filters/simplified-box-model/]simplified box model[/url]) hacks like you showed and conditional comments together and separately.

    I try to make things degrade gracefully in older browsers.
    ×

    Success!

    Help @LizzyB spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...