Trying to deal with an issue in Opera 11.5. If you have all floated element (Floated right) Opera gives an arbitrary fixed width value to the element parents. No width is specified in any CSS whatsoever. Was wondering if someone knows the logic Opera uses to calculate width for computed styles? You can see the attached image for reference where Firefox calculates the width of the element as sum total of all child elements but for Opera it is all different.
Just managed to find out what the issue is with Opera. When calculating the width of an element it calculates based on the sum total of all the width of child elements but if you have 2 Div elements in child displaying as block elements actually the width is not sum total of both the elements. Let me try to explain this with an example. We have the following style elements. HTML: <style> .bemyfriend {padding-top:20px;width:176px;} .followmead {margin-bottom:10px;height:32px;width:176px;} .followmead a span{width:32px;height:32px;border:none; float:left; margin:2px;} .followmead .follow-googleplus {background:url('http://ads.imtips.co/follow-me.png') 0 0;margin-left:0;} .followmead .follow-facebook {background:url('http://ads.imtips.co/follow-me.png') -32px 0;} .followmead .follow-linkedin {background:url('http://ads.imtips.co/follow-me.png') -64px 0;} .followmead .follow-rss {background:url('http://ads.imtips.co/follow-me.png') -96px 0;} .followmead .follow-twitter {background:url('http://ads.imtips.co/follow-me.png') -128px 0;margin-right:0;} </style> Now we have the following HTML code HTML: <div id="testingforopera" style="float:right;"> <div class="followmead"> <a href="https://plus.google.com/110530470131451821149" target="_blank" rel="me"><span class="follow-googleplus"></span></a> <a href="http://www.facebook.com/shabbirbhimani" target="_blank" rel="me"><span class="follow-facebook"></span></a> <a href="http://www.linkedin.com/in/shabbirbhimani" target="_blank" rel="me"><span class="follow-linkedin"></span></a> <a href="http://feeds.feedburner.com/imtips" target="_blank"><span class="follow-rss"></span></a> <a href="http://twitter.com/shabbirbhimani" target="_blank" rel="me"><span class="follow-twitter"></span></a> </div> <div style="height: 20px; width: 175px;">Opera</div> </div> We see that width of the testingforopera should not be sum total of both the Div elements but it should be width of followmead because both are display block and so should be in each respective line. See the complete HTML code in Opera and Firefox HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Opera Bug</TITLE> </HEAD> <style> .bemyfriend {padding-top:20px;width:176px;} .followmead {margin-bottom:10px;height:32px;width:176px;} .followmead a span{width:32px;height:32px;border:none; float:left; margin:2px;} .followmead .follow-googleplus {background:url('http://ads.imtips.co/follow-me.png') 0 0;margin-left:0;} .followmead .follow-facebook {background:url('http://ads.imtips.co/follow-me.png') -32px 0;} .followmead .follow-linkedin {background:url('http://ads.imtips.co/follow-me.png') -64px 0;} .followmead .follow-rss {background:url('http://ads.imtips.co/follow-me.png') -96px 0;} .followmead .follow-twitter {background:url('http://ads.imtips.co/follow-me.png') -128px 0;margin-right:0;} </style> <BODY> <div id="testingforopera" style="float:right;"> <div class="followmead"> <a href="https://plus.google.com/110530470131451821149" target="_blank" rel="me"><span class="follow-googleplus"></span></a> <a href="http://www.facebook.com/shabbirbhimani" target="_blank" rel="me"><span class="follow-facebook"></span></a> <a href="http://www.linkedin.com/in/shabbirbhimani" target="_blank" rel="me"><span class="follow-linkedin"></span></a> <a href="http://feeds.feedburner.com/imtips" target="_blank"><span class="follow-rss"></span></a> <a href="http://twitter.com/shabbirbhimani" target="_blank" rel="me"><span class="follow-twitter"></span></a> </div> <div style="height: 20px; width: 175px;">Opera</div> </div> </BODY> </HTML> Output in Opera. Output in FF To fix the issue all you have to do is specify the width of the parent element instead of allowing Opera to calculate. I hope this helps fellow webmasters.
