Page 1 of 1
[SOLVED - MOSTLY] - Weird CSS behavior in Opera
Posted: Fri Jun 09, 2006 1:33 am
by RobertGonzalez
Can someone look at this page (
http://www.ebsl.org/schedule/ ) in FF, IE and Opera and tell me wha the heck is going on in Opera to make the fieldset borders not wrap the actual fieldset content? All help is much appreciated.
PS Sorry for the unlenghty post when needing help. I am tireder than a crud hungry varmint running from an angry billygoat right now.
Posted: Fri Jun 09, 2006 5:26 am
by Oren
That's very strange. It works with Firefox, Internet Explorer and Netscape, but not with Opera.
Try to get rid of the float: left; and float: right; and tell us what happens.
P.S Great design, clean and simple. I like it!
Posted: Fri Jun 09, 2006 6:03 am
by s.dot
From personally dealing with floats, you might need a clear: both; somewhere after it. Although I cannot say for sure.
Is this Opera 9 beta?
Opera 9 betas rendered my website completely differently than Opera 8.x and older.
Posted: Fri Jun 09, 2006 6:32 am
by Oren
I used Opera 8.54 and had the problem Everah was talking about.
Posted: Fri Jun 09, 2006 9:17 am
by Weirdan
I tried the page in Opera 9, it looks broken.
It has something to do with floats inside the fieldsets, because removing float property from inner spans solves the problem.
Posted: Fri Jun 09, 2006 9:30 am
by Weirdan
adding <div style="clear:both;"></div> as a last child of fieldset solves the problem (but introduces markup with no semantic

).
Posted: Fri Jun 09, 2006 10:05 am
by Oren
Weirdan wrote:I tried the page in Opera 9, it looks broken.
It has something to do with floats inside the fieldsets, because removing float property from inner spans solves the problem.
Yep... I was right then

(been too busy to save the page and all needed files on my PC and start looking for the problem)
P.S As I said, it worked with IE, but not perfectly. The spaces between the links were too big - unlike with all other browsers which I used.
Posted: Fri Jun 09, 2006 10:18 am
by RobertGonzalez
Thanks for the responses guys. I really appreciate it. I will try the fixes you suggested tonight and see what comes of it.
Posted: Mon Jun 12, 2006 11:13 am
by RobertGonzalez
Thanks for all the feedback guys. It is a really weird issue. The spans with floats inside of a <p> tag totally kill the surrounding fieldset tag. No matter if I applied a clear to the fieldset, the <p> or the spans (though I did find out afterward that clear only works on block-level elements).
What I ended up doing was adding a new <p> line at the end of the span lines with either some text in it or a . That is a cheap @$$ hack, but for now it works. IE, FF, Opera and Safari render it properly, though each renders it a little differently.
But thanks again for all the feedback. The clear: both; should have worked, but I think I may have screwed something up elsewhere to prevent them from doing what they should be doing.
Posted: Mon Jun 12, 2006 11:32 am
by AKA Panama Jack
Personally I think the site looks BETTER in Opera than IE. Those big gaps between links are, well... ugly.
What it looks like in IE.
What it looks like in Opera 9 Build 8473.
Posted: Mon Jun 12, 2006 11:43 am
by RobertGonzalez
Thanks for the pictures PJ. I agree with you. I like the FF/Opera rendering a lot better than IE. Infact, I hate IE. The only way to get IE to render it without the large gaps (without a hack in the CSS) is to change padding and margin properties, but then rendering in FF and Opera tanked.
As far as I'm concerned, FF and Opera got it right and IE can go choke.
Posted: Mon Jun 12, 2006 11:51 am
by AKA Panama Jack
I wonder if the extra
that you have in each of those lines isn't causing the problem.
Posted: Mon Jun 12, 2006 12:03 pm
by RobertGonzalez
That span is one of the few things that was making the rendering work. I have that wrapped inside of a <p> block to keep the fieldset border bottoming out.
Posted: Mon Jun 12, 2006 4:29 pm
by Oren
Everah wrote:The only way to get IE to render it without the large gaps (without a hack in the CSS) is to change padding and margin properties, but then rendering in FF and Opera tanked.
There is nothing wrong in using CSS hacks. At first, this idea sounded a little bit odd for me too, but it didn't take very long for me to understand that there is no better solution... At least not now. The web world is not perfect... Each browser follows its own standards instead of using one global standard, and that's why we can't avoid using CSS hacks in order to achieve the same look in all browsers (almost the same

).