CSS background 'gap' issue help needed

Discussion in 'Web Design and Development' started by torndownunit, Feb 25, 2009.

  1. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Well, a straight forward way is to change the absolute position for #grey and #black to fixed. Unfortunately that doesn't work in IE6 and likely not in IE7 either, but can't remember for sure. I'll see if I can think up any other ideas.
     
  3. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #3
    How about changing tactic and using a simple, really wide, 1px tall gif to repeat down the page (specified on the body element) centrally? Getting rid of the 2 divs you are currently using to create your background?
     
  4. AmbitiousLemon Moderator emeritus

    AmbitiousLemon

    Joined:
    Nov 28, 2001
    Location:
    down in Fraggle Rock
    #4
    I ran it past validator and got a bunch of errors. You might find that these layout issues disappear once you correct your markup errors. (looks like you have at least one open tag somewhere)
     
  5. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #5
    I had a look too, the CSS seems fine, just the HTML structure is a bit off. Not saying the HTML shouldn't be fixed, just that it shouldn't be necessary to get the background how he wants :)
     
  6. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #6
    This was suggested to me in another thread I made about backgrounds. The problem is, using your method how do I get that background to expand and contract and always keep the grey line running down the exact center of the page, splitting the 2 colours, as it is now? That part of the layout is important to me. I am open to any suggestion that will allow me to keep that effect. I am learning CSS as I said though, so I need a few details on how to do it.

    Thanks for the help so far guys.

    EDIT, I am open to an idea that's not IE 6 compatible as long as it works in 7. I know that's not the best approach, but this is a personal project and it's not for any big company or anything.
     
  7. ergdegdeg Moderator emeritus

    ergdegdeg

    Joined:
    Oct 13, 2007
    #7
    Code:
    body {
    background:url(background.png) repeat-y center;
    }
     
  8. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #8
    How wide would you suggest making the PNG so that it will work in any resolution that the viewer may be using?

    Thanks
     
  9. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    I took a look at your page just now and noticed a thin gray line bisecting the two halfs at both the top and bottom, same color and size as the border around your content box in the middle (which is sensible and looks balanced). It renders the same in FF and MSIE, I'd say job well done - looks great. Guess you answered your own question.

    If you intend to add something else or change the look, my vote is to stop (in context to the thin line in the center, irrespective of other changes to other elements you had in mind).

    -jim
     
  10. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #10
    I set up a second version of the stylesheet using the the PNG method. I made the PNG 2000 pixels wide. It seems to be working well. I just don't know if I made the PNG wide enough to take all monitors into account.

    The updated version is what is showing at the link in the original thread now. Which is why you don't see a gap anymore.

    So I guess my only question is, is 2000 pixels wide enough for the PNG?
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    That should be fine. Worst case is they'll have two white borders at the edge of the window. They likely won't even notice. I'd personally hate using a browser that was stretched 2000 pixels wide.
     
  12. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #12
    If you want to cover every eventuality, (other than multiple monitor set-ups) a 30" ACD has a resolution of 2560x1600. So if you want to cater for people crazy enough to make it full screen on one of those, you should make it 2560 px wide.

    Over the top, but so is a lot of stuff wed guys do, such as catering for IE 6 lol :p (j/k)
     
  13. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #13
    Well said.

    I know alot of you laugh when I say use a liquid layout. In this case, the look would be the same, no need for a large graphic - I'd slice the image and the underlying div's would expand automatically on the left and right but not the center, and the content box on top could be static size maintaining exactly the same look as now, just no white borders for those folks with high resolution monitors. I agree completely only a few users would even see it that wide, but a true liquid layout would also load faster since I'd use smaller graphics. Just a reminder that the W3C recommends a liquid layout when possible due to the varying screen resolutions and by no means does a liquid layout mean sacrificing a design feature or look in a case like this.

    I'm not saying switch now, I'm just saying this should have been considered from the very beginning as this layout is possible, although what happened in the end is understandable. Just keep these things in mind, fellow designers. I won't let up reminding folks when I see a clear opportunity such as this. It's my job! :)

    -jim
     
  14. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #14
    I was actually proud of my previous solution (the underlying divs) because I came up with it on my own lol. and got some positioning tips help from users here. One of the first CSS solutions I was able to 'get' almost on my own.

    But in the end, this method has solved the gap problem I was having and the results look pretty good. And it doesn't look I need to do anything special to keep IE 6 or 7 happy which is nice.

    But I'm glad to know my original method wasn't 'wrong'.
     
  15. Trajectory macrumors 6502a

    Joined:
    Nov 13, 2005
    Location:
    Earth
    #15
    Liquid Layouts

    I find that liquid layouts work best for text-heavy websites or online applications, like this forum.

    But I'm not big on liquid layouts for graphics-heavy or "image" sites. They always look like sh*t when they are stretched too wide.
     
  16. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #16
    @OP: You did nothing wrong! Bravo on a job well done!

    @Trajectory - I could not agree more, that's why I underlined "when possible" - you did a great job explaining this.

    -jim
     

Share This Page