Disappearing Background Graphics
Paul Smith posted about a weird CSS problem he noticed, disappearing background graphics. To quickly summarize, sometimes a DIV which is defaulting to the full width of the browser window, which also has a background image, doesn’t fill the entire width of the screen when there is horizontal scrolling. That’s a mouthful… it’s easier to see the effect than it is to explain it. Paul built a whole page explaining the phenomenon. A good place to see it in action is the Verizon site. Try narrowing your browser window until you have horizontal scroll and then scroll to the right to see the nav bar graphic “disappear”. I tried looking into this a bit, but I’m afraid I haven’t come up with a satisfactory answer yet.
Best Web Design Cheat Sheets?
This thread has some good links to some design-related cheat sheets. I like me some cheat sheets. This has got me thinking about what kind of cheat sheet would be the most useful to me right now. I’m thinking something that not only listed all the jQuery events and selectors and functions and stuff, but also had little mini-examples so I could make sure I had the syntax right.
Image Map with CSS?
Is it possible to make an image map with CSS?
This one (jQuery Selectors Reference Card) is full of examples.
For the background issue.. it looks like you can set a width of over 100% to compensate. But then of course you get the horizontal scroll all the time. That can be killed off with an overflow:hidden in the body, but if you do that you get no horizontal scroll ever. That is a tricky one!
I know you probably didn’t intend for this, but I LOL’d at “I like me some cheat sheets!”
I’m just getting into web design, coming from the wonderful world of print. That thread looks like it has some nice cheet sheets. I hope there are ones that offer examples as you said, showing the correct syntax, which would be extra helpful to people like me just getting into CSS and XHTML.
I have this same problem with my site on the green header pattern. Anything under 1024px browser width, ive noticed alot of other sites too
I had this background problem on a site and was able to fix it by setting min-width.
I use this a lot for jquery:
http://visualjquery.com/1.1.2.html
Looking forward to more jquery tips……
In verizons case, a better div wrapping could do the job.
As I said, it’s just structural problem on site layout, it occurs most of time by absolutes and relatives positionings and a bad section wrappring system.
<div class="background"><!-- width: 100%; background: ... -->
<div class="wrapper"><!-- width: 500px; margin: auto -->
<div class="header"></div><!-- width: 100% -->
<div class="nav"></div><!-- width: 100% -->
</div>
</div>
Yeah as @Nina said, a min-width of about 780px on #navarea should fix the problem