/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Page unscrollable in Opera 9.24

Copy linkTweet thisAlerts:
Nov 15.2007

Hi,

I am a newb for sure, and I can’t figure out why my page is unscrollable (vertically) in Opera. It is scrollable in FF, IE6/7, and Safari. I know not too many people use Opera, but I would like to figure this out!

I’ve validated the html and css already.

URL and css are below. Thanks in advance for your help!

boycottIE

Here is the URL:

[url]http://www.indiana.edu/~meis/mission2.shtml[/url]
(note: this is just a testing page, but if you want to compare the div structure to the original page, it’s [url]http://www.indiana.edu/~meis/mission.shtml[/url], and the css files are similar as below but without the “4”. The original page is scrollable in Opera, but the footer and the background on left side do not align. The main difference is that in the original, the <div id=”footer”> is not nested inside <div id=”main”>. Instead, it’s nested inside <div id=”footernav”> which is outside of <div id=”main”>.)

You can find the CSS files here (but I’ve included the most relevant parts inline, below):
[url]http://www.indiana.edu/~meis/css/styles4.shtml[/url]
[url]http://www.indiana.edu/~meis/css/screen4.shtml[/url]

[CODE]
#navbar {
/*width: 100%;*/
background-color: #E9E9C1;
font-family: Georgia, “Times New Roman”, Times, serif;
text-align: left;
float: left;
padding-left: 1em;
}

#main {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin-left: 12em;
line-height: 150%;
width: 35em;
padding-top: 1em;
padding-right: 3em;
padding-left: 1.5em;
/*padding-bottom: 5em;*/

/*min-height: 30em;*/
}

#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
line-height: 90%;
background-color: #FFFFFF;
margin-top: 5em;
margin-right: 0;
margin-bottom: 0px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #B9B9B9;
/*margin-left: 14.1em;*/
/* padding-right: 3em;*/
}
#footer hr {
display: none;
}
#footer #copyright {
width: 100%;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
/*margin-left: auto;*/
}

#footer #copyright #blockiu {
width: 22px;
height: 28px;
float: left;
padding-top: 0.25em;
/*padding-left: 0.75em; */
}

#footer #copyright #blockiu a {
display: block;
width: 22px;
height: 28px;
background: url(../img/blockiu_white.gif) no-repeat;
}

#footer #copyright #blockiu a img {
display: none;
}

#footer #copyright #statement {
font-size: 95%;
line-height: 150%;
margin-right: 0;
margin-bottom: 0;
margin-left: 3em;
/*padding-top: 1em; */
padding-left: 0.5em;
}
[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzNov 15.2007 — Welcome to WebDeveloper.com Forums, boycottIE. ?

Why the horizontal scrollbar?

It seems that Opera doesn't like the uncleared floats.

I suggest you use this:
#content:after,.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility:hidden;
}
#content,.clearfix {display: inline-block;}

/* Hide from IE5/Mac */
* html #content,* html .clearfix {height: 1px;}
#content,.clearfix {display:block;}
/* End hide */
The code is explained here:

