[SOLVED - MOSTLY] - Weird CSS behavior in Opera
Moderator: General Moderators
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
[SOLVED - MOSTLY] - Weird CSS behavior in Opera
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.
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.
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.
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.
Yep... I was right thenWeirdan 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.
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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
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.
- AKA Panama Jack
- Forum Regular
- Posts: 878
- Joined: Mon Nov 14, 2005 4:21 pm
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.
What it looks like in IE.
What it looks like in Opera 9 Build 8473.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
As far as I'm concerned, FF and Opera got it right and IE can go choke.
- AKA Panama Jack
- Forum Regular
- Posts: 878
- Joined: Mon Nov 14, 2005 4:21 pm
I wonder if the extra
that you have in each of those lines isn't causing the problem.
Code: Select all
<span class="notice"></span><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>
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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 sameEverah 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.