[SOLVED - MOSTLY] - Weird CSS behavior in Opera

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

[SOLVED - MOSTLY] - Weird CSS behavior in Opera

Post 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.
Last edited by RobertGonzalez on Mon Jun 12, 2006 11:13 am, edited 1 time in total.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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!
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

I used Opera 8.54 and had the problem Everah was talking about.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

adding <div style="clear:both;"></div> as a last child of fieldset solves the problem (but introduces markup with no semantic :| ).
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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 :P (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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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 &nbsp;. 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.
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

I wonder if the extra

Code: Select all

<span class="notice"></span>
that you have in each of those lines isn't causing the problem.
<p class="nopad">
<span class="alignleft"><a href="http://www.ebsl.org/schedule/washingtonmanordolphins/" title="See schedules and results for the Washington Manor Dolphins">Washington Manor Dolphins</a><strong></strong></span>
<span class="alignright"><a href="http://www.ebsl.org/schedule/treeviewdolphins/" title="See schedules and results for the Treeview Dolphins">Treeview Dolphins</a><strong></strong><span class="notice"></span></span>
</p>
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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 :wink:).
Post Reply