[url=http://www.csscreator.com/attributes/containedfloat.php]Contained Floats[/url]

[url=http://www.positioniseverything.net/easyclearing.html]How To Clear Floats Without Structural Markup[/url]
Copy linkTweet thisAlerts:
@boycottIEauthorNov 16.2007 — Hi Kravvitz,

Thank you for the welcome, and for the much-needed solution!

I am still very confused and I hope you (or someone) can help me out. I copied the code you provided into my CSS file. (I added a space after "visibility:" in case it was necessary.) It worked great in Opera and fixed the problem perfectly!

Now, I have two problems that I am confused about:

  • 1. Unfortunately, in Firefox, there is an extra space at the bottom of the page now. I thought that the "visibility: hidden" was supposed to fix that! In Opera the page shows up perfectly. Am I missing something simple? I tried adding "font-size: 1%" and "line-height: 1%" and silly things like that, and the space does get smaller, but of course I need it to go away completely.


  • 2. I understand (kind of) what the "#content:after" does, but why also include ".clearfix:after"? Do I need to add the "clearfix" label somewhere in my HTML?


    • I looked through the explanation on the sites you provided and I saw something like <div class="clearfix floatbox">. Do I need to do something like this in my HTML? If so, please help me understand how to do this because I have never seen code like this before! (I tried changing <div id="content"> to <div class="clearfix content"> and changed #content to .content in the CSS, but it didn't change anything.)

    Thank you again for taking the time to help a newbie!

    [EDIT: Also, I forgot to add: I'm not sure what you mean by the horizontal scrolling. I don't see any horizontal scrollbar if my window is large enough. It may be due to your screen/resolution? Or perhaps the wide banner image up at the top (wider than the text area)? I plan to shorten the banner image in the future, fwiw, but if it's different problem, please let me know.]

    boycottIE
    Copy linkTweet thisAlerts:
    @KravvitzNov 17.2007 — You're welcome ?

    Why did you only use part of the hack?

    1) Add font-size:0 to the first rule in the hack. Doing that is sometimes necessary to fix an intermittent Firefox bug.

    2) The clearfix class is the standard way to apply the hack, but I prefer to add other selector chains instead of adding the class to each element that needs the hack. I include the class so that I can use it if I want to though.

    [EDIT: Also, I forgot to add: I'm not sure what you mean by the horizontal scrolling. I don't see any horizontal scrollbar if my window is large enough. It may be due to your screen/resolution? Or perhaps the wide banner image up at the top (wider than the text area)? I plan to shorten the banner image in the future, fwiw, but if it's different problem, please let me know.][/quote]
    My browser window is about 900px wide. There is no good reason for there to be a horizontal scrollbar on that page.

    I suggest you read these:

    [url=http://www.useit.com/alertbox/20050711.html]Scrolling and Scrollbars[/url]

    [url=http://www.456bereastreet.com/archive/200508/scrolling_and_scrollbars/]Comments on Scrolling and Scrollbars[/url]

    [url=http://www.sitepoint.com/forums/showthread.php?t=463591]The Definitive FAQ on Screen Resolution[/url]

    [url=http://baekdal.com/reports/actual-browser-sizes/]Actual Browser Sizes[/url]

    [url=http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/]Poll results: 50.4% of respondents maximise windows[/url]

    [url=http://www.sitepoint.com/article/improve-usability-older-users/]Senior citizens tend to prefer 800x600 to 1024x768.[/url]
    Copy linkTweet thisAlerts:
    @boycottIEauthorNov 17.2007 — Thanks again--now it's perfect!

    [EDIT: I added the IE hack for now, but in the next few days I will cut it and put it into my conditional stylesheets for IE6 and IE7, unless there's some reason I should leave it in this stylesheet.]

    As for the horizontal scroll, I resized my width to 900px and I see what you are talking about. It is due to the too-wide collage of images in the banner (banner6.jpg). I know this is an issue and am planning on making it less wide; I was just worried that there was some other problem I had missed. Thanks for posting those links, I will definitely check them out!

    Thank you so much for your help!

    boycottIE
    Copy linkTweet thisAlerts:
    @boycottIEauthorNov 17.2007 — I forgot to add:

    IE7: the generation 7 browser new in a world of generation 8 browsers.

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.[/QUOTE]
    QFT ?
    Copy linkTweet thisAlerts:
    @KravvitzNov 17.2007 — [EDIT: I added the IE hack for now, but in the next few days I will cut it and put it into my conditional stylesheets for IE6 and IE7, unless there's some reason I should leave it in this stylesheet.][/quote]
    There are several components in that hack.

    The first (:after) rule is for browsers with better support for CSS2, e.g. Firefox, Opera 7+, and Safari.

    The second rule is for IE7 and IE5/Mac. The comments are used to hide the two (third and fourth) rules inside from IE5/Mac.

    The third rule is for IE5-6/Win.

    The fourth rule is to reset the display property of the element in all browsers but IE5/Mac. It's especially needed for IE7.

    I recommend you use the hack "as is" without putting part of it in an IE/Win only stylesheet.

    QFT ?[/QUOTE]
    QFT? Quite Freakin' True?
    Copy linkTweet thisAlerts:
    @boycottIEauthorNov 20.2007 — QFT? Quite Freakin' True?[/QUOTE]

    Haha, no, although that would work. QFT usually means "Quoted for Truth."

    I can see why you recommend I keep the hack in one stylesheet. I was afraid that the Mac Hack would lead to invalid CSS, but that's just because I don't know what I'm talking about. My plan was to insert the "hide from IE Mac" part into a conditional stylesheet such that IE/win would read it but not IE/Mac. Anyway, I'll just leave it in one stylesheet, as you suggest.

    Thank you for your patience in explaining all these things to me. I really appreciated your help.

    boycottIE
    ×

    Success!

    Help @boycottIE spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.7,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...