Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Forums (http://www.go4expert.com/forums/web-design-forum/)
-   -   Opera 11 Calculates wrong width for elements (http://www.go4expert.com/forums/opera-11-calculates-wrong-width-elements-t27000/)

shabbir 23Oct2011 11:14

Opera 11 Calculates wrong width for elements
 
1 Attachment(s)
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.

shabbir 23Oct2011 11:50

Re: Opera 11 Calculates wrong width for elements
 
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 Code:

<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 Code:

<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 Code:

<!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.

http://imgs.g4estatic.com/opera11-bug/operaoutput.jpg

Output in FF

http://imgs.g4estatic.com/opera11-bug/ffoutput.jpg

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.


All times are GMT +5.5. The time now is 03:27.