Overflow: hidden in Opera
Its about time to let myself officially launch my new music blog.
The reason is simple. I really want keep a music diary.
I have been doing it since March this year. I didn’t spend too long on the design and I like this design, this is my first experiment with dynamic content with the help of Jquery. It works wonderfully and is very appealing. But what took me so long was that there is a minor problem with Opera users which is forcing me to give up using this layout.
Since I have made this specifically to fit embed videos. The problem is that I am using the overflow:hidden CSS property here. In the Opera browser overflow:hidden does not apply to the <object> HTML tag. In other words, <object> will not be hidden which cause something like this:
And I am trying to find a way out here.
permalink | 05 Jun 09 at 12:49
Im not sure this can be help, perhaps
set a width may help.
Because i’m using overflow:hidden; most of the time in CSS, and i don’t see any problem in OPERA browser.
You can check one of my work here are using overflow hidden css for one of their highlight panel:
http://myprivilegebook.com/kuching/
#promowrapper .scroll {
overflow: hidden;
width: 520px;
margin: 0 auto;
position: relative;
}
permalink | 05 Jun 09 at 12:52
Also, for the , i’m using css to overlap the static image and define the position like this website:
http://ivoqconcept.com/
Which i think there is no overflow problem, not sure this can be help, but Opera is new modern web browser, should be no problem with overflow hidden method.
Hope this tip can help
permalink | 05 Jun 09 at 13:21
Thank you very much for your help!
Yes, in most of the time I also use the overflow property.
overflow:hidden should work ok with Opera however, it apparently doesnt work in Opera for elements.
(such as, embed videos, they are )
That is, if and element is in an overflow:hidden ,
In Opera, overflow:hidden hides everything but obejct
The website is still in progress but heres the link:
http://fm.athenaemily.com/
Feel free to try it with Opera and maybe it will be clearer whats going on. (when you click “next” a few times)
I thought about the number of Opera’s users and yea, maybe not to worry too much about it, but its good if I can solve this. :-/
permalink | 05 Jun 09 at 13:52
I just visited the website and i think this might solve the layer issue, for me i think it is layer issue in CSS.
Trying playing around with
z-index: 0;
To define the different layer of your
element like #menu, #frame
may help, example:
#menu {
z-index: 10;
}
#frame {
z-index: 1;
}
also, flash embed object, using
wmode: “transparent” can solve the overlap div problem, this is well known, hope this tips may help.
Good luck.
permalink | 05 Jun 09 at 18:25
Hello! I tried to send you a message through the fm website, and the contact form says I need to fill the “Subject” field, though it doesn’t appear on the screen. Tiny bug!
I’m in love with the design of the present blog, it’s freaking nice =))
Chears from France
http://www.twitter.com/benoa
permalink | 06 Jun 09 at 01:08
Thanks for spotting the bug!! Its now fixed :D
Thank you!
permalink | 10 Jun 09 at 10:12
Hey, I just checked out FM and I don’t think you should worry at all unless a lot of visitors to your site use Opera. I’m a mac user too but I’ve never used opera. I would probably worry about safari, firefox, ie, and chrome. Oh and be sure to check out your site on windows if you haven’t cause sometimes even if it renders correctly on all browsers on osx it might not on the same browser using windows. Just a heads up if you haven’t already.
permalink | 10 Jun 09 at 13:29
Hi, Thanks!
Yes, i did check it
For now it has just gone back to a normal layout, just to keep it simpler
Will see how many Opera users are there.
permalink | 24 Aug 09 at 02:00
Wow, at last I’ve found the solution for this bug, thanks for that =)!