/    Sign up×
Community /Pin to ProfileBookmark

1024×768 but scale down to 800×600

Copy linkTweet thisAlerts:
Jun 18.2007

Can someone give me some guidance on how I can create the containers divs for a site so that it will:

[LIST]

  • [*]

    “default” to 1024×768


  • [*]

    will scale down to 800×600 if needed due to screen resolution


  • [*]

    will not get bigger than 1024×768 (lets say if screen resolution is 1600×1200)


    • [/LIST]

    thanks.

    to post a comment
    CSS

    5 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @David_HarrisonJun 18.2007 — Well, it should be as simple as this:#container{
    width:1000px;
    max-width:100%;
    }    But it isn't, because of IE. IE doesn't get max-width, so it'll ignore it. Instead IE needs this:#container{
    width:expression((document.width.clientWidth<1000)?"100%":"1000px");
    }    Basically it's the same as the first code, if the page width is less than 1000px, it'll set the width to 100%, else the width is set to 1000px.

    The tricky bit is finding a way to combine the two, personally I recommend a separate style sheet for IE, that caontains all of the little fixes needed. Then that can be added to the page in a conditional comment.

    Check out the source of [url=http://david.hddkillers.com/Grando%20Espada%20Website/]this page[/url]. There's a stylesheet that only IE uses in conditional comments, and then in the stylesheet itself, you can see the very same expression() in use.

    The use of expression() in CSS to allow the use of JavaScript is totally NOT in the CSS specification, so the code will not validate. But it's OH so useful at times.
    Copy linkTweet thisAlerts:
    @saeauthorJun 18.2007 — perhaps something can be done using php and different css style sheets? If so how would I got about finding the screen resolution in php?
    Copy linkTweet thisAlerts:
    @David_HarrisonJun 19.2007 — You can't detect the users screen size with PHP, and I did just post a way to do exactly what you want with CSS (and a little fix for IE).

    You could etect the users browser though, then decide to serve up or not serve up the IE style sheet with the fix in, however I wouldn't rely on that method. By default Opera pretends to be IE and so do a few other browsers. Conditional comments are the most reliable way, since they will ONLY work in IE.
    Copy linkTweet thisAlerts:
    @saeauthorJun 19.2007 — Conditional comments are the most reliable way, since they will ONLY work in IE.[/QUOTE]

    But Validation is also very important.
    Copy linkTweet thisAlerts:
    @David_HarrisonJun 19.2007 — Conditional comments are fine validation wise, they just look like regular ol' HTML comments to everything other than IE (including the W3C validators). The thing that doesn't validate is expression().

    However, sometimes validation can be sacrificed, if it does not impact the page accessibility in any way, but does have beneficial effects. Validation is one step towards accessibility, however 100% strict adherence to the W3C recommendations isn't always the best way, sometimes you have to use a bit of proprietary code to get the job done.

    For example, IE5 does not recognise cursor:pointer;, for IE5 the rule needs to be cursor:hand;. The code can be made to work by simply using both, pointer first (which real browsers will understand), then hand (which IE5 will understand and real browsers will ignore). This will result in invalid code, however the cursor change will be seen by more people as a result.
    ×

    Success!

    Help @sae 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 5.5,
    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: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

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