Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Header doesn't show up in Opera

This discussion is related to the Noise addon.

a great theme, but if I try in Opera, the header with main menu doesn't show up.
What could be the issue?!


  • SrggamerSrggamer HardCore Gamer ✭✭✭

    Could you give me the link of the forum so I could see?

  • edited March 2013

    @Srggamer said:
    Could you give me the link of the forum so I could see?

    I see the header in Firefox and IE, but not in opera:(

  • SrggamerSrggamer HardCore Gamer ✭✭✭

    It doesn't look like its there at all :( I even tried have a look at colors all that. Maybe the theme is not supported by it?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    ok you need to change a few things try this:

    #Head {
    background: url('images/hbackground.png');
    padding: 0;
    border-bottom: 1px solid #252525;
    -moz-box-shadow: 0 0 6px #444;
    -webkit-box-shadow: 0 0 6px#444;
    box-shadow: 0 0 6px #444;
    margin-top: 0;
    z-index: 1000;
    width: 100%;
  • @vrijvlinder said:
    ok you need to change a few things try this:

    Wow, and what happens now - I get my Header in Opera, but in Firefox there are 52px free space from the top.....

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    you seem to still have position:fixed in there long as you have that you will have the problem. that rule is dependent of document type.

    Fixed positioning

    An element with position:fixed is fixed with respect to the viewport. It stays where it is, even if the document is scrolled. For media="print" a fixed element will be repeated on each printed page.
    Note that Internet Explorer versions 6 and older do not support fixed positioning at all.
    Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.

    Absolutely positioned elements are removed entirely from the document flow. They will overlap other content unless you make room for them. If all child elements of a container are absolutely positioned, the parent’s height will collapse to zero.

    Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block.

    Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block. They always appear at the same place inside the browser window when viewed on screen; when printed, they will appear on each page.

    The positions of each edge of an absolutely positioned element can be specified with the top, right, bottom and left properties. The value of each property specifies the distance of that edge to the corresponding edge of the element’s containing block.
    All positioned elements are rendered at a certain stack level within a stacking context.

    You can change the stack level of a positioned element using the z-index property. When z-index is specified as an integer value, the element establishes a local stacking context for its descendants.

  • @vrijvlinder said:

    Yes, commenting out #Fixed improves it, but then it is not fixed anymore;
    I started to search for any Opera specific override out there...(?!)

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I know you want to have the header stay where it is and have the Body scroll under it. I get it, but to make that work you will need to make adjustments to everything else, and as you do you will see that it does not work the same on all browsers. You could try using position:absolute;top:0px;left:0px;background-attachment:fixed; it is not easy to make it 100% compatible with everything. What is important is that it works well.

    You may be able to fix it by adding the viewport meta tag < meta name="viewport" content="width=device-width, user-scalable=no" > since the position:fixed has to do with regard to the viewport/window .

    here is a list of supporting browsers of position:fixed

  • edited March 2013

    At the end of the day I did a separate rule for Opera with
    /*doesnotexist:-o-prefocus, #Head {}*/

    -o-prefocus is a pseudo-class introduced in Opera 9.5 that allows styles to be targeted for Opera only.

    Example: The following will make text in the 'example' class red in Opera only.

    doesnotexist:-o-prefocus, .example {
    color: red;

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited March 2013

    With Opera on my computer the search form is too high it gets lost. Maybe add this to the opera variable ...

    #Head .Search, #Head #Search { 
    position: absolute;
    right: 0px;
    text-align: right;
    top: 6px;
  • @vrijvlinder I did what you said, but on my screen I didn't see this error with search box, may be on larger screens....

Sign In or Register to comment.