Background div issue

I've been working for days to get this shadow added to my website after the
fact. Misplanning on my part.

I added a bg div to wrap around the whole page. I added a bg shadow image to
the bg div. It shows up in IE 7, although it looks odd but doesn't show up in
FF or IE6.

In FF and IE6 I see the bg shadow div showing up white, but not bg image.

Has anyone had this issue or would someone look at this code for me. Thanks

http://webassistantsllc.com/clients/QOP/leadership.html

lynnegeek wrote:

I've been working for days to get this shadow added to my website after the
fact. Misplanning on my part.

I added a bg div to wrap around the whole page. I added a bg shadow image to
the bg div. It shows up in IE 7, although it looks odd but doesn't show up in
FF or IE6.

In FF and IE6 I see the bg shadow div showing up white, but not bg image.

Has anyone had this issue or would someone look at this code for me. Thanks

http://webassistantsllc.com/clients/QOP/leadership.html

The shadow image looks too wide for the wrapper to me.


http://webassistantsllc.com/clients/QOP/images/fixed_center.png


Remove the background positioning on the css and see if it shows up down
the left of the page.

#shadowdiv {
background: url(../images/fixed_center.png);
background-repeat: repeat-y;
margin: 0 auto 0 auto;
width: 51em;
background-position: 80% 100%;


}

Your masthead in IE6 is haywire... it's heavily elongated and huge. Looks ok
in FF

JJ


"lynnegeek" <webforumsuser (AT) macromedia (DOT) com> wrote

I've been working for days to get this shadow added to my website after
the
fact. Misplanning on my part.

I added a bg div to wrap around the whole page. I added a bg shadow image
to
the bg div. It shows up in IE 7, although it looks odd but doesn't show up
in
FF or IE6.

In FF and IE6 I see the bg shadow div showing up white, but not bg image.

Has anyone had this issue or would someone look at this code for me.
Thanks

http://webassistantsllc.com/clients/QOP/leadership.html

So now I've removed the bg position and decreased the size of the bg image to
920px. It looks pretty good in FF on both sides, although the L side looks
better.

In IE7 it shows down the left side but not the right. Any thoughts on how to
get it to show on the R side?

lynnegeek wrote:

So now I've removed the bg position and decreased the size of the bg image to
920px. It looks pretty good in FF on both sides, although the L side looks
better.

In IE7 it shows down the left side but not the right. Any thoughts on how to
get it to show on the R side?



The white bit between your shadow should be exactly the same width as

your wrapper which is 50em.

However using em as a width is flawed because if someone enlarges the
text on the page your wrapper stretches width ways and will obscure the
shadow on the right side of the page.

I would set your wrapper <div> as a fixed width using px. Make the white
bit of the image between the shadow the same width.

Make the shadowdiv slighty wider than the wrapper <div> to accommodate
the shadow left and right.

I know what you mean about the masthead. For some reason it get wacky sometimes
in IE6. It doesn't do it all the time and I not sure how to fix it.

Ok so I made all my changes and I'm pretty happy with the results of the
shadow now. Well except in IE6. It looks a little odd still.

So now here's another question along this same issue. When I initially learned
CSS I learned to use em's for better control with user scaling..so the text
doesn't overflow out of the container. I also learned that one em is
approximately 16 px. But when I changed my 50em wrapper to the equivelent 800px
it seems that my math didn't add up. I ended up changing the left side width.

So is this one of those situations where because I'm using the shadow I needed
to adjust?

Hope these questions make sense. I'm just trying to get to a point where when
I do something I understand why I do it.

Thanks so much for your help and any comments on above. This forum has been a
huge help to me. I'd like to get to a point where I can give back in helping to
answer questions instead of always asking.

Lynne

lynnegeek wrote:

I know what you mean about the masthead. For some reason it get wacky sometimes
in IE6. It doesn't do it all the time and I not sure how to fix it.

Ok so I made all my changes and I'm pretty happy with the results of the
shadow now. Well except in IE6. It looks a little odd still.

So now here's another question along this same issue. When I initially learned
CSS I learned to use em's for better control with user scaling..so the text
doesn't overflow out of the container. I also learned that one em is
approximately 16 px. But when I changed my 50em wrapper to the equivelent 800px
it seems that my math didn't add up. I ended up changing the left side width.

So is this one of those situations where because I'm using the shadow I needed
to adjust?

Hope these questions make sense. I'm just trying to get to a point where when
I do something I understand why I do it.

I don't know. To be honest I would only use em for say text sizing
(however I don't, I still use px because all browsers are capable of
re-sizing the text and px give in my opinion better control.

The text will only overflow outside the container if you use a height on
the container. If you mean it overflows out the side of a container then
your code is not set up correctly.

You could have still used em for your design but you would have needed
to split the shadow, putting the right side in one <div> and the left
side in another <div>

I'm personally not a great believer in using em to control the width of
a page, I have no idea what it achieves.

I'm personally not a great believer in using em to control the width of a
page, I have no idea what it achieves.

Makes the page wider when the font is enlarged. Thus the page's "aspect
ratio" is preserved. Seems unnecessary to me, but is all the rage among
some camps, apparently.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"Osgood" <notavailable (AT) thisaddress (DOT) com> wrote

lynnegeek wrote:
I know what you mean about the masthead. For some reason it get wacky
sometimes in IE6. It doesn't do it all the time and I not sure how to fix
it.

Ok so I made all my changes and I'm pretty happy with the results of the
shadow now. Well except in IE6. It looks a little odd still.

So now here's another question along this same issue. When I initially
learned CSS I learned to use em's for better control with user
scaling..so the text doesn't overflow out of the container. I also
learned that one em is approximately 16 px. But when I changed my 50em
wrapper to the equivelent 800px it seems that my math didn't add up. I
ended up changing the left side width.

So is this one of those situations where because I'm using the shadow I
needed to adjust? Hope these questions make sense. I'm just trying to get
to a point where when I do something I understand why I do it.

I don't know. To be honest I would only use em for say text sizing
(however I don't, I still use px because all browsers are capable of
re-sizing the text and px give in my opinion better control.

The text will only overflow outside the container if you use a height on
the container. If you mean it overflows out the side of a container then
your code is not set up correctly.

You could have still used em for your design but you would have needed to
split the shadow, putting the right side in one <div> and the left side in
another <div

I'm personally not a great believer in using em to control the width of a
page, I have no idea what it achieves.

Murray *ACE* wrote:

I'm personally not a great believer in using em to control the width
of a page, I have no idea what it achieves.

Makes the page wider when the font is enlarged. Thus the page's "aspect
ratio" is preserved. Seems unnecessary to me, but is all the rage among
some camps, apparently.

Yeah I know it makes the page wider and keeps everything supposedly in
some kind of order but for me who has a specific width browser viewport
it means I have to scroll right to see some content hence I said I have
no idea what it achieves.

I'd either fix a page width or have a fluid page, not one that seems to
be neither here or there, totally pointless in my view.

Yes, what I originally learned was that using em's for an elastic layout allows
the elements to scale to the user's preferred text size as opposed to a fixed
layout using px's. But now I'm wondering how many users resize their text
versus using the zoom. My side boxes are still set to em's and they spill over
if I resize the text but not if I use the zoom. If I change to px's that will
keep them from spilling over when text is resized.

Anyway I appreciate the help and insight. I'm happy with my site and can't
wait until I don't have to factor in IE6.