Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS background 'gap' issue help needed

T

torndownunit

macrumors regular
Original poster
Jan 4, 2009
242
0
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.
 
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?
 
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)
 
AmbitiousLemon said:
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)
Click to expand...

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 :)
 
design-is said:
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?
Click to expand...

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.
 
How wide would you suggest making the PNG so that it will work in any resolution that the viewer may be using?

Thanks
 
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
 
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?
 
torndownunit said:
So I guess my only question is, is 2000 pixels wide enough for the PNG?
Click to expand...

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.
 
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)
 
design-is said:
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)
Click to expand...

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
 
SrWebDeveloper said:
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
Click to expand...

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'.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back