Log in

No account? Create an account

Previous Entry | Next Entry

#content-inner scroll

  • Dec. 1st, 2007 at 7:20 PM
I couldn't find the case like me in posts. But, if it is my failure, I'm so sorry.

I have trouble about scrolling of content.
I want to set in 500px the height of "#content". I put some codes in custom CSS box and I could see the layout I wanted when I only browse by Firefox or Opera. But, when I browse by IE7 and IE6, scrollbar not works or hidden.

account type : plus
browser type : Firefox version2
theme : Sorbet Aqua

I attached borderline to understand some "ID" for myself.
Red is "#alpha" and "#beta", yellow is "#alpha-inner" and "#beta-inner", green is "#content-inner" and blue is "#content".

Please tell me. What part of my codes has problem?

These are my codes.

Capture in IE7

Capture in Fx2


( 7 comments — Leave a comment )
Dec. 1st, 2007 10:58 am (UTC)
Add overflow-y: scroll; to #content, that should work for IE.
Dec. 1st, 2007 01:02 pm (UTC)
Thank you for your comment. But I want to fix the #content's background image. I'm sorry my word is too short.

If I scroll #content, I can control the #content's background image on only IE6. But, I can't control it on IE7. (Why does the background image not fix to proper position by IE7?)

Can't I scroll "#content-inner"?

(I'm sorry my poor English.)
Dec. 1st, 2007 01:52 pm (UTC)
Sorry, I have no idea why it doesn't work, I have tried a lot of options but none of them work. Maybe someone else will be able to help. :)
Dec. 1st, 2007 03:35 pm (UTC)
Please don't feel sorry. Thank you for your kindness.
Dec. 1st, 2007 04:49 pm (UTC)
It's strange that viewing your page in IE7 looks nothing like your screenshot-- the background image is positioned wrong and "fixed" to the page, not the inner box. I easily spent two hours playing with things, only to find that you cannot prevent IE from scrolling the light blue background with the containing block (#content-inner). Here is the code I used:
#content {
    border: 1px #0000FF solid; 
    height: 500px;
    overflow: hidden; 

#content-inner {
    position: relative;
    top: 0;
    background: #FFFFFF url("http://pics.livejournal.com/perboroper/pic/00047ayp") no-repeat bottom center;
    padding: 10px 0; 
    border: 1px #00FF00 solid; 
    height: 480px; 
    overflow-y: auto; 
Note that I removed your *html and *:first-child+html browser tricks, since they weren't going to help you anyway, and moved the background image from #content to #content-inner.

Edited at 2007-12-01 04:50 pm (UTC)
Dec. 1st, 2007 05:43 pm (UTC)
Thank you your help, it rescued me!!

I'm so sorry. I've been trying some other codes on my journal until now. Maybe I (and my journal) was confused so much and it made you confused too.

I tried your code but it not worked as I want. But, I think it is my failure because my explanation was not good. So, I changed your code a little and now, it works as I want! Your help really rescued me in fact!

Thank you again and again!!
Dec. 1st, 2007 05:49 pm (UTC)
OK... I don't see much difference between your version and mine, but so long as it looks the way you want that's what matters!
( 7 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars