SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Not working as expected in Opera

    Hello!

    I have designed a completely static website (purely xhtml + css) and one of the premises was that I had to have a right hand window or column whose contents changed depending on the selection made in a left hand menu.

    Since I didn't want to use frames, I made a right hand box with a fixed height and overflow set to hidden. The different contents were in different divs, but they also had a fixed height so that only one div could be seen at a time.

    When you clicked on an element of the left hand menu, it called the id of a div in the right hand one and it displayed the div you'd called for.

    It works properly in Firefox and IE, but I can't understand why it doesn't in Opera. In Opera it just sits there, and doesn't change the div it's displaying.

    If anyone is interested in helping or knows why this could be happening, here's the sample files:
    http://www.zaharamh.com/web2/index.html

    Thanks a lot for any input on this!


  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems to work fine for me. (Opera 10.50/Windows XP)
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So it must be something about my OS or version of Opera?
    I have Opera 10.10 on Vista :S

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,591
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Yeah, it's not working in Opera 10.10 for Mac either, but I can't see why.

    O well, at least you know it will work when you upgrade! (cold comfort, I know...)

    10.5 for Mac isn't even ready yet...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Yes this is a bug we documented ages ago in one of the css quizzes.

    The only solution we found was this:

    Code:
    .lateral2 {
        display:block;
        float: right;
        width:15em;
        height:25em;
        overflow:hidden;
        overflow-y:hidden;
        overflow-x:scroll;
    }
    .lateral2 div {
        height:25em;
        overflow:hidden;
        padding:1em;
    }
    Opera will now work but will show a scroll bar at the bottom. What you can do is then just add another element after that box and drag it on top and hide the scrollbar. Just size it to fit and set the orange background colour.

    That's about the only solution we found.

    The recent css quizzes use the fragment identifier to hide and show various content but we didn't bother with the opera fix in most cases as hopefully the bug was due to be fixed which seems to be the case in the latest windows version as pointed out by Tommy above.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot!
    I'd been looking around the forums and seeing mentions of some kind of bug in opera 10, but couldn't get other people's solutions to work on my site. I didn't check the css quizzes threads though.
    Anyway, I usually hate using this kind of hacks. Adding rules is ok, but having to add an extra element just for that really irks me... In any case it's just a test site, so probably I'll just leave it like that.
    But in case it were real, do you people think it would be worth it to have to add extra rules and that extra element for a bug that's been solved in newer versions? Or could I just ignore it?
    I think the problem is at the moment 10.10 might still be widely used, and mac users (and maybe others) can not upgrade. I can not upgrade myself, it doesn't detect that my version isn't the latest there is. But in a few months...?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Or could I just ignore it?
    Well that's a decision you will have to make for yourself.

    Typically Opera users upgrade quicker than other users and in six months down the line the bug will hit very few visitors.

    However for the sake of one element and some piece of mind I would be inclined to add the one element to hide the problem now that you know how to fix it

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Opera only has like what 1% user base or something? I wouldn't want to make all others suffer for Operas incompetence. You could google Opera only javascript, or php browser detection and just feed opera overflow auto instead. Thats what I would do.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I enjoy messing with bugs like this. It's fun to see if you can fix it. I setup a little test page and messed with it this morning for awhile but could not find another fix. If Paul and likes could not in the previous quiz then it's doubtful there is one. I'm bored as of late, so I'll try and put together a php opera detection for you...

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Well that's a decision you will have to make for yourself
    I know... I guess it would be more responsible of me to keep that in mind. You are right that if it were a real case and I knew about the issue, I guess I wouldn't be able to ignore it completely. Even more in this case where it's the content that's not accessible. What now bugs me is: do i have to add buggy Opera 10.10 to my list to test browsers? :/ I don't know how I feel about that. And I don't know how I'd go about doing it- this world is so full of complications...
    But thanks for the answer, even though now I feel like the question was rethorical.
    About the extra element... I just started playing with it and it was really hard to try to put it exactly where I wanted it (specially because I usually work with ems, I guess it would be easier with px?)

    And EricWatson, if you really feel bored enough to try that, don't stop on my account , but keep in mind that the thing was a test case of a static page (no php, no javascript, no nothing). Anyway your solution looks great to me (and if Opera 10.10 users get to see scrollbars, I really won't mind at all!)

    So thanks all for your input

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    There are very few bugs in Opera (every browser has them).

    Operas bugs are just normally very hard to fix or annoying to cater for . I wouldn't add it to the list of buggy browsers.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    If you want to hide the scroll bars then just wrap an element around the div that is shorter than the scrolling div and has overflow:hidden applied and you won't see the scrollbars.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='ca'>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <title>Gimn&#224;s Esportiu &#183; Posa't en forma amb nosaltres</title>
    <link rel='stylesheet' href='css/estil.css' type='text/css' />
    <style>
    &#239;&#187;&#191;/*
    Theme Name: Gimn&#195; s Esportiu
    Version: 2.0
    Author: Zahara M&#195;&#169;ndez Hern&#195;&#161;ndez
    */
    
    /* Global reset */
    /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
    *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {
        margin:0;
        padding:0
    }
    table {
        border-collapse:collapse;
        border-spacing:0
    }
    fieldset, img {
        border:0
    }
    address, caption, cite, code, dfn, em, strong, th, var {
        font-style:normal;
        font-weight:normal
    }
    ol, ul, li {
        list-style:none
    }
    caption, th {
        text-align:left
    }
    h1, h2, h3, h4, h5, h6 {
        font-size:100&#37;;
        font-weight:normal
    }
    q:before, q:after {
        content:''
    }
    a img {
        border:none
    } /* Gets rid of IE's blue borders */
    /* LAYOUT */
    .header {
        display:block;
        width:100%;
        height:12em;
    }
    .header img {
        float:left;
    }
    .lateral1 {
        display:block;
        float: left;
        width:10em;
        padding:1em;
    }
    .principal {
        width:45em;
        height:100%;
        padding:1em;
        margin-left:12em;
    }
    .principal form {
    }
    .lateral-wrap {
        float: right;
        width:15em;
        height:25em;
        overflow:hidden;
        position:relative;
        border:1px solid #B57C0F;
        background:#FDB234;
        margin:1em;
        display:inlnine;
    }
    .lateral2 {
        height:27em;
        overflow:hidden;
        overflow-y:hidden;
        overflow-x:scroll;
    }
    .lateral2 div {
        height:25em;
        overflow:hidden;
        padding:1em;
    }
    /*TIPOGRAPHY & COLOR*/
    body {
        font-family:Arial, sans-serif;
        background:#FFD14B;
    }
    h1 {
        font-family: Verdana, sans-serif;
        font-size:3.5em;
        padding:1em;
        color:#5F4817;
        text-transform:uppercase;
    }
    h2, h3, legend {
        font-weight:600;
        text-transform:uppercase;
    }
    .lateral1, .lateral2 {
        margin:1em;
        border:1px solid #B57C0F;
        background:#FDB234;
    }
    .lateral2 {
        border:none;
        margin:0;
    }
    .lateral1 h2, .lateral2 h3 {
        margin:1em 0;
        color: #5C6F0D;
        display: block;
        width:100%;
        border-bottom:1px solid #9CB113;
    }
    .lateral1 ul li {
        text-indent:0.5em;
    }
    .lateral1 ul li a {
        text-decoration:none;
    }
    .lateral1 ul li a:hover {
        background-color:#FFD14B;
    }
    .lateral1 ul li a {
        color: #000;
        padding:0.3em;
        display:block;
    }
    .principal legend, .principal h2 {
        display: block;
        width:100%;
        color:#2072AF;
        text-align:center;
        margin: 1em 0;
    }
    .principal form fieldset {
        margin-bottom:1em;
    }
    .principal form label {
        width: 40%;
        float:left;
        clear:both;
        text-align:right;
        padding:0.5em;
    }
    .principal form input {
        width: 12em;
        float:left;
        margin:0.5em;
        border:1px solid #B57C0F;
        background:#FFD14B;
    }
    .principal form input:focus {
        background:#fff;
    }
    .principal form select {
        width: 8em;
        float:none;
        border:1px solid #B57C0F;
        background:#FFD14B;
        margin:1em;
    }
    .principal form div {
        margin-left:15em;
    }
    .principal h2, .principal p {
        margin:1em;
    }
    .lateral2 {
    }
    .lateral2 ul {
        margin:1em 0;
    }
    .lateral2 ul li {
        text-indent:0.5em;
    }
    </style>
    </head>
    <body>
    <div class="header"> <img src="http://www.zaharamh.com/web2/imatges/logo.png" alt="Gimn&#224;s esportiu" title="Gimn&#224;s esportiu" />
        <h1>Gimn&#224;s Esportiu</h1>
    </div>
    <div class="lateral1">
        <h2>Activitats</h2>
        <ul class="menu">
            <li><a href="#aerobic">Aer&#242;bic</a></li>
            <li><a href="#bicicleta">Bicicleta</a></li>
            <li><a href="#natacio">Nataci&#243;</a></li>
            <li><a href="#ioga">Ioga</a></li>
        </ul>
        <h2>Horaris</h2>
        <ul class="menu">
            <li><a href="#aerobic_horari">Aer&#242;bic</a></li>
            <li><a href="#bicicleta_horari">Bicicleta</a></li>
            <li><a href="#natacio_horari">Nataci&#243;</a></li>
            <li><a href="#ioga_horari">Ioga</a></li>
        </ul>
    </div>
    <div class="lateral-wrap">
        <div class="lateral2">
            <div>&nbsp;</div>
            <div id="aerobic">
                <h3>Aer&#242;bic</h3>
                <p>L'aer&#242;bic &#233;s una modalitat de gimn&#224;stica sueca amb acompanyament musical que consisteix en una s&#232;rie d'exercicis que faciliten l'oxigenaci&#243; dels pulmons i el bon funcionament del sistema cardiovascular.</p>
            </div>
            <div id="aerobic_horari">
                <h3>Horaris d'aer&#242;bic</h3>
                <p>L'activitat d'aer&#242;bic t&#233; els seg&#252;ents horaris:</p>
                <ul>
                    <li>Dilluns 19-21h.</li>
                    <li>Dijous 12-15h.</li>
                </ul>
            </div>
            <div id="bicicleta">
                <h3>Bicicleta</h3>
                <p>La bicicleta &#233;s un vehicle de dues rodes que normalment s&#243;n de la mateixa mida. Serveix pel transport  d'una o dues persones, a causa de la for&#231;a que es fa sobre els pedals, transmesa al piny&#243; de la roda de darrera per una cadena circular. Les modalitats esportives que es poden practicar amb aquest vehicle s&#243;n anomenades ciclisme. </p>
            </div>
            <div id="bicicleta_horari">
                <h3>Horaris de bicicleta</h3>
                <p>L'activitat de bicicleta t&#233; els seg&#252;ents horaris:</p>
                <ul>
                    <li>Diumenge 12-16h.</li>
                    <li>Dijous 12-15h.</li>
                </ul>
            </div>
            <div id="natacio">
                <h3>Nataci&#243;</h3>
                <p>La nataci&#243; &#233;s el m&#232;tode pel qual els &#233;ssers vius es desplacen a trav&#233;s de l'aigua en un m&#232;tode que no implica simplement el caminar pel fons. La nataci&#243; &#233;s una activitat recreatiu popular i un esport competitiu. &#201;s una activitat f&#237;sica molt recomanable per a la majoria de les persones, per&#242; que requereix unes precaucions b&#224;siques. </p>
            </div>
            <div id="natacio_horari">
                <h3>Horaris de nataci&#243;</h3>
                <p>L'activitat de nataci&#243; t&#233; els seg&#252;ents horaris:</p>
                <ul>
                    <li>Dilluns 13-15h.</li>
                    <li>Divendres 10-11h.</li>
                </ul>
            </div>
            <div id="ioga">
                <h3>Ioga</h3>
                <p>El ioga s'origin&#224; abans de la nostra era a l'&#205;ndia, on persisteix com a tradici&#243;. Donat que els textos en s&#224;nscrit manquen de cronologia, es desconeix exactament quan els habitants del subcontinent &#237;ndi van comen&#231;ar a realitzar aquest tipus de meditaci&#243; amb postures f&#237;siques. </p>
            </div>
            <div id="ioga_horari">
                <h3>Horaris de Ioga</h3>
                <p>L'activitat de ioga t&#233; els seg&#252;ents horaris:</p>
                <ul>
                    <li>Dimecres 18-20h.</li>
                    <li>Dissabte 10-12h.</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="principal">
        <form action="envia.html" method="post">
            <fieldset>
            <legend>Dades personals</legend>
            <label for="nom">Nom:</label>
            <input type="text" name="nom" id="nom" size="30" maxlength="100" />
            <label for="cognoms">Cognoms:</label>
            <input type="text" name="cognoms" id="cognoms" size="30" maxlength="100" />
            <label for="dni">DNI:</label>
            <input type="text" name="dni" id="dni" size="30" maxlength="8" />
            <label for="adre">Adre&#231;a:</label>
            <input type="text" name="adre" id="adre" size="30" maxlength="150" />
            <label for="localitat">Localitat:</label>
            <input type="text" name="localitat" id="localitat" size="30" maxlength="100" />
            <label for="cp">CP:</label>
            <input type="text" name="cp" id="cp" size="30" maxlength="5" />
            <label for="tel">Tel&#232;fon:</label>
            <input type="text" name="tel" id="tel" size="30" maxlength="9" />
            </fieldset>
            <fieldset>
            <legend>Activitats matriculades</legend>
            <label for="activitats">Selecciona m&#224;xim dues activitats:</label>
            <select name="activitat1" id="activitats">
                <option value="Aerobic">Aerobic</option>
                <option value="Bicicleta">Bicicleta</option>
                <option value="Natacio">Nataci&#243;</option>
                <option value="Ioga">Ioga</option>
            </select>
            <select name="activitat2" id="activitat2">
                <option value="Aerobic">Aerobic</option>
                <option value="Bicicleta">Bicicleta</option>
                <option value="Natacio">Nataci&#243;</option>
                <option value="Ioga">Ioga</option>
            </select>
            </fieldset>
            <div>
                <input type="reset" value="Esborrar les respostes" id="reset" />
                <input type="submit" value="Enviar respostes" id="submit"/>
            </div>
        </form>
    </div>
    </body>
    </html>

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I also notice that you are saving the BOM which could render the first rule incorrectly.
    Code:
    &#239;&#187;&#191;/*
    Theme Name: Gimn&#195; s Esportiu
    Version: 2.0
    Author: Zahara M&#195;&#169;ndez Hern&#195;&#161;ndez
    */
    Change your editor settings so that you don't save it with css files.

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    There ya go! With my limited knowledge of PHP this is the best I could come up with. I guess it's pretty good though since it works perfect! http://www.visibilityinherit.com/pro...ntent-swap.php When opera fixes the bug just remove it.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Testing</title>
    <?php $ua = $_SERVER["HTTP_USER_AGENT"]; $opera = preg_match("/\bOpera\b/i", $ua); ?>
    <style type="text/css">
    #rightcolumn {
    float:right;
    height:30em;
    width:300px;
    overflow:hidden;
    border:1px solid;
    }
    #one, #two, #three {
    height:30em;
    }
    .opera #rightcolumn {
    overflow:auto;
    }
    </style> 
    </head>
    <body <?php if ($opera) echo 'class="opera"'; ?>>
    
    <div id="rightcolumn">
    <div id="one">test1</div>
    <div id="two">test2</div>
    <div id="three">test3</div>
    </div>
    
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
    
    </body>
    </html>

  15. #15
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,619
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Pauls fix is better. I simplified it though. As far as I can tell this works perfect.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{ visibility: inherit; } Testing</title>
    <style type="text/css">
    #operafix {
    float:right;
    width:300px;
    overflow:hidden;
    border:1px solid;
    }
    #rightcolumn {
    height:30em;
    width:320px;
    overflow:auto;
    }
    #one, #two, #three {
    height:30em;
    }
    </style> 
    </head>
    <body>
    
    <div id="operafix">
    <div id="rightcolumn">
    <div id="one">test1</div>
    <div id="two">test2</div>
    <div id="three">test3</div>
    </div>
    </div>
    
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
    
    </body>
    </html>

  16. #16
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At this point, Opera is available for Linux as v.10.10. They do say, "Opera 10.50 available shortly".

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  17. #17
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B:
    That worked great! (as soon as I started working out where to put what rules...) And I even put an extra element for it and don't feel bad! (Maybe because I'm more used to wrapping things up 3-fold for issues like this, who knows.
    About the encoding, I know about this issue, it's because of me being forgetful... (Meaning: I am aware this happens and should check it always, but I forget about it. I changed my editor's preferences, hopefully this time it will work ok!)

    @EricWatson:
    I tried using your simpler solution, (the second one), it certainly is a lot simpler and shorter, but then my right hand contents become scrollable! I don't understand why, since everything's set to overflow: hidden. Well, I am quite happy as it is now

    @RyanReese: I know Opera is not a "buggy browser", maybe I should have said "The version of Opera with the bugs", so I didn't mean to add Opera next to IE6 in my list to buggy browsers, just wondering if I'd have to somehow manage to get to test my sites in Opera 10.10 when 10.50 is already more widely spread.

    @gary.turner: That's something to keep in mind, too, if both mac and linux users have only Opera 10.10 available at the moment, it makes it more important to keep it in mind...

    Thank you everybody for your answers and help!

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by somezing View Post
    @EricWatson:
    I tried using your simpler solution, (the second one), it certainly is a lot simpler and shorter, but then my right hand contents become scrollable! I don't understand why, since everything's set to overflow: hidden. Well, I am quite happy as it is now
    I haven't checked but is it browser scrollbars?
    @RyanReese: I know Opera is not a "buggy browser", maybe I should have said "The version of Opera with the bugs", so I didn't mean to add Opera next to IE6 in my list to buggy browsers, just wondering if I'd have to somehow manage to get to test my sites in Opera 10.10 when 10.50 is already more widely spread.
    Every Opera version probably has a bug or two. It's just the way software is lol. No version of any browser is perfect .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, there's no apparent scrollbars, but anyway I'd rather it doesn't scroll in any way

    I guess you are right that no version of software is perfect, but it really complicates our lives!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •