Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Mar 2009
    Posts
    12
    Member #
    18474
    Hi,

    I have been doing some html and css for a while, and am currently working on a second website. My problem is about (mainly) background images.

    To get an image of the best quality possible, i generally use images of 1024 px in width and use a width=100% tag to ensure it fills the screen the proper way.

    My problem is about site visitors who use at the same time IE6 (or older) AND screen resolutions that are inferior to 1000 in width, because IE6 doesn't support the percent thing, and displays images at their original width.

    I am aware that one solution would be to keep the "interesting" part of the image under 800 px in width, so as to make sure that even the users with lower resolution see the "interesting" part of the image without needing to scroll horizontally. And that another solution would be to keep the image smaller altogether (lesser than 800 px in width) but i must say i am appalled with the idea of making the experience less enjoyable for all the visitors who have better resolution and more advanced browsers, just because of a very small minority of site users.

    So, my question is : is there some sort of a fix or workaround that i could use and that would, for instance, serve a different (smaller) background image for users with lower resolutions, or for users who use IR6 ? Something that would be the coding equivalent of : if you use IE6, have the 800x600 image, and otherwise, have the image in 100% width ?

    Hope i made myself clear.. thank you in advance, everyone !

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    You can hack for different browsers but not for different resolutions, but boy that would be nice if we could. I am pasting a reply to a recent question on this....

    Attach a seperate style sheet for ie only. Then you only need to put declarations in there that apply to ie only, then ie will read the other style sheet's declarations as well. Make sure you make it the last style sheet in the head. If you want this style sheet for specific ie's let me know, or you can google it.

    Code:
     <!--[if IE]><link rel="stylesheet" type="text/css" media="screen" href="ie.css" />< ![endif]-->

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Basically the thing is that a flexible background image is rarely a good idea anyway. If the background image is a photograph, you shouldn't be using it. It makes a little more sense with horizontal gradients (vertical ones not so much), but for some reason horizontal gradients don't seem like they work as well for backgrounds a lot of times.

    Unrelatedly, I'm surprised that the image width="100%" isn't working in IE6. Could we see an example?

  5. #4
    Junior Member
    Join Date
    Mar 2009
    Posts
    12
    Member #
    18474
    aeroweb99 > That's GREAT news ! i think that if it can work this way, then i'll just size the images for IE users to the max. universally tolerable width, and stay with the % for the other browsers. Two questions though (just to make sure i have it down pat) :

    1/ Do i need to write a "if..." line for the other browsers too ? (i'd assume no, and that's why i'm supposed to put the line for the IE CSS after the lines to the other CSS)

    2/ If i want that to work, i need to have no "width=" declarations in my HTML at all (i know i shouldn't anyway) and that means that i'll have to declare the width (in %) for the other browsers in my non-IE sheet ?

    It's no biggie either way, just means i have do clean the code a bit.

    Thanks a REAL great lot ! That thing has been like a thorn in my foot for months now !!

    Shadowfiend
    > So far i don't have examples to give of the 100% yet - but that's what i am/was planning to do in my next project. But what i've been doing, is putting images with a 90% width in a fluid three-column layout, and isn't resized, and then overflows.

    I can make up a quick example and post it, if you want me to ?

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    That would be cool

    And yes, by the way, drop the width in the HTML and move it to your stylesheet. You only need an alternate for IE

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Quote Originally Posted by ReverbReverse

    1/ Do i need to write a "if..." line for the other browsers too ? (i'd assume no, and that's why i'm supposed to put the line for the IE CSS after the lines to the other CSS)

    2/ If i want that to work, i need to have no "width=" declarations in my HTML at all (i know i shouldn't anyway) and that means that i'll have to declare the width (in %) for the other browsers in my non-IE sheet ?
    1) No you don't need to put an "if'" for the others. Now you may need different hacks (I hate calling them hacks) for IE6 and IE7.

    Example:

    [if IE] --would be used for all versions of IE
    [if IE6] --would be used for IE6 only
    [if IE7] --would be used for IE7 only
    [if ltIE7] --for versions earlier than IE7
    [if lteIE7]--for versions equal to or less than IE7
    [if gtIE6] --for versions greater than IE6

    There are more you can google.

    Like I said, make sure they are last in the head so that those conditional style sheets will be read by IE after the other one(s).
    Say all you need is a margin that would be different for IE. Then make a seperate style sheet for IE and all you have to put in that style sheet is the margin that IE needs to read.
    IE will still read the first style sheet and then use conditional ones to make changes.
    2) If I understand your question, the answer is yes. Any styles in the markup will override style sheets.

  8. #7
    Junior Member
    Join Date
    Mar 2009
    Posts
    12
    Member #
    18474
    Quote Originally Posted by aeroweb99
    1) No you don't need to put an "if'" for the others. Now you may need different hacks (I hate calling them hacks) for IE6 and IE7.

    Example:

    [if IE] --would be used for all versions of IE
    [if IE6] --would be used for IE6 only
    [if IE7] --would be used for IE7 only
    [if ltIE7] --for versions earlier than IE7
    [if lteIE7]--for versions equal to or less than IE7
    [if gtIE6] --for versions greater than IE6

    There are more you can google.

    Like I said, make sure they are last in the head so that those conditional style sheets will be read by IE after the other one(s).
    Say all you need is a margin that would be different for IE. Then make a seperate style sheet for IE and all you have to put in that style sheet is the margin that IE needs to read.
    IE will still read the first style sheet and then use conditional ones to make changes.
    2) If I understand your question, the answer is yes. Any styles in the markup will override style sheets.
    That's excellent - i'm going to use that to correct problems i am having on my already-existing site. About my current project, i think i have to do without relative values in width and height and that i'll set everything to absolute, so that problem won't be triggered this time. But i' have to create another thread in the css/html sub-forum about positioning issues now :-[


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com