On 30/06/2011 6:31 AM, Tom Livingston wrote:
List,
I have a working example of what I am after:
http://www.mlinc.com/tl-test/
In a capable browser, you can see how the large bg image is behaving.
This is what I am after and I'm using a media query to achieve this.
But I have a couple questions for you concerning the background
image....
1) Is the way I am achieving the effect completely bonkers? Am I
overlooking a much simpler way?
Possibly yes and possibly no to the former and later. There is an issue
with accessibly where someone who can only use a keyboard. First they
must tab to the inner overflow section, scroll down with the arrows and
once they reach the bottom of what is hidden in the outer overflow (the
viewport), they must tab to get this into focus, use the arrows keys to
scroll to the overflowing portion in the viewport, then press tab again
to return to the inner overflow so again they can use the arrow key to
scroll the inner overflow. Now if the content of the inner overflow is
very long, this procedure has to be done over and over. They may even
decide to return to the top of the content and in which case they have
to do the reverse. It your choice if you think this is wise.
Also, do you want this to happen?
http://css-class.com/x/tom.png
2) Is there a better way to achieve what is happening?
Depends on what you want to happen in respect to the above two issues.
The later is solved my using min-width on a container <div> that contain
the <header> 'div#outer-wrap' and the <footer>.
3) Providing i'm not doing something completely insane, is it possible
to get IE7 and 8 to play nicer (have the bg image not continue behind
the content as the viewport decreases below 900px wide)? With a
different method?
Thanks a lot for your time.
You need to Google this string 'html5 elements ie8 ie7' (not quoted) or
wait for someone to give the solution offlist since it involves JS.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